浏览器渲染

CSS和JS在HTML中的位置

一般CSS放在head里用<style></style>包裹，或用link标签引入css文件
JS因为浏览器渲染机制会放在底部</body> 之前，就是在加载渲染完HTML、CSS后在加载JS，不受白屏影响；如果用link标签引入则需要defer／async让其异步使页面不受白屏影响

白屏和FOUC

• 如果把样式放在底部，对于IE浏览器，在某些场景下（新窗口打开，刷新等）页面会出现白屏，而不是内容逐步展现；如果用 @import 标签，即使CSS放入link，并且放在头部，也可能出现白屏
  白屏是因为浏览器的渲染机制，浏览器渲染的时候请求时间过长导致白屏，chrome的渲染流程：html > Dom > css > Cssom > Render Tree > Layout > Painting,可以看出是最后才会layout然后再painting，所以浏览器页面在css加载渲染完了以后才会有内容显示，如果浏览一些国外的网站，网站被墙，浏览器会一直显示loding而没有页面显示，就是因为网页响应时间过长导致白屏；当使用@import（）时，属性可能导致浏览器渲染不及时，又或者我们把标签放在了body的底部位置，都可能导致不及时的现象。所以一般用link标签把css样式文件引入并放置在head里
• FOUC（Flash Of Unstyled Content）无样式内容闪烁：如果把样式放在底部，对于IE浏览器在某些场景下（点击链接，输入URL，使用书签进入等）会出现ROUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式）对于Firefox会一直表现出FOUC
  FireFox的渲染逻辑和Chrome的不太一样，一开始Chrome是等待渲染树和位置计算好才会出来网页的内容，但到了FireFox每加载一次dom树就会重绘一次网页样式，一直到所有内容完成为止，所以一般我们用link把css放在header内

async和defer

js对页面加载和渲染有两个影响：阻塞后面内容的呈现和阻塞其后组件的下载，是因为浏览器的渲染机制：对于图片和css，在加载时会并发加载（如一个域名下同时加载两个文件）但在加载JavaScript时会禁用并发，并阻止其它内容的下载。所以把JavaScript放入页面顶部也会导致白屏现象
当用link标签在head里引入.js文件则需要用async和defer来异步
async：加载渲染后续文档元素的过程和.js文件的加载和执行并行进行（异步），不保证顺序
defer：加载渲染后续文档元素的过程和.js文件的加载和执行并行进行（异步），但.js文件执行需要在所有元素解析完之后，DOMContentLoaded事件触发之前完成。

网页渲染机制

• 解析HTML标签，构建DOM树
• 解析CSS标签，构建CSSOM树
• 把DOM和CSSOM合成Render树
• 内测测算数据并将页面Layout
• 绘制页面Painting

具体流程：
浏览器通过url获得html文件后会从上到下加载并进行解析和渲染。当遇到外部css文件或图片则发送请求此过程同时进行（异步）。因为js文件有可能要修改DOM所以HTML的加载渲染会在js文件解析完成后，因此当遇到js文件时HTML会挂起渲染的线程等js记载完成后继续html的加载渲染（白屏原因）。HTML的渲染过程是将代码按照深度优先遍历生成DOM tree，CSS加载渲染完后生成CSSOM tree，DOM和CSSOM合成Render tree，然后浏览器开始Layout最后Painting