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

原文参考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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值