100条终极前端优化大全

Expires、Pragma）。当前的所有浏览器都支持Cache-Control，因此，使用它就够了

（3）启用Gzip

前端工程师可以想办法明显地缩短通过网络传输HTTP请求和响应的时间。毫无疑问，终端用户的带宽速度，网络服务商，对等交换点的距离等等，都是开发团队所无法控制的。但还有别的能够影响响应时间的因素，压缩可以通过减少HTTP响应的大小来缩短响应时间。

Gzip压缩通常可以减少70%的响应大小，对某些文件更可能高达90%，比Deflate更高效。主流 Web 服务器都有相应模块，而且绝大多数浏览器支持gzip解码。所以，应该对HTML、CSS、JS、XML、JSON等文本类型的内容启用压缩。

注意!!! 图片和 PDF 文件不要使用 gzip。它们本身已经压缩过，再使用 gzip 压缩不仅浪费 CPU

资源，而且还可能增加文件体积。

从HTTP/1.1开始，web客户端就有了支持压缩的Accept-Encoding HTTP请求头。

Accept-Encoding: gzip, deflate

如果web服务器看到这个请求头，它就会用客户端列出的一种方式来压缩响应。web服务器通过Content-Encoding响应头来通知客户端。

Content-Encoding: gzip

（4）配置 Etag

实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制（“实体”也就是组件：图片，脚本，样式表等等）。添加ETags可以提供一种实体验证机制，比最后修改日期更加灵活。一个ETag是一个字符串，作为一个组件某一具体版本的唯一标识符。唯一的格式约束是字符串必须用引号括起来，源服务器用相应头中的ETag来指定组件的ETag

HTTP/1.1 200 OK

Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT

ETag: “10c24bc-4ab-457e1c1f”

Content-Length: 12195

复制代码然后，如果浏览器必须验证一个组件，它用If-None-Match请求头来把ETag传回源服务器。如果ETags匹配成功，会返回一个304状态码，这样就减少了12195个字节的响应体。Etag

通过文件版本标识，方便服务器判断请求的内容是否有更新，如果没有就响应 304，避免重新下载。

GET /i/yahoo.gif HTTP/1.1

Host: us.yimg.com

If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT

If-None-Match: “10c24bc-4ab-457e1c1f”

HTTP/1.1 304 Not Modified

（5）尽早输出（flush）缓冲

用户请求页面时，服务器通常需要花费200 ~ 500毫秒来组合 HTML

页面。在此期间，浏览器处于空闲、等待数据状态。使用PHP中的flush()函数，可以发送部分已经准备好的

HTML到浏览器，以便服务器还在忙于处理剩余页面时，浏览器可以提前开始获取资源。 可以考虑在之后输出一次缓冲，HTML

head一般比较容易生成，先发送以便浏览器开始获取里引用的CSS等资源。 Example:

<?php flush(); ?>

（6）Ajax请求使用GET方法

浏览器执行XMLHttpRequest POST请求时分成两步，先发送Http

Header，再发送data。而GET只使用一个TCP数据包（Http Header与data）发送数据，所以首选GET方法。

根据HTTP规范，GET用于获取数据，POST则用于向服务器发送数据，所以Ajax请求数据时使用GET更符合规范。

（7）避免图片src为空

图片src属性值为空字符串可能以下面两种形式出现： HTML: 复制代码JavaScript： var img = new Image(); img.src = “”;

复制代码虽然src属性为空字符串，但浏览器仍然会向服务器发起一个HTTP请求：

IE 向页面所在的目录发送请求； Safari、Chrome、Firefox向页面本身发送请求； Opera不执行任何操作。

空src产生请求的后果不容小觑：

给服务器造成意外的流量负担，尤其时日 PV 较大时； 浪费服务器计算资源； 可能产生报错。

空的href属性也存在类似问题。用户点击空链接时，浏览器也会向服务器发送HTTP请求，可以通过JavaScript阻止空链接的默认的行为。

三、Cookie

---

（1）减少 Cookie 大小

Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送，减少Cookie大小可以降低其对响应速度的影响。

去除不必要的 Cookie； 尽量压缩 Cookie 大小； 注意设置 Cookie 的 domain 级别，如无必要，不要影响到

sub-domain； 设置合适的过期时间。

（2）静态资源使用无Cookie域名

静态资源一般无需使用Cookie，可以把它们放在使用二级域名或者专门域名的无Cookie服务器上，降低Cookie传送的造成的流量浪费，提高响应速度。

四、CSS

---

（1）把样式表放在中

把样式表放在中可以让页面渐进渲染，尽早呈现视觉反馈，给用户加载速度很快的感觉。

这对内容比较多的页面尤为重要，用户可以先查看已经下载渲染的内容，而不是盯着白屏等待。 如果把样式表放在页面底部，一些浏览器为减少重绘，会在

CSS 加载完成以后才渲染页面，用户只能对着白屏干瞪眼，用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。

（2）不要使用CSS表达式

CSS表达式可以在CSS里执行JavaScript，仅IE5-IE7支持，IE8标准模式已经废弃。

