• 解析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 放在文件最后加载