前端性能优化14条规则让你的网站快到飞起

最近要实现前端性能探测，可是对于一个刚入职场的我来说前端性能是个啥，我还是个只追求页面展示效果的娃儿~。

规则一 减少http请求数

原因：为什么要减少http请求数量呢？ http建立连接是需要时间成本的，http协议规定浏览器对于统一域名的资源请求数有限制。因此需要采取一些手段降低请求数量。

方案：

1. 使用图片精灵合并小图片为一张大图片
2. 合并js资源和css资源
3. 内联小图片(data:url)

规则二 使用内容发布网络

原因： 用户距离我们的服务器可能十万八千里，为了提高资源的响应速度可以将其放在距离用户较近的代理服务器上，缺点吗，可能会花点钱去购买cdn服务。

规则三 添加Expires头----使用缓存

将静态资源缓存在用户本地，当用户二次访问时直接从本地获取资源，大大的降低了网络请求的成本。
方案：

1. 使用Expires头，可能会存在用户的代理和服务器的时间标准不同造成缓存失效的时机不准确。
2. 使用Cache-control: max-age=xxxxxxx

二者本质相同，cache-control的优先级大于前者，可以使用修改文件名的方式简单粗暴的解决缓存可能存在的问题。

规则四 压缩组件

使用压缩减少资源的大小，进而减少网络响应的时间。目前gzip压缩使用的较为广泛。压缩脚本和样式表文件比较值得，不要压缩图片和pdf文件，它们本身已被压缩。

规则五 将样式表放在顶部

该方案可以使的网页逐步呈现，用户体验会很好，感觉网站响应的比较快。不会出现闪烁。

规则六 将脚本放在底部

原因： 脚本的下载和解析会阻塞其他资源的并行下载。目前浏览器为script标签提供了两个新的属性defer async二者都实现资源的异步下载不会阻塞其他资源的下载。区别在于defer会等页面渲染完成后在执行，async无法保证它执行的时间，下载完就执行。对比起来defer更具有实际使用价值。

规则七 避免使用css表达式

原因： 表达式在你不知道得情况下执行n多次，严重影响前端性能。

规则八 使用外部的js和css文件

对于首次访问而言，内联形式的渲染速度会高于外链的形式。但是外部文件的形式可以缓存啊。用户再次访问该页面时就不用再次请求资源。

规则九 减少DNS查询

方案: 利用http的keep-alive的连接复用，控制域名的数量。控制域名数量同时存在资源并行下载数限制的问题，因此呢，需要实际情况做好权衡。

规则十 精简JS代码

删除注释、空格、将长变量名置换为短的变量名。也就是压缩和混淆了。css代码也需要去除空格和注释。

规则十一 避免重定向

浏览器做重定向这个操作是需要时间的。因此呢，要尽量避免重定向。前端同学需要注意的就是不要忽略结尾的斜线

借此机会就简单聊聊常用的3xx状态码

• 301 永久重定向。301重定向会导致用户的书签更新。
• 302 临时重定向。
• 303 See Other 不论重定向之前的请求方式是什么，本次请求都以get的形式请求
• 304 Not Modified 发生的场景：浏览器使用缓存，但是缓存过期了此时浏览器请求服务器资源，服务器的资源并没有更新过，浏览器继续使用本地资源。响应的响应体是没有内容的。该请求成为条件请求。
• 307 重定向前请求是什么方式，本次请求还以该方式请求资源
  303 和 307是302的一个规范化变种。302原则上讲是不允许我们将原来的post请求换为get请求方式的，但是大家都这么做。因此才会出现后来的303和307.

规则十二 删除重复的脚本（废弃吧）

随着项目规模的扩大及参与人员的增多，可能会出现重复引入资源的情况。这也是会降低前端性能的。但是在这个前端工程化的年代，打包工具会帮我们处理好该问题。

规则十三 配置ETag

Etag是web服务器和浏览器用于确认缓存组件是否有效的一种机制。服务器配置一下即可。

规则十四 使用AJAX缓存

可以通过http的响应和请求头控制ajax是否需要缓存。缓存这个东西呢用好了就是天使，用不好就是魔鬼。哈哈。
from xixi小站