前端性能优化方式

前端性能优化方式

前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
　　总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源。
　　前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

一、页面级优化：

1、减少 HTTP 请求：浏览器一般同时响应请求为4个（PC 一般为4个，Android 支持4个，IOS 5后可支持6个）

这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少 HTTP请求，那请
求多了到底会怎么样呢 ?首先，每个请求都是有成本的，既包含时间成本也包含资源成本。一
个完整的请求都需要经过 DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收
数据这样一个 “漫长” 而复杂的过程。时间成本就是用户需要看到或者 “感受” 到这个资源
是必须要等待这个过程结束的，资源上由于每个请求都需要携带数据，因此每个请求都需要占
用带宽。另外，由于浏览器进行并发请求的请求数是有上限的 ，因此请求数多了以后，浏览
器需要分批进行请求，因此会增加用户的等待时间，会给用户造成站点速度慢这样一个印象，
即使可能用户能看到的第一屏的资源都已经请求完了，但是浏览器的进度条会一直存在。

减少 HTTP请求数的主要途径包括：
(1)、合理设置 HTTP缓存

(2)、资源合并与压缩

HTML、CSS、 Javascript、Image 都可以用相应的工具进行压缩，压缩后往往能省下不少
空间。减少资源大小可以加快网页显示速度
合并小图片、 使用精灵图，base-64（减少http请求）

2、使用外联式引入CSS、JavaScript

3、使用首屏加载：首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化

按需加载：将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大
提升重要资源的显示速度和降低总体流量。但是这也会导致大量重绘，影响渲染性能

4、lazyload、滚动加载、media query、预加载

5、使用其他方式代替图片（CSS3，SVG，IconFont）、使用 Srcset （主要移动端）、选择合适的图片（webP优于JPG，PNG8优于GIF）、选择合适的大小（首次加载不大于1014KB，不宽于640（基于手机的一般宽度））

6、CSS 写在头部（阻塞 DOM 渲染，不阻塞加载，内联会阻塞加载）

如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析CSS，就已经开始渲
染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。除此之外，有
些浏览器会在 CSS下载完成后才开始渲染页面，如果 CSS放在靠下的位置则会导致浏览器将
渲染时间推迟。），JavaScript 写在尾部或异步（js文件默认阻塞加载和渲染）

二、代码优化

css代码优化

1、尽量避免在 HTML标签中写 Style 属性

2、避免 CSS 表达式：CSS 表达式的执行需跳出 CSS 的渲染

3、移除空的 CSS 规则：空的 CSS 规则增加了 CSS 文件的大小，且影响 CSS 树的执行

4、使用flexbox来布局

5、正确使用display的属性：

• display:inline 后边不应再使用 width、height、margin、padding 以及 float
• display:inline-block 后不应该使用 float
• display:block 后不应该再使用 vertical-align
• display:table 后不应该再使用 margin 或 float
• 不滥用 float ：float 在渲染时的计算量比较大，尽量减少使用
• 不滥用 Web 字体：Web字体需要下载，解析，重绘当前页面，尽量减少使用
• 不声明过多的 font-size： 尽量使用语义化标签的默认字体大小，提高 CSS 树的效率
• 值为 0 时不需要任何单位

6、标准化各种浏览器的前缀

• 没前缀应放在最后
• CSS 动画只用（-webkit- 无前缀 两种即可）
• 其他前缀为 -webkit- 、-moz- 、-ms- 、无前缀 四种

7、css选择符：浏览器对选择符的解析是从右往左进行的。

<div>
	<p>
		<span>选择器</span>
	</p>
</div>
1、div>p>span{ }
2、span{ }
如果像第二种，一个标签选择器就可以确定，就不必写成1这种，因为选择器是从右往左执行
的，如1：先找到所有的span标签，再找其直接父级是p的span标签，再找其直接父级是p的直
接父级是div的span标签，更加耗浏览器性能。

JavaScript执行优化

1、减少dom的重绘和回流

2、避免不必要的 DOM 操作

3、尽量改变 Class 而不是 Style ，使用 classList 代替 className

4、避免使用 document.write()会重绘整个页面

5、缓存 DOM 选择与计算：每次 DOM 选择都要计算，用一个变量保存这个值

6、尽量使用事件代理，避免批量绑定事件

7、尽量使用 ID 选择器：ID选择器是最快的

8、Touch 事件优化：使用 touchstart 、touchend 代替 click，但注意 Touch 响应过快，易引发误操作

渲染优化

1、减少 DOM 节点：DOM 节点太多影响页面的渲染，应尽量减少 DOM 节点

2、动画优化：

• 尽量使用 CSS3 动画
• 适当使用 Canvas 动画， 5 个元素以内使用 CSS 动画（IOS8可使用webGL）
• 增加响应变化的时间间隔，减少重绘次数
• GPU 加速：CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、webGL、Video）来触发 GPU 渲染，但过度使用会引发手机耗电增加。