呱呱呱_____
呱呱呱_____

前端性能优化（基本）

HTML

  1. 避免使用 内联式、嵌入式 代码

    在html页面中引入css、js代码有三种方式：“内联式”、“嵌入式”、“引入外部文件”。

    尽管前两种方法可以减少HTTP的请求，可是实际上增加了HTML文件的体积大小。如果css、js代码足够下，确实可以尝试使用这两种方法，毕竟，开启一个HTTP请求确实要花费不少时间。

    说到这里，那么就要视实际情况来决定，我们需要考虑受众和目标，如果是一次性的访问，比如一次临时活动页面，我们完全可以使用这两种方式，来减少HTTP的请求。

    第三种“引用外部文件”，可以使代码有序，而且浏览器还能做相应的缓存，特别是有一些体积大的css、js文件或多页面情况下，该方法更合适。目前一般网站都是采用的该方法。

  2. 样式在上，脚本在下

    将css放在head里面，浏览器在渲染页面时就能早知道每个标签的样式，用户就可以感觉这个页面加载更快。

    对于js来说，它的加载会阻塞页面的渲染，所以将它放在页面的结尾。
    页面的结尾表示上方，如果在外其实也并不影响页面渲染，但是书写不怎么标准。

  3. 尝试async

    使用上面这种方式时，页面会在这个脚本文件被完全下载、解析、执行完后才去渲染之后的HTML，在这之前会一直处于阻塞状态。这就意味着会增加你的页面的加载时间。有时这种行为是我们希望的，而大多数时候则不想要。

    使用上面这种方式时，脚本的加载是异步的，不会影响到这之后的页面解析。脚本会在下载完之后立即执行。需要注意的是，如果有多个使用这种方式异步加载的脚本，他们是没有特定的执行顺序的。

CSS

  1. 压缩你的样式文件

为了保持代码的可读性，最好的方法是在代码中添加注释和使用缩进：

.center {
  width: 960px;
  margin: 0 auto;
}

/* --- Structure --- */

.intro {
  margin: 100px;
  position: relative;
}

但是浏览器并不会在意这些，所以我们可以将它压缩，减少体积。

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

这样做能够减小文件的大小，从而得到更快的下载、解析和执行。
对于使用预处理器例如 Sass, Less, and Stylus, 你可以通过配置缩小编译输出的CSS代码。

  1. 合并css文件

对于样式的组织和维护，另一个好方法是将他们模块化。

然而，这样每个文件就是一个HTTP请求（我们都知道，浏览器的并行下载数是有限的）。

所以，合并你的CSS文件。文件数量的减少就会带来请求数量的减少和更快的页面加载速度。

  1. 使用 避免使用@import

两种方式可以引入一个外部的样式表：通过 标签：

或者通过 @import 指令 (使用在一个外部样式表中或者页面内嵌的