- 解析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 放在文件最后加载
网友评论