简述浏览器渲染机制

简要地了解浏览器的渲染机制是前端开发人员的必修课之一。明白浏览器的渲染机制不仅能够帮助我们避免部分程序错误,还能够使我们开发的应用更快速、流畅,提升用户体验。

浏览器的整个渲染机制大致上可以通过上面这张图来简单表示。
1、在浏览器中输入URL。
2、浏览器向相应的服务器发送请求,接受响应。
3、HTML解析器自上而下地将HTML文件解析成一棵DOM树,树上的节点就是相应的元素。
4、CSS解析器将CSS解析成CSSOM树。
5、根据DOM树和CSSOM树构建相应的Render树(渲染树)。
6、Layout(布局):计算出每个节点在屏幕中的位置。
7、Paint(绘制):将内容显示在屏幕上。

补充:
1、DOM(Document Object Model)和CSSOM(CSS Object Model)是一种树形的数据结构
2、渲染树不止是简单的DOM树+CSSOM树,DOM树中的head等节点和不需要渲染在页面上的节点(display:none)都不会出现在Render树中。
3、加载资源,如img、CSS文件等都是以异步请求的方式实现的,不会影响到元素的渲染。而请求JavaScript文件是先将渲染进程挂起,等加载完毕再继续渲染(又称渲染阻塞)。这是因为JS文件中可能出现很多DOM操作,这样能够提高性能。另外,加载JS文件最好写在HTML文件底部,否则容易导致对DOM的操作时,DOM还未生成。

除了渲染的流程之外,还有两个十分重要的概念:Reflow和Repaint
Reflow(回流):当浏览器上某个位置的布局发生了变化,浏览器会重新从根部开始计算该节点的布局,重新验证并计算Render树。
Repaint(重画):只改变页面元素的颜色、字体等不影响布局的属性时,浏览器会重新渲染Render树,进行重画操作。
两者的区别就是页面布局是否改变,比如:display:none会触发reflow,而visibility:hidden只会触发repaint。两者虽然都会降低页面加载速率,但是都是不可避免的,我们在设计的过程中应该减少两者发生的次数。

关于浏览器的渲染机制就简单的讲完了,不过这些都是毕竟基础、浅层的东西,我只是简单地一笔带过,只能算得上了解了一下,还有很多东西像元素是怎么成为DOM树的、增量异步reflow、DTD(Document Type Definition)等等更深层次的东西,以后有机会再讲吧!

“简述浏览器渲染机制”的一个回复

发表评论

邮箱地址不会被公开。 必填项已用*标注