优化浏览器渲染

Posted lyralee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优化浏览器渲染相关的知识,希望对你有一定的参考价值。

优化浏览器渲染,要从关键渲染路径出发,基本上是优化html、CSS、JS的依赖关系。

其中HTML构建的DOM消耗是必须的。

1. 从阻塞渲染的CSS出发

CSS默认是阻塞渲染的资源。

根据浏览器渲染的过程可知,浏览器渲染的基础是DOM和CSSOM。在生成CSSOM之前,不会渲染任何内容。

生成CSSOM的过程是先从服务器下载CSS文件(不管阻塞与否都要先下载),然后过滤出阻塞渲染的CSS文件生成CSSOM。

为了缩短生成CSSOM的时间:

1. 应该尽量精简CSS

2. 利用媒体类型和媒体查询来解除对渲染的阻塞。

示例:(都会下载,但是只有满足media条件,才用于CSSOM)

// 只有当页面>=400px时才会阻塞渲染
<link href="./1.css" rel="stylesheet" media="(min-width:400px)">

2. 从阻塞渲染的内联脚本出发

在关键渲染路径中,如果HTML解析器遇到script标签,会暂停构建DOM,将控制权转给JS引擎,

等js执行完成,再从之间暂停的地方继续构建DOM。也就是说,js脚本会阻碍DOM构建,延缓首次渲染。

如果在js脚本执行过程中,遇到修改CSSOM的情况:
--firefox浏览器会等js前的CSSOM构建完成再执行脚本;
--webkit浏览器会暂停执行js脚本和DOM构建,直到完成CSSOM的下载和构建。

 

 

 

3. 从阻塞渲染的JS文件下载出发

 

为了缩短JS脚本的阻塞时间:

1. script添加async属性

async属性只能用于外联脚本;内联脚本不能使用async属性。

遇到外联js, 浏览器渲染暂停,先从磁盘/缓存/远程服务器获取获取脚本,下载时间大大阻塞了渲染。

添加异步标识,会解除文件下载导致的渲染阻塞。

 <script src="../js/1.js" async></script>

async属性的作用是: 使用另一个进程下载脚本;

1. HTML解析器遇到async属性的script外联标签;
2. 会继续HTML解析,同时并行下载js文件;
3. 等js文件下载完成,暂停HTML解析,立即执行脚本;
4. 脚本执行后,继续HTML解析。

如果遇到多个含有async属性的script标签,执行顺序会按照下载完成的顺序。

 

以上是关于优化浏览器渲染的主要内容,如果未能解决你的问题,请参考以下文章

性能优化: CSS 和 JS 的装载与执行(一个网站在浏览器端, 是如何进行渲染的CSS+JS 渲染过程中的性能优化点)

性能优化: CSS 和 JS 的装载与执行(一个网站在浏览器端, 是如何进行渲染的CSS+JS 渲染过程中的性能优化点)

优化浏览器渲染

web性能优化之浏览器网页渲染原理

从浏览器渲染层面解析css3动效优化原理

性能优化之动画