第一步：加载
根据URL进行域名解析，向服务器发起请求，接收文件
第二部：解析
渲染引擎开始解析html-->并将标签转化为内容树中的dom节点-->解析外部CSS文件及style标签中的样式-->共同构建render树-->执行布局过程-->确定每个节点在屏幕上的确切坐标-->绘制
1．把 CSS 资源引用放到 HTML 文件顶部一般推荐将所有 CSS 资源尽早指定在 HTML 文档
中，这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
2．JavaScript 资源引用放到 HTML 文件底部
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的，除非被标记为异步或者通过其他的异步方式加载，否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
3．尽量预先设定图片等大小
在加载大量的图片元素时，尽量预先限定图片的尺寸大小，否则在图片加载过程中会更新图片的排版信息，产生大量的重排
4．不要在 HTML 中直接缩放图片
在 HTML 中直接缩放图片会导致页面内容的重排重绘，此时可能会使页面中的其他 *** 作产生卡顿，因此要尽量减少在页面中直接进行图片缩放。
5．减少 DOM 元素数量和深度
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和层级较少。
6．尽量避免在选择器末尾添加通配符
CSS 解析匹配到 渲染树的过程是从右到左的逆向匹配，在选择器末尾添加通配符至少会增加一倍多计算量。
7．减少使用关系型样式表的写法
直接使用唯一的类名即可最大限度的提升渲染引擎绘制渲染树等效率
8．尽量减少使用 JS 动画
JS 直接 *** 作 DOM 极容易引起页面的重排
9．CSS 动画使用 translate、scale 代替 top、height
尽量使用 CSS3 的 translate、scale 属性代替 top、left 和 height、width，避免大量的重排计算
10．尽量避免使用 table、iframe
table内容的渲染是将 table 的 DOM 渲染树全部生成完并一次性绘制到页面上的，所以在长表格渲染时很耗性能，应该尽量避免使用它，可以考虑使用列表元素 ul 代替。尽量使用异步的方式动态添加 iframe，因为 iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析。
11．避免运行耗时的 JavaScript
长时间运行的 JavaScript 会阻塞浏览器构建 DOM 树、DOM 渲染树、渲染页面。所以，任何与页面初次渲染无关的逻辑功能都应该延迟加载执行，这和 JavaScript 资源的异步加载思路是一致的。
12．避免使用 CSS 表达式或 CSS 滤镜
CSS 表达式或 CSS 滤镜的解析渲染速度是比较慢的，在有其他解决方案的情况下应该尽量避免使用
你定义好一个模板。最简单的例子，例如<html>
<div>{$what}</div>
</html>
这只是一个模板。{$what}是数据。此时不知道数据是什么。
渲染引擎的作用就是将“数据”渲染到你的模板里。
比如，我想渲染Hello World
那渲染后的结果就变成
<html>
<div>Hello World</div>
</html>
当然这只是最简答的例子；
一般来说，至少会提供分支，迭代。还有一些内置函数，如格式化等等
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）