在网页中css、js的放置顺序
将css放在head中，将js放在body的尾部中
简述浏览器的渲染机制
- 解析HTML标签，构建DOM树；
- 解析CSS标签，构建cssom树；
- 合并DOM树与cssom树，组成渲染树；
- 在渲染树的基础上进行布局，计算每个节点的几何结构；
- 将各个节点绘制到屏幕上；
由于浏览器的渲染机制存在不同，在渲染页面的时会出现两种常见现象，白屏问题和FOUS
白屏问题
白屏问题并不是浏览器存在的bug，而是由于浏览器渲染机制的作用，如果将样式表放置在HTML文档的底部，对于一些浏览器在第一次进入复杂页面或者刷新页面时，会出现白屏的现象，等待组合渲染树组合后再进行布局、绘制到屏幕。还有一种情况，使用@important引入CSS样式，这样也会容易出现白屏现象。所以最好的方式就是在<head>标签中使用link导入css样式表，一定程度上有效避免白屏现象。
FOUC（Flash of Unstyled Content）无样式闪烁
由于Firefox浏览器使用的内核是Gecko，与Chrome的webkit的内核不一样，所以在渲染机制的差异让它存在无样式闪烁的现象。同样的，如果将样式放在文档底部，会出现无样式闪烁，即：逐步加载无样式内容，等待css加载完毕后，页面突然展现出样式，对于Firefox，它会一直表现出无样式闪烁。所以也应将CSS样式通过link的方式导入<head>标签中。
至于js的放置问题，由于在加载HTML文档时，对于图片和CSS会采用并发加载，在加载js时会禁用并发，阻止其它内容的下载，也就是说，js的加载会阻塞后面内容的呈现，会阻塞其后组件的下载，所以将js放置在文档头部会导致白屏现象的出现，所以应将其放置在文档底部
延迟脚本与异步脚本
- 延迟脚本，在script中通过defer属性定义，用途是脚本会延迟到整个页面解析完毕后再运行，该属性只会对外部脚本文件生效，IE7及更早版本对嵌入脚本也支持此属性。所以会立即下载，延迟执行。考虑到新老版本浏览器对嵌入脚本文件设置defer属性的处理方式不一致，把延迟脚本放在页面底部仍然是最佳选择。
- 异步脚本，在script中通过async属性定义，用途是表示立即下载脚本，但不应该阻碍页面其它操作，并且只对外部脚本文件生效，但与defer不同的是，标记async脚本不能保证按顺序执行。
建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行，但可能在DOMContentLoaded事件触发之前或之后执行。
网友评论