html渲染过程
过程：
html是最先被传到客户端，将字节流转换成字符流，通过浏览器端的词法分析，将响应的语法分析成相应的token（将标签解析成对象）,不断通过next token 添加到DOM树里去。当dom树和css树都有了才会生成渲染树。
因为我们的资源大部分都托管在CDN上，所以我们一般设置3-4个CDN域名，防止一个CDN域名的情况下，web浏览器外部请求数达到上限，导致没有做到所有资源的并发请求。
如果把css放在head中，可以避免无样式的闪烁，这样的话当dom树和css树都生成完成才会生成渲染树，再进行页面的渲染
html渲染过程的特点
1.顺序执行，并发加载，并发上限（对某个域名下的并发请求树是有上限的）
2.是否阻塞
3.依赖关系
4.引入方式
css阻塞
1)css head中引入会阻塞页面的渲染 2）css阻塞js的执行（在css加载完之前，后续的js不能执行，被阻塞） 3）css不阻塞外部脚本的加载
（如果css不阻塞页面渲染，那么开始会渲染一版初始样式，css加载后又加载一版新的，造成闪动，体验很不好，所以css需要阻塞页面渲染）
（如果css不阻塞js的执行，因为js中可能会有一些获取样式或者修改的内容，浏览器是需要计算的，也就是依赖css）
js阻塞
1）直接引入的js阻塞页面的渲染（没有用ansyc,defer) 2）js不阻塞资源的加载（预先扫描器,预资源加载器） 3）js顺序执行，阻塞后续js逻辑的执行（保持引入时的依赖关系）
（js会阻塞dom解析，如果js文件比较大，加上defer和ansyc之后不阻塞了）
（浏览器会提前看DOM的内容，如果碰到<link><script><img>会提前下载）
（每次碰到scripte标签时，页面都会渲染）
（js的下载和js的的执行都会阻塞页面的渲染，dom树解析到非异步的外联js时会阻塞住，在它加载且执行完之前，不会往下解析dom树）
网友评论