总结一些前端优化的小技巧

优化基本思路

1. 减少HTTP请求数量
2. 减小请求资源的大小

小技巧

1. 将图片压缩后再放到生产环境，这样图片可以变得相对较小，常用压缩工具有： https://tinypng.com/ 和 https://pngcrush.com/

2. 精灵图(雪碧图)的优化

   • 把图片横向合并而不是纵向，横向更小。
   • 把颜色近似的图片合并到一张雪碧图，这样可以让颜色数更少，如果低于 256 就可以用 png8。
   • 合并时图片间的间距不要太大。这对图片大小影响不是太大，但客户端解压时需要的内存更少。100×100是10000个像素，1000×1000是1000000个像素。

3. 不要在HTML中缩放图片

   不要因为你可以设置图片的宽高就去用比你需要的大得多的图片。如果你需要100x100px的图片，那就不要用500x500px的。

   <!--设置宽高只是为了防止特殊情况下的页面变形-->
   <img width="100" height="100" src="mycat.jpg" alt="My Cat" />
   

4. 小图片可以直接使用 base64 引入

   这样做的好处是能减少 HTTP 请求。大图片并不推荐使用 base64 直接引入，因为图片转换成 base64 后往往存储会变大，比如你本来的图片是 3m 那么你转成 base64 后的编码可能会有 3.9m 的样子。

5. 使用CDN

6. favicon.ico的处理

   favicon.ico 是在你服务器根路径的图片。糟糕的是即使你不关心它，浏览器仍然会请求它。所以最好不要响应404。另外由于在同一服务器，每次请求 favicon.ico 时也会带上 cookie。这个图片还会影响下载顺序，比如在IE，如果你在 onload 时下载额外的组件，favicon.ico 会在这些组件之前被下载。因此，favicon.ico 的体积越小越好，最好1K以下。而且由于 favicon.ico 一般是不进行更换的，所以我们可以给它设置Expires头部，而且可以安全地设置为几个月，避免每一次打开页面都需要去进行请求

7. 尽量减少cookie的大小，正确设置cookie的生效时间，无用的cookie让其尽早失效

8. 单独为静态资源设置一个域

   当浏览器请求静态资源时，也会把 cookie 一起发送到服务器，cookie 此时对服务器没什么用处。所以这些 cookie 只是增加了网络流量。所以你应该让静态资源的请求是没有 cookie 的。可以创建一个子域名来托管所有静态组件。

   比如，你域名是 www.example.org，可以把静态资源托管在static.example.org， 由于不在一个域，你为www.example.org设置的cookie 并不会在针对 static.example.org 的请求时被携带。不过，你如果把cookie设置在顶级域名 example.org 下，这些cookie仍然会被传给static.example.org。这种情况下，启用一个全新的域名来托管静态静态。

9. 客户端和服务端传输的时候，尽量使用压缩，比如：gzip

10. 如果是必要的情况下，Ajax尽量使用GET方式

11. 避免图片有空的 src 属性

    在有些浏览器下，图片空的 src 属性也是会向服务端发送请求的，这些无意义的请求是会增加服务器的压力的。

12. 把脚本尽量放到页面的底部

13. 使用外部的JS 和 css

    我们知道将JS和css写到HTML页面内，可以减少了 HTTP 请求，降低服务端压力，但会增加了HTML文档大小。如果我们使用外部的JS和CSS，同时 JS 和 CSS 被缓存了，那么 HTML 文档可以减小大小，同时可以不增加 HTTP 请求。当然了，在主页中，还是建议将JS和css写到HTML页面内。

14. 压缩 JS 和 CSS

    压缩就是删除代码中不必要的字符来减小文件大小，从而提高加载速度。当代码压缩时，注释删除，不需要的空格（空白，换行，tab）也被删除。

15. 删除重复的JS

    重复引入相同的脚本会增加HTTP请求数量，同时增加脚本的执行时间。

16. 尽量少的DOM

    页面中用尽量少的标签去完成，比如一个页面中有500个DOM节点和一个页面中有5000个DOM节点，执行渲染和事件处理的时候，差别还是很大的。

17. 尽量少的访问DOM

    用 JS 访问 DOM 元素是缓慢的，所以为了响应更好的页面，你应该：

    • 缓存访问过的元素的引用
    • 在 DOM 树外更新节点，然后添加到 DOM 树
    • 能用CSS搞定的事情，就尽量使用CSS，避免使用 JS 去做布局

18. 尽量少的绑定事件，如果可以的话，尽量使用事件委托绑定

19. 使用延迟加载(懒加载)

    页面加载的时候，不是必须加载的资源可以放到使用该资源的时候再去加载，这样页面可以更快的加载页面必须的部分。一般是针对图片来说的，当图片进入可视区域内，才去请求加载该图片。

20. 使用预加载

    预加载和延迟加载看似相反，其实它们有两个不同的目的，延迟加载是为了更快的完成页面的加载，而预加载是指提前将页面需要的组件下载下来并缓存，减少页面的响应时间。

懒加载

jQuery.lazyload.js

echo.js

预加载

preload.js