如何提升页面渲染效率--笔记

原文参考icodeit.org/2017/02/frontend-page-performance-tuning/
渲染过程

javascript->style->layout->paint->composite

下载html文档
解析html文档，生成dom
下载文档中引用的css,js
解析css样式表，生成cssom
将js代码交给js引擎执行
合并dom和cssom生成render tree
根据render tree进行布局layout(为每个元素计算尺寸和位置信息)
绘制(paint)每个层中的元素（绘制每个瓦片，瓦片这个词与gis中的瓦片含义相同）
执行图层合并（composite layers）

render tree会被分层绘制，最后合并，在GPU中执行。

缩短渲染过程，解决办法如下
1，对不同终端，同一终端不同模式，书写不同规则集(个人感觉只有细分终端时候比较有用)
用link方式，
<link href="print.css" rel="stylesheet" media="print">
<link href="landscape.css" rel="stylesheet" media="orientation:landscape">

2.书写高效css规则（先分清css的优先级），避免过多深层嵌套
动画用GPU执行，书写格式使用transform启动
如：@keyframes my{
20%{
transfrom:translateY(10px);
}
}

3.js引入时候，直接指定是否为异步
<script src="worker.js" async></script>指定为异步引入

4.获取元素的宽度和高度属性，需要重新计算。这种获取动作尽量减少重复

5.涉及到宽高会触发layout->paint->composite layers
涉及到背景色一类会触发paint->composite layers
具体参照css triggers