- 解析html标签,生成DOM树
- 解析css标签,构建CSSOM树
- 把DOM和CSSOM树合成渲染树
- 根据渲染树进行布局,计算节点 的几个结构
- 把节点绘制到屏幕上
白屏和无样式闪烁
- 白屏是指js放在前面阻碍后面的解析出现的情况,还有例Chrome浏览器会等待所有样式加载完成后在进行渲染
- 无样式闪烁是指加载css样式时,加载成功就会进行渲染
css和js的异步同步机制
js 和 css 可以放在文件任意位置,但是考虑到加载机制,推荐css放在前面,js放在后面
以chome为例,遇到css 会进行加载请求但继续解析下面的html,遇到js则会等待js加载完成进行加载后面的组件和内容的呈现,那么css文件加载成功后时立马加载还是 等待全部的HTML解析完成后再加载?
为什么js会有这种特性?因为可能 前后 js之间 有依赖关系
-
那如何让js不阻碍后面的内容加载呢?
- 使用 async defer,区别是?
- async谁先加载完成就先渲染,defer则会按照js 顺序进行加载,且在页面全都解析结束后,这两个均只对外部js有效
由此一般将在css放在文件前面加载,js 放在文件最后加载