- css一般放在head标签中,js一般放在body的结束标签前
JS是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。CSS放在前端是页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树，如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。js非阻塞加载解决方案也有，1是用defer标签，2是用createElement来动态生成，但是这样有一个问题就是加载顺序在IE下不一定会是按代码写的顺序来加载，可能会影响到依赖项，有些文件就是必须在另一个文件前引用。火狐跟opera是按顺序加载的，3是用ajax加载，也是非阻塞似的但是这种方法不支持CDN。 - 白屏问题：在IE低版本中的一些情况下（新窗口打开，重新加载，作为主页打开）会出现，原因是低版本的IE是要等待css加载成功后才会对HTML进行渲染和展示。所以如果把css样式放在底部，就会出现白屏问题。（如果使用@import加载样式，即使css样式在头部，也可能会出现白屏问题）。解决方法是把css样式放在head标签中，并且避免使用@import。
FOUC：除了IE浏览器，大部分浏览器都是先对HTML进行渲染和展示，在等待css加载完成后重新对样式进行修改。所以会出现FOUC。故如果把css样式放在底部，则会一直出现FOUC。解决方法是把css样式放在head标签中（即头部）。
综上所述，一般而言，css放在head标签中是最好的，无论什么浏览器，都可以解决FOUC或白屏的问题。
- async:加载和渲染后续文档元素的过程和js的加载与执行并行进行（异步加载）；
- defer:加载后续文档元素的过程和js的加载并行进行但js的执行要等所有元素解析完成之后，DOMContentloaded事件触发之前完成。
- 解析HTML标签，构建DOM树。
- 解析css标签，构建CSSOM树。
- 把DOM和CSSOM组合成渲染树（render tree）
- 在渲染树的基础上进行布局，计算每个节点的几何结构。
- 把每个节点绘制到屏幕上。
网友评论