过程:
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树)