CSS JS放置位置与前端性能的关系

Hardi Xu
Hardi Xu
Sep 5, 2018 · 2 min read

浏览器渲染顺序:浏览器先下载html,然后在内存中把html代码转化成DOM Tree,然后浏览器根据DOM Tree上的Node分析CSS和images,当文档下载遇到JS时,JS独立下载。

JS是阻塞加载的,会影响页面加载的速度。
CSS页面渲染时首先是根据DOM结构生成一个DOM树然后加上CSS样式生成一个渲染树,如果CSS放在后面可能页面会出现闪跳、白屏或者布局混乱样式很丑直到CSS加载完成。

js非阻塞加载方案:

1 使用defer标签

2使用createElement来动态生成,但是这样有一个问题就是加载顺序在IE下不一定会是按代码写的顺序来加载,可能会影响到依赖项,有些文件就是必须在另一个文件前引用

3是用ajax加载,但是这种方法不支持CDN

一般来说css放头部js放底部来确保用户至少能早一点看到界面,让网站看起来至少反应快一点,不过如果css稍微有点多了,会让屏幕白屏时间更长,所以,并不是说把css都放顶部是一个完美的方法,而且有些js必须在页面加载前执行掉。

所以应该是这样,把必须的js和css放顶部,把不那么重要的css和js放底部。

如果在head里有javascript文件,那么必须是先要把这些文件都下载,解析,然后执行之后,程序才会继续往下走。这样势必会影响速度。

所以有一种方法是加defer这个属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。但采用这种方法,会有一种缺陷。在有些浏览器中。并不会按照你自己文件的顺序执行下来。并且有的浏览器还会忽略这种属性。

但在现实中,更多的时候我们是采用事件驱动这种形式。所以这样的问题不会太大。主要还是速度。放在后面,速度可能更快。

注:Prefetch 缓存优化,在不存在任何阻塞的情况下,理论上 JS 和 CSS 的下载时机都非常优先,和位置无关。

    Hardi Xu

    Written by

    Hardi Xu

    总要有一首我的歌 大声唱过 再看天地辽阔