Web前端基础篇-HTML-04-HTML 渲染流程

今天是5月20号,别人的520是甜蜜、爱情、表白,而老夫的520就是写代码、努力写代码、加班写代码,一入代码深似海,从此爱情是路人。言归正传,老夫要开始装逼啦。


tmpdir__17_9_7_15_04_07.jpg

温馨提示:文章结构如下,可能阅读完需要花费5分钟

HTML的渲染流程分为3个阶段(自己分的)
1、URL访问请求数据阶段
2、浏览器解析渲染
3、页面布局绘制阶段
最后,总结一下渲染过程可以做的性能优化

一、URL访问请求数据阶段

1.用户输入域名地址,浏览器通过URL域名解析访问IP地址

2.发起TCP的3次握手,就是我们熟悉的建立连接,三次握手,报文等等

3.建立TCP连接后,浏览器向服务器发送http请求
这里的http请求有个注意的参数:

User-Agent:产生请求的浏览器类型
Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机
keep-alive (保持连接)
Authorization: 客户端提供给服务器的认证信息

4.服务端接收到请求开始响应HTTP请求
4.1服务器生成html代码,返回给浏览器
注意:html页面代码可能是经过压缩的
4.2服务返回状态码

1xx: 信息性状态码
e.g:100, 101, 102

2xx: 成功状态码
e.g:200:OK

3xx: 重定向状态码
e.g
301 永久重定向, Location响应首部的值仍为当前URL,因此为隐藏重定向
302 临时重定向,显式重定向, Location响应首部的值为新的URL
304Not Modified 未修改,比如本地缓存的资源文件和服务器上比较时,发现并没有修改,服务器返回一个304状态码, 告诉浏览器,你不用请求该资源,直接使用本地的资源即可

4xx: 客户端错误状态码
e.g 404: Not Found 请求的URL资源并不存在

5xx: 服务器端错误状态码
e.g
500: Internal Server Error 服务器内部错误
502: Bad Gateway 前面代理服务器联系不到后端的服务器时出现
504:Gateway Timeout 这个是代理能联系到后端的服务器,但是后端的服务器在规定的时间内没有给代理服务器响应

5.浏览器接收到响应的HTML,开始解析
5.1 如果有压缩则首先进行解压处理,紧接着就是页面解析渲染
5.2 遇到js/css/image等静态资源,开始请求html代码中的资源(如js、css、图片等)
5.3 使用keep-alive特性了,建立一次HTTP连接,可以请求多个资源

二、浏览器解析渲染

1.浏览器解析HTML,并构建DOM树

1.1 浏览器采用自上而下的方式解析
1.2 HTML浏览器有专门的html解析器来解析HTML
1.3 遇到样式(link、style)与脚本文件(script)会阻塞解析(可以使用async 或者defer,不会阻塞线程)

注意:
display:none 的元素也会在DOM树中
注释也会在DOM树中
script标签会在DOM树中

2.解析css去构建CSSOM树

2.1 浏览器会解析CSS文件并生成CSS规则树
2.2 每个CSS文件都会被分析成StyleSheet对象,每个对象都包括CSS规则

注意:
CSS解析可以与DOM解析同进行
CSS解析与script的执行互斥
在Webkit内核中进行了script执行优化,只有在JS访问CSS时才会发生互斥

3、构建渲染树Render Tree
通过DOM树和CSS规则树,浏览器就可以通过他们两个构建渲染树

注意:
Render Tree和DOM Tree不完全对应
display: none的元素不在Render Tree中
visibility: hidden的元素在Render Tree中
JavaScript 应尽量少的去影响 DOM 的构建

三、页面布局绘制阶段

3.1.Render Tree 渲染树布局

布局阶段会从渲染树的根节点开始遍历-递归遍历
布局阶段的输出就是我们常说的盒子模型-计算大小和位置

注意
float元素,absoulte元素,fixed元素会发生位置偏移
脱离文档流,其实就是脱离Render Tree

3.2.Rendder Tree 渲染树绘制

浏览器会遍历渲染树,调用渲染器的paint()方法在屏幕上显示其内容
渲染树的绘制工作是由浏览器的UI后端组件完成的

3.3.回流(reflow)

不可避免
只要有交互就存在,就会引起部分页面重新渲染
当render树绘制完成之后,比如JavaScript改变样式或Tab,隐藏,这时候render树就需要重新计算

3.4.重绘(repaint)

当我们改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重绘,但是元素的几何尺寸和位置没有发生改变

注意:
display:none 因为改变组件的大小,会触发reflow
visibility: hidden 不会改变组件占位大小,只会触发repaint
因为reflow不可避免,但是可以减少比如:用transform做形变和位移

四、总结渲染过程可以做的性能优化

1.样式文件应当在 head 标签中,而脚本文件在 body 结束前,这样可以防止阻塞的方式

2.简化并优化CSS选择器,尽量将嵌套层减少到最小

3.尽量减少在 JavaScript 中进行DOM操作

4.修改元素样式时,更改其class属性是性能最高的方法

5.不要使用document.write()这种输出内容的方法,使用现代W3C DOM方法来为现代浏览器处理页面内容

6.DNS查询和解析域名也是消耗时间的,所以要减少对外部JavaScript、CSS、图片等资源的引用,不同域名的使用越少越好

最后,以上总结都是老夫为了方便理解自己总结的内容,其中参考以下资料,创作不易,尊重原著

参考文献链接
https://blog.csdn.net/WuLex/article/details/77850206
https://www.imooc.com/article/40004
https://www.jianshu.com/p/fbe0e9fa45a6/

H5系列
Web前端基础篇-HTML-01-BOM浏览器对象模型
Web前端基础篇-HTML-02-HTML的生命周期
Web前端基础篇-HTML-03-事件处理系统
Web前端基础篇-HTML-04-HTML 渲染流程
Web前端基础篇-HTML5-05-最全本地存储总结
Web前端基础篇-HTML5-06-离线缓存AppCache
Web前端基础篇-HTML5-07-浏览器缓存机制