前端近几年变化很大，种种东西，库，框架并发。虽然云云，然则网站前端机能优化的思绪基础没变。
为何前端机能云云主要？数据显现:
只要 10%~20% 的最终用户响应时刻花在了下载 HTML 文档上。其他的 80%~90% 时刻花在了下载页面中的一切组件中;
别的一点是，优化背景须要消费比较大的本钱，优化前端只须要适当地遵照一些轨则会有较大的提拔，相对低本钱高收益。
近来读了 Steve Souders 的《高机能网站建立指南》，以为很不错在此做一下总结。Steve 是 Firebug 和 Yslow 的作者，置信人人都运用过。虽然书中的许多手腕都已经逾期了，然则思绪基础没变，取其精华就好。
本书提出了一套机能黄金轨则，优先级越高排名越前，一共14则：
1. 削减HTTP要求
2. 运用内容宣布收集（CDN）
3. 增添Expires头
4. 紧缩组件
5. 将款式表放在顶部
6. 将剧本放在底部
7. 防备运用CSS表达式
8. 运用外部JavaScript和CSS
9. 削减DNS查找
10. 精简JavaScript
11. 防备重定向
12. 删除反复的剧本
13. 设置ETag
14. 使Ajax可缓存以下离别简朴引见每条轨则的启事：
1. 削减HTTP要求
平常来讲，运用外链的剧本和款式表越发有益。离别把外链剧本和款式表举行兼并会削减HTTP要求，以节约客户端和效劳器之间的通信次数来加速页面翻开速率。然则出于开辟的方便，开辟的时刻平常会采纳模块化的体式格局；这时刻可以在布置前采纳一些前端构建东西把这些模块文件兼并起来再宣布。
2. 运用内容宣布收集（CDN）
CDN是一组散布在多个差别地理位置的Web效劳器，由于间隔用户 物理间隔比较短，所以可以越发有益于用户获取到静态资本；这类效劳一般须要购置，也有一些免费、通用的CDN可运用，国内的可以运用 BootCDN。
3. 增添Expires头
Expires头是用来通知浏览器该响应的有效期，可以理解为该资本的“保质期”，在期限内可以运用该资本的缓存不须要从新要求。由于浏览器与效劳器存在时钟同步题目，HTTP1.1还增添胡了Cache-Control和max-age来填补Expires头的不足。一般用于剧本，款式表、图片等静态资本。
运用这类战略能够会碰到一个题目是，开辟者能够想要在资本逾期前这段时刻更新它们。这时刻，由于浏览器的缓存还没失效，这就须要经由历程变动文件名来令静态资本 强迫失效。有许多种体式格局给静态资本打上版本号，可以道貌岸然地打上数字版本号，依据内容天生哈希码也行，以至有人用π来给本身的资本打版本号（每次。
4. 紧缩组件
本书引见的是gzip的体式格局紧缩静态资本，现实上，这类体式格局会斲丧分外的CPU资本。这类手腕一般可以使文件大小削减70%。
5. 将款式表放在顶部
假如把款式表放在底部时，浏览器会耽误显现任何可视化组件。别的，运用 CSS 的@import 等同于把想要加载的款式放在底部，所以不发起运用。关于浏览器的衬着机制，本书并没有过量说起，只是对征象做出了形貌以及供应了解决办法。
假如款式表仍然在加载，构建显现树就是一种糟蹋，由于在一切款式表加载并剖析终了之前无需绘制任何东西。不然，在其准备好之前显现内容会碰到 FOUC（无款式内容的闪灼，Flash of Unstyled Content）题目。
就是说，假如不把款式表放在 <head> 中，当碰到款式时，浏览器就会阻挠页面显现，守候款式表下载终了。
假如把款式表放在底部，在 IE 中还会发生白屏征象。总之，把款式表放进 <head> 就可以防备这些题目。
6. 将剧本放在底部
剧本对页面的影响是：
壅塞对齐背面内容的显现
壅塞背面组件的下载
浏览器会在下载剧本的时刻壅塞并行下载，由于须要确保剧本可以递次实行。
关于这点，这里有一篇解说的比较深切的文章：
JS 一定要放在 Body 的最底部么？聊聊浏览器的衬着机制
然则，现实开辟中有时刻很难完整恪守这条原则，那只能把可以放在末了的都放在末了。
7. 防备运用CSS表达式
运用CSS 的expression()一般会形成屡次运算。现实上，须要用到CSS 表达式的处所，一般可以找到其他替代计划，所以防备运用CSS表达式。
8. 运用外部JavaScript和CSS
运用外部静态文件的长处有：
可以被浏览器缓存起来
组件可以重用
可模块化
可以被构建（兼并紧缩打版本）
…
瑕玷：
须要分外建立HTTP 要求
…
9. 削减DNS查找
简朴来讲，DNS 查找就是输入域名对效劳器IP 地点的查找历程。DNS 缓存又分为浏览器DNS 缓存、操作系统DNS 缓存。当你输入 www.google.com 的时刻，浏览器会先去本身的 DNS 缓存内里查找有无 google 效劳器的 IP 地点；假如找不到则继承到操作系统的 DNS 缓存查找；假如浏览器在这两个容器都没有找到 google 的IP 地点纪录，则会向广域域名系统查找。
10. 精简JavaScript
削减JavaScript 文件大小的有几种手腕，一般被广泛运用的是 精简。精简就是去除JavaScript 代码中的空格、解释等过剩的字符，这类体式格局基础上没有什么瑕玷。
别的一种体式格局是 殽杂。殽杂是在精简的基础上，把函数、变量名都用较短小的字符来替代，从而到达削减文件大小的结果。然则殽杂会发生不少贫苦，很有能够会引入毛病，虽然有益于防备逆向工程，当同时也增添了本身在线上环境调试的难度。
如今广泛的做法是宣布前应用 Gulp、Grunt 等自动化构建东西对资本举行紧缩。
11. 防备重定向
以下是一个重定向的历程：
浏览器发送要求 -- 效劳器返回302 -- 效劳器返回200 -- 浏览器最先显现就是说，在发送要求到返回200这段时刻，页面完整是空缺的；对照一般的要求多了一段空缺时刻。
12. 删除反复的剧本
反复的剧本对增添HTTP 要求次数和剧本实行的时刻。
13. 设置ETag
这个划定规矩应当逾期了，如今比较好的实践是直接依据内容给静态资本打上哈希版本号。
14. 使Ajax可缓存
适用于以上的优化，大部分一样适用于Ajax要求。
总结：
总的来讲，前端优化的整体思绪是进步浏览器与效劳器沟通的效力。
前端机能优化一味推行“最好实践”有时刻反而过而不及，所以针对项目的现实情况来优化才是明智的挑选。
