css放在头部，js放在尾部优化页面原因

迈不过友情╰ 2021-07-04 11:00 427阅读 0赞

#### `href`和`src`的区别 ####

一般加载CSS用`href`,并放在头部；加载`script`用`src`，放在`body`内的下方。

**href**  
是`hypertext reference`的缩写，表示超文本引用，用来建立当前元素和文档间的链接。常用的有`link，a`。  
当`CSS`使用`href`引用，浏览器会识别该文档问`CSS`，并行下载，不会停止对当前文档的加载。

**src**  
是`source`的缩写，是资源，页面必不可少的一部分，`src`指向的内容会嵌入到文档中当前标签的位置。常用的有`img, script, iframe`。  
当`script`使用`src`引用，浏览器解析到该元素时会停止对文档的渲染，直到该资源加载完成。这也是将`script`放底部而不是头部的原因。

#### 把CSS放头部，`script`放下方的原因 ####

**CSS放头部**  
在加载`html`生成`DOM tree`的时候，就可以同时对`DOM tree`进行渲染。  
这样可以防止闪跳，白屏或者布局混乱。

**javascript放在后面**  
`javascript`可能会改变`DOM tree`的结构，所以需要一个稳定的`DOM tree`。  
`javascript`加载后会立即执行，同时会阻塞后面的资源加载。（`javascript`加载和执行的特点）

#### 1.首先让我们先认识几个常见的问题： ####

1.  在进行页面优化的时候，需要将`css`放在头部，将`js`文件放在尾部，这样做为什么能够实现页面的优化?
2.  在使用`jquery`的时候，为什么把函数写在`$(document).ready()`事件中？
3.  `javascript`会阻塞`dom`的解析。  
    当解析过程中遇到`<script>`标签的时候，便会停止解析过程，转而去处理脚本，  
    如果脚本是内联的，浏览器会先去执行这段内联的脚本，  
    如果是外链的，那么先会去加载脚本，然后执行。  
    在处理完脚本之后，浏览器便继续解析HTML文档。

#### 2.`DOMContentLoaded`函数和`load`函数解析 ####

1.  `DOMContentLoaded`事件其实就是`dom`内容加载完毕。  
    举个例子来说我们在打开一个网页的时候，  
    一开始页面是空白的，什么都看不到，一段事件之后页面展示出内容，但是还是有一些图片资源看不到，此时页面是可以进行正常的交互的，  
    再过一段时间之后，页面上所有的资源都加载完成，继而整个页面加载完成。  
    从页面空白到展示出页面内容的过程就会触发`DOMContentLoaded`事件，而这段事件就是HTML文档被加载和解析完成。
2.  页面上所有的资源（图片，音频，视频等）被加载以后才会触发`load`事件，页面的`load`事件会在`DOMContentLoaded`被触发之后才触发。

#### 3.关于`jquery`中的`ready`函数 ####

`jquery`中的`ready`函数其实监听的`DOMContentLoaded`事件，  
所以我们将函数写在`ready`函数中，可以在页面解析完成之后，  
我们可以访问到页面所有的元素，缩短页面的交互时间，提高页面的整体体验

#### 4.为什么将`css`放在头部，js放在尾部可以增加页面的性能\*\* ####

现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，  
它不会等到所有的HTML元素解析之后在构建和布局`dom`树，所以部分内容将被解析并显示。  
也就是说浏览器能够渲染不完整的`dom`树和`cssom`，尽快的减少白屏的时间。  
假如我们将`js`放在`header`，js将阻塞解析`dom`，`dom`的内容会影响到`dom`树的绘制，导致`dom`绘制延后。  
所以说我们会将`js`放在后面，以减少`dom`绘制的时间，但是不会减少`DOMContentLoaded`被触发的时间。