CSS表达式超出预期的频繁执行，页面滚动、鼠标移动时都会不断执行，带来很大的性能损耗。

（3）使用替代@import

对于IE某些版本，@import的行为和放在页面底部一样。所以，不要用它。

五、Javasript

---

（1）把脚本放在页面底部

浏览器下载脚本时，会阻塞其他资源并行下载，即使是来自不同域名的资源。因此，最好将脚本放在底部，以提高页面加载速度。

一些特殊场景无法将脚本放到页面底部的，可以考虑

（2）使用外部JavaScript和CSS

外部JavaScript和CSS文件可以被浏览器缓存，在不同页面间重用，也能降低页面大小。

当然，实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码，可以考虑内嵌在页面中，减少HTTP请求数。另外，可以在首页加载完成以后，预先加载子页面的资源

（3）压缩、混淆JavaScript和CSS

混淆：将js代码进行字符串加密，最大程度减少代码，比如长变量名变成单个字母

压缩：去除注释行已经console.log等调试代码

压缩代码可以移除非功能性的字符（注释、空格、空行等），减少文件大小，提高载入速度。

得益于Node.js的流行，开源社区涌现出许多高效、易用的前端优化工具，JavaScript

和CSS压缩类的，不敢说多如牛毛，多入鸡毛倒是一点不夸张，如[UglifyJS 2]

(github.com/mishoo/Ugli…)、csso、cssnano 等。

对于内嵌的CSS和JavaScript，也可以通过htmlmin等工具压缩。

这些项目都有Gulp、Webpack等流行构建工具的配套版本。

（4）移除重复脚本

重复的脚本不仅产生不必要的HTTP请求，而且重复解析执行浪费时间和计算资源。

（5）减少DOM操作

JavaScript 操作 DOM 很慢，尤其是 DOM 节点很多时。 使用时应该注意：

缓存已经访问过的元素； 使用DocumentFragment暂存DOM，整理好以后再插入DOM树；

操作className，而不是多次读写style； 避免使用JavaScript修复布局

（6）使用高效的事件处理

减少绑定事件监听的节点，如通过事件委托； 尽早处理事件，在DOMContentLoaded即可进行，不用等到load以后。

（7）资源合并

将多个js、css文件合并

例如利用nginx

六、图片

---

（1）优化图片

尝试把GIF格式转换成PNG格式，看看是否节省空间。在所有的PNG图片上运行pngcrush（或者其它PNG优化工具）。

（2）优化CSS Sprite

水平排列Sprite中的图片，垂直排列会增加图片大小；

Spirite中把颜色较近的组合在一起可以降低颜色数，理想状况是低于256色以适用PNG8格式；

不要在Spirite的图像中间留有较大空隙。减少空隙虽然不太影响文件大小，但可以降低用户代理把图片解压为像素图的内存消耗，对移动设备更友好。

（3）不要在HTML中缩放图片

不要使用的width、height缩放图片，如果用到小图片，就使用相应大小的图片。如果需要

那么图片本身（mycat.jpg）应该是100x100px的，而不是去缩小500x500px的图片。

很多 CMS 和 CDN 都提供图片裁切功能。

补充：设置图片的宽和高，以免浏览器按照「猜」的宽高给图片保留的区域和实际宽高差异，产生重绘。

（4）使用体积小、可缓存的favicon.ico

Favicon.ico一般存放在网站根目录下，无论是否在页面中设置，浏览器都会尝试请求这个文件。

所以确保这个图标：

存在（避免 404）； 尽量小，最好小于 1K； 设置较长的过期时间。 对于较新的浏览器，可以使用PNG格式的favicon。

（5）图片的懒加载

原理：就是监听滚动事件，如果，滚动条距离浏览器顶部的距离 === 图片距离浏览器顶部的距离， 那么将img上面的data-src的值赋值到 src上

（6）纯色的小图标

可以使用字体图标来显示

（7）使用tinyfy第三方 进行无损压缩

原理：通过减少颜色的数量以及不必要的数据

（8）将小图片转换成base64的形式

可以使用webpack中的url-loader进行图片配置，将小图片转换成base64格式，

因为base64格式的图片的作用是减少资源的数量，但是base64格式的图片会增大原有图片的体积，所以只适用于小图片

（9）使用webp图片格式

七、移动端

---

（1）保证所有组件都小于25K

这个限制是因为iPhone不能缓存大于25K的组件，注意这里指的是未压缩的大小。这就是为什么缩减内容本身也很重要，因为单纯的gzip可能不够。

（2）打包内容为分段（multipart）文档

把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（iPhone就不支持）。

八 webpack

---

可以在webpack中设置mode为production(生产环境)或者开发环境进行设置

当为开发环境，是不压缩，不混淆，不优化

可以通过webpack中的optimization.splitChunks进行分包策略优化，将node_nodules单独打包，以及将自己实现的代码分为公共包和非公共包，并分开打包，

最后还可以使用网络缓存来做加载性能优化，公共包、第三方变动会比较小，

九 http

---

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题