从输入网址到index呈现中间到底发生了什么

昨天面试的时候，面试官问到了一个问题：从输入网址按下Enter到网站首页呈现到底发生了什么，这个问题之前确实没有仔细考虑过，所以在网上查阅资料后自己总结一下，下面是个人总结：

 从输入网址到页面呈现这个过程大致分为以下两个部分：

1.网络通信

2.页面渲染

网络通信

1.输入网址

2.负责域名查询与解析的DNS服务

3.应用层 客户端发送HTTP请求报文

4.传输层 确保传输报文的可靠性的TCP协议（通过“三次握手”等方法保证传输的安全可靠）

5.网络层 负责传输的IP协议

6.链路层 传输数据的硬件部分

7.服务器接收报文

8.应用层 服务器发送HTTP响应报文

在网络通信阶段对前端的优化建议：

1.减少HTTP请求数

    （1）合并资源，如合并JavaScript文件，CSS文件，利用CSS Sprite合并图片等

    （2）内联图片，data url节省了HTTP请求，但是如果这个图像在网页多个地方显示会加大网页的内容，延长下载的时间。

2.域名提前解析，在页面中不同域名的链接需指定预取域名

3.避免重定向（重定向会增加http请求的次数）

4.cookie优化，cookie越多会导致请求头越大

5.启用GZIP压缩，（Accept-Encoding：g-zip）

6.使用CDN加速，减小服务器压力

7.合理利用HTTP缓存，通过设置Expires

页面渲染

1.解析html以构建DOM树

2.构建render树

3.布局render树

4.绘制render树

5.页面变化造成的影响

在页面渲染阶段对前端优化建议：

1.建议将CSS文件放在页首，以便构建DOM树；而将JS文件尽量放在页面下方，放置阻塞构建DOM树；而JS的onLoad时间里，不要影响首屏渲染的、操作DOM树的JS代码。

2.精简JS和CSS代码，并进行代码的压缩，使得CSS和JS资源加载的更快

3.编写高效的CSS代码

4.重要的图片或者想让用户看到的图片使用img标签，次要的图片使用background引入

流程图如下：

 

简：浏览器渲染页面的流程如下：

1.解析HTML文件，创建DOM树。

   自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；

3.将CSS与DOM合并，构建渲染树（Render Tree）

4.布局和绘制，重绘（repaint）和重排（reflow）