解析URL及页面渲染

URL组成：http://rendudata.com:8080

                 协议：//域名：端口号

从输入URL到最后页面呈现的过程（网页响应过程）：

1、用户输入URL地址

2、浏览器从URL解析出主机名

3、浏览器将主机名转换成服务器的ip地址（ 浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）

4、浏览器将端口号从URL中解析出来

5、浏览器建立一条与目标Web服务器的TCP连接（三次握手）

6、浏览器向服务器发送一条HTTP请求报文

7、服务器向浏览器返回一条响应报文

8、关闭连接，浏览器解析文档

9、如果文档中有资源，重复6 7 8动作，直至资源全部加载完毕

浏览器渲染主要流程：

不同的浏览器内核不同，所以渲染过程不太一样。

基本过程：

1. HTML解析出DOM Tree

2. CSS解析出Style Rules

3. 将二者关联生成Render Tree

4. Layout 根据Render Tree计算每个节点的信息

5. Painting 根据计算好的信息绘制整个页面

通过Chrome调试工具查看页面渲染顺序：

发起请求—》解析HTML—》解析样式—》执行JavaScript—》布局—》绘制

页面渲染优化：

1、HTML文档结构层次尽量少，最好不深于六层；

2、脚本尽量后放，放在前即可；

3、少量首屏样式内联放在标签内；

4、样式结构层次尽量简单；

5、在脚本中尽量减少DOM操作，尽量缓存访问DOM的样式信息，避免过度触发回流；

6、减少通过JavaScript代码修改元素样式，尽量使用修改class名方式操作样式或动画；

7、动画尽量使用在绝对定位或固定定位的元素上；

8、隐藏在屏幕外，或在页面滚动时，尽量停止动画；

9、尽量缓存DOM查找，查找器尽量简洁；

10、涉及多域名的网站，可以开启域名预解析