温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML渲染过程的特点

发布时间:2021-01-06 10:01:03 来源:亿速云 阅读:211 作者:小新 栏目:移动开发

小编给大家分享一下HTML渲染过程的特点,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

HTML渲染过程的一些特点

顺序执行,并发加载

通过词法分析,通过HTML生成Token对象(当前节点的所有子节点生成后,才会通过next token获取到当前节点的兄弟节点),最终生成Dom Tree浏览器中可以支持并发请求,不同浏览器所支持的并发数量不同(以域名划分),以Chrome为例,并发上限为6个。
优化点: 把CDN资源分布在多个域名下

是否阻塞

CSS:
   CSS放在head中会阻塞页面的渲染(也就是说页面的渲染会等到css加载完成)
   CSS阻塞JS的执行 (因为GUI线程和JS线程是互斥的,因为有可能JS会操作CSS)
   CSS不阻塞外部脚本的加载(不阻塞JS的加载,但阻塞JS的执行,因为浏览器都会有预先扫描器)JS:
   直接引入的JS会阻塞页面的渲染(GUI线程和JS线程互斥)
   JS不阻塞资源的加载(这有赖于chrome的预加载机制)
   JS顺序执行,阻塞后续JS逻辑的执行

依赖关系

页面渲染依赖于CSS的加载
(那既然页面是在等待Dom Tree 和 Css Tree生成后再去渲染,那为何需要把CSS放到Head中)
(因为CSS中有可能是异步加载的,所以为了保证依赖关系,需要把CSS放到head中)
JS的执行顺序的依赖关系
JS逻辑对于DOM节点的依赖关系

引入方式

CSS引入link @importJS引入
直接引入
defer (不阻塞页面渲染,顺序执行)
async (不阻塞页面渲染,不保证顺序执行)
异步动态引入JS

HTML渲染过程的特点
蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

加载和执行的一些优化点

  • CSS样式表置顶 (阻塞页面渲染)

  • 用link代替@import (1,@import是CSS层面的,不会触发浏览器并发机制;2,在CSS加载完成后进行的引入。 但现代浏览器中@import和link在表现上已经没有上述区别了。

  • js脚本置底(因为浏览器有并发限制,所以把js放到下边,减少占用的并发数,使得页面能够更快的渲染出来)

  • 合理使用js的异步加载能力

浏览器的渲染机制

HTML渲染过程的特点

以上是“HTML渲染过程的特点”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI