一、什么是前端性能优化？

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度

二、前端优化的意义

　1.从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

三、 性能优化的方案

1. 网络优化

　（1） 减少 HTTP请求数

常用的减少http请求数有以下几种：

1） 合并图片。当图片较多时，可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。

2）合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。

3）去掉不必要的请求。开发写代码或者系统升级之后残留的无效请求连接。

4）充分利用缓存。这里说的缓存是客户端侧缓存或者说浏览器缓存。Expires头信息是客户端侧缓存的重要依据，格式类似于Expires:sun ,20 Dec 2017 23:00:00 GMT。 如果当前时间小于Expires指定的时间，浏览器就会从缓存中直接获取相关的数据信息或html文件，如果当前时间大于Expires指定的时间，浏览器会向服务器发送请求来获取相关数据信息。

5）图片懒加载。　这实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。

6）避免404。HTTP请求代价高昂，完全没有必要用一个HTTP请求去获取一个无用的响应（比如404 Not Found），只会拖慢用户体验而没有任何好处。

　（2）压缩 CSS, JS 和 HTML代码

压缩 CSS, JS 和 HTML压缩技术可以从文件中去掉多余的字符。你在编辑器中写代码的时候，会使用缩进和注释，这些方法无疑会让你的代码简洁而且易读，但它们也会在文档中添加多余的字节。

　（3） 将CSS和JS放到外部文件中

 实际上，用外部文件可以让页面更快，因为JavaScript和CSS文件会被缓存在浏览器。HTML文档中的行内JavaScript和CSS在每次请求该HTML文档的时候都会重新下载。这样做减少了所需的HTTP请求数，但增加了HTML文档的大小。另一方面，如果JavaScript和CSS在外部文件中，并且已经被浏览器缓存起来了，那么我们就成功地把HTML文档变小了，而且还没有增加HTTP请求数。

 我们需要权衡内置代码带来的HTTP请求减少与通过使用外部文件进行缓存带来的好处的折中点。

　（4） 将外部js脚本置底（将脚本内容在页面信息内容加载后再加载）

浏览器是可以并发请求的，如果将脚本放在比较靠前的位置，在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载，则会影响整个页面的加载速度从而影响用户体验。解决这一问题的方法有很多，而最简单可依赖的方法就是将脚本尽可能的往后挪，减少对并发下载的影响。

　（5） 图片优化

优化方法：

1）尽可能的使用PNG格式的图片，它相对来说体积较小。

2）对于不同格式的图片，在上线之前最好进行一定的优化。

3）图片的延迟加载，也叫做赖加载。

　（6）延迟加载

先了解下什么才是一开始渲染页面所必须的？其余内容都可以等会儿。在确定页面运行正常之后，可以用一些延迟加载脚本增强它，以支持一些拖放和动画之类的华丽效果。

　（7）预加载

 预加载可能看起来和延迟加载是相反的，但它其实有不同的目标。通过预加载组件可以充分利用浏览器空闲的时间来请求将来会用到的组件（图片，样式和脚本）。用户访问下一页的时候，大部分组件都已经在缓存里了，所以在用户看来页面会加载得更快。

详情见文章：js中延迟加载和预加载 | 七日打卡

　（8）使用 CDN 和缓存提高速度

容分发网络能显著提高网站的速度和性能。使用 CDN，您网站内的文件将自动压缩，以便在全球范围内快速分发。CDN 是一种缓存方法，可极大改善资源的分发时间，同时，它还能实现一些其他的缓存技术，如，利用浏览器缓存。

合理地设置浏览器缓存，能让浏览器自动存储某些文件，以便加快传输速度。

2. css优化

　（1）避免使用 CSS 表达式

使用baiCSS表达式，一定要记住它们要计算成千上万次并且可能会对页面的性能产生影响。所以，在非不得已，就不要使用CSS表达式。

　（2）减少 Table 布局

Table布局的缺点是比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效，

　（4）移除空的样式

移除空的样式，去掉非必要的代码

（5）使用<link>不使用@import

加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 会等到页面全部被下载完再被加载。

（6） 减少重绘和回流

例： 图片在加载前提前指定宽高或者脱离文档流，可避免加载后的重新计算导致的页面回流；

详情见文章： 浏览器的重绘与回流 | 七日打卡

3. JS优化

　（1）减少闭包的使用。

过多使用闭包会产生很多不销毁的内存，内存过多会导致内存溢出。

　（2）避免使用iframe

iframe 会嵌入其它页面，父页面渲染的时候，同时渲染子页面，渲染进度会变慢。

　（3）减少 dom 操作，减少页面重绘和重排。

使用 css3 动画

　（4）注意防抖和节流

在前端开发中会遇到一些频繁的事件触发，例如input，keyup，keydown，scroll，resize，mousemove等，这非常影响性能，所以我们需要控制它们触发的频率，方法就是防抖与节流。

详情见文章：js中的防抖与节流 | 七日打卡

四、总结

培养良好的前端性能优化可以让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。