异步加载
标签:
我们想提高网页性能的最有影响力的措施之一,就是以不延迟网页渲染的方式加载CSS。在默认情况下,浏览器在加载CSS时将终止页面的样式呈现(同步加载),也就是加载CSS会阻塞DOM树的渲染(但并不会阻塞DOM树的构建),可以简单理解为:当在加载CSS的同时,也在构建DOM树,只是没有应用上样式。
渲染流程简单过一遍浏览器渲染的流程:
加载HTML资源
解析HTML
加载CSS资源,同时构建DOM树
解析CSS,同时渲染DOM树
当CSS文件过大,就会停留在第3步,所以网速慢时,打开网站的时候经常遇到没有样式的情况。
所以我们需要先加载部分CSS(首屏需要用到的CSS),其他优先级比较低的CSS就以异步的方式加载。与script元素不同,没有async或defer属性可以简单地应用于link元素,但是可以模拟。
异步加载 1. 利用媒体查询设置一个当前浏览器不支持的值:
<link href="http://www.mamicode.com/index.css" media="none">这样浏览器将会异步加载这个CSS文件(优先度比较低),在加载完毕之后,使用onload属性将link的媒体类型设置为all,然后便开始渲染。
如果有如下代码:
<link href="http://www.mamicode.com/index2.css" media="none"> <link href="http://www.mamicode.com/index1.css"> web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)浏览器加载优先级如下:
又或者有如下代码:
<link href="http://www.mamicode.com/index1.css" media="screen and (max-width: 800px)"> <link href="http://www.mamicode.com/index2.css" media="screen and (min-width: 800px)">刷新页面时,如果视窗宽度小于800px,那么优先加载index1.css,如果大于800px,则相反:
总结:媒体查询不匹配的样式优先级低?。
2. 提前加载资源这个跟上述类似,但是优先级是最高的,不过还是异步加载,不会阻塞DOM的渲染,只是浏览器支持度比较低?。
<link href="http://www.mamicode.com/index.css" as="style">告诉浏览器"请提前加载好此资源,我后面会用到!"。当用到的时候,浏览器便从缓存中拿取?。
所以正确操作跟媒体查询一样:
<link href="http://www.mamicode.com/index.css" as="style">当然,该属性还可以应用于其他资源,当你需要用到这些资源的时候,浏览器会直接从缓存中拿,不再次发送请求了。
<link href="http://www.mamicode.com/index.js" as="script"> <link href="http://www.mamicode.com/index.png" as="image"> <link href="http://www.mamicode.com/index.mp4" as="video" type="video/mp4"> 3. 捞仔写法 let link = document.createElement("link"); link.rel = "stylesheet"; link.href = "http://www.mamicode.com/index1.css"; document.head.appendChild(link); web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频) 总结重要样式使用同步加载(常规写法),优先级低的则使用异步加载,异步加载不会阻塞页面的渲染。
越来越多的人发现,可能只需要简单的HTML方法,而简单往往是最好的。
<link href="http://www.mamicode.com/main.css"> <link href="http://www.mamicode.com/other.css" media="none">web前端入门到实战:异步加载CSS最简单的实现方式
标签:
原文地址:https://blog.51cto.com/14592820/2447569
温馨提示: 本文由杰米博客推荐,转载请保留链接: https://www.jmwww.net/file/web/10076.html