本文介绍了页面渲染的基本流程，包括Compute Style、Construct Frames、Layout和Painting四个步骤，并着重讨论了影响渲染速度的两个关键因素：重绘(repaint)和回流(reflow)。回流可能导致整个页面重新渲染，而重绘仅影响视觉样式。文章提供了减少回流影响的策略，如限制reflow范围、使用CSS class而非直接修改style属性、避免表格布局等，以提升前端性能。
最近看到的不熟悉的词挺多的，只能一个个找资料一个个字看，然后自己根据自己的理解进行一定的总结，若有不对之处，还请路过的大佬不吝指正。
一.什么是渲染
页面渲染引擎的基本操作，简单而言是从一个网页的Url开始，根据Url所对应的网页各项资源，输出可视化的结果的过程；
基本流程可大致分为：
- Compute Style。根据Url读取解析Html、Css文件，根据Html代码形成Dom（文本对象模型）Tree，根据Css形成Css Rule Tree（Css规则树）；
- Construct Frames。在根据Dom Tree和Css Rule Tree之上，创建一颗由一组待生成对象组成的Rendering Tree （渲染树）；
- Layout。计算每个Element（对象）的位置，定位坐标和大小，是否换行，各种position, overflow, z-index属性等等等等；
- Painting。将Rendering Tree（渲染树）上的元素展现在浏览器上，形成可视化结果。
整个过程中可以注意的一些小问题：
1. 浏览器载入 HTML 代码，检测到 <head> 中有 <link> 引用外部 CSS 文件,则浏览器立即发送CSS文件请求，获取浏览器返回的CSS文件； （CSS文件合并，减少HTTP请求） 2. 浏览器载入 HTML 中 <body> 部分的代码ÿ
最低0.47元/天 解锁文章
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
