前端优化

总结下前端优化

前端优化分为性能优化 和 代码优化

首先说下性能优化：

减少HTTP请求，这个大家应该都知道吧，具体通过什么样的途径来减少请求呢

CSS Sprites,最常用的方式。一个网页中有N个icon 时，单独请求就会有N多个HTTP请求，这极大的影响了页面的加载时间，如果我们合并成一个图片，就会好太好了。

图片地图： map标签定义一个客户端图像映射，图像映射（image-map）指带有可点击区域的一幅图像。这是在所有主流浏览器中都可以兼容的一个标签属性。

实现图像映射的关键属性是area ，area元素永远嵌套在 map 元素内部，可定义图像映射中的区域。 <img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。

　　<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等

（不建议此种）内联图片和脚本使用data:URL（Base64编码）模式直接将图片包含在Web页面中而无需进行HTTP请求。但是此种方法存在明显缺陷：- 不受IE的欢迎；- 图片太大不宜采用这种方式，因为Base64编码之后会增加图片大小，这样页面整体的下载量会变大；- 内联图片在页面跳转的时候不会被缓存。（大图片可以使用浏览器的本地缓存，在首次访问的时候保存到浏览器缓存中，典型的是HTML5的manifest缓存机制以及LocalStorage等）。

合并css,能合并的尽量合并，grunt,gulp等好多方式可以处理

2.使用内容发布网络（CDN）

什么是CDN，是分布在不同位置的服务器，主要存放静态资源（图片,css, js等），以便用户更加快速的访问内容。

3.添加本地缓存

加入本地缓存，在第一次访问时，把静态资源缓存到浏览器，第二次访问不会再次发送请求。浏览本身的缓存机制并不是十分靠谱，个人推荐用html5的manifest,只需要一个配置文件就ok。还有一种存放到localStorage的（个人没有尝试过）。

4.压缩资源文件

压缩文件大小，可以提高加载速度

5.将CSS样式表放在顶部，把javascript放在底部

把css文件放在中部或者底部，会造成网页会出现短暂闪烁或者空白，这是由浏览器的运行机制决定的。把js放在也是为了避免出现此种问题，因为js会阻塞文件加载。

6.[b]避免使用CSS表达式[/b]

css表达式是动态的css的一种很强大的方式，但是同时会带来性能问题（慎用）。

7.配置[b]ETag[/b]

　　Etag在请求资源是会对比服务器上次返回的etag是否一致，如果一致，则请求为304（协商缓存）。还是推荐manifest的方式缓存。

[b] 8.[b]减少DNS查询[/b][/b]

DNS查询有时间开销，通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。缓存DNS：缓存DNS查询可以很好地提高网页性能，一旦缓存了DNS查询，之后对于相同主机名的请求就无需进行再次的DNS查找，至少短时间内不需要。所以在使用页面中URL、图片、js文件、css文件等时，不要使用过多不同的主机名。

9.使用外部javascript和CSS

css 和 javascript 写在html 中，首先不规范，导致复用率减低，第二，使用外部的js和css可以让浏览器缓存他们。

10.精简javascript

最初始的精简方式：就是移除不必要的字符减小js文件大小，改善加载时间。包括所有的注释、不必要的空白字符。

高级一点的精简方式就是：混淆。
它不但会移除不必要的字符，还会改写代码，比如函数和变量的名字会被改成很短的字符串，这样使js代码更简练更难阅读。

11.避免重定向

重定向的英文是Redirect，用于将用户从一个URL重新跳转到另一个URL。
最常见的Redirect就是301和302两种。

在我们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定 向了，所以在给页面链接加URL的时候切记最后的“/”不可丢。

12.删除重复脚本

重复的js代码除了有不必要的HTTP请求之外，还会浪费执行js的时间。
将你使用的js代码模块化，可以很好地避免这个问题，至于js模块化如何实现，现在有很多可以使用的开源框架，我用的比较多的是我们公司玉伯的Sea.js。

13.使Ajax可缓存

针对页面中主动的Ajax请求返回的数据要缓存到本地，当然这个是针对短期内不会变化的数据。如果不确定数据变化周期的话，可以增加一个修改标识的判断，我正常处理过程中会给一些Ajax请求返回的数据增加一个MD5值的判断，每次请求会判断当前MD5是否变化，如果变化了取最新的数据，如果不变化，则不变.

14，图片lazyLoad

当遇到图片略多的网页时，如果在PC端还算勉强可以，但是当移到移动端时，加载速度可想而知，还浪费了流量。比较好的办法就是用户浏览到可视区域才加载图片。

代码优化：

1.[b]正确理解 Repaint 和 Reflow[/b]

Repaint：重绘，只是改变外观，并不改变布局结构。如： 背景色，outline等

Reflow：重排，DOM的变化影响到了元素的几何属性（宽和高），浏览器重新计算元素的宽高，会是渲染受到影响的部分失效。浏览器也会重新去验证dom中其他元素的visibility属性。这也是reflow影响性能的原因。例如：改变浏览器窗口大小，文字大小变化，结构调整，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

上面提到的重排，通过style属性设置，每设置一次，就会reflow一次。最好通过class设置。当页面需要有动画效果是，尽量使用fixed 或者absolute.不影响其他元素。有时候需求不允许这样，我们只能尽可能的缩小影响范围。

2.减少DOM操作

在《高性能的javascript》的一书中，曾经这样描述“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”，每过一次桥，就要交一次费。所以建议减少过桥次数。

DOM操作会使页面repaint 和 Reflow，合理利用存储变量。考虑大量dom循环的性能开销，在循环结束时一次性插入。

减少查询和操作dom元素，查询时将值赋给全局变量。

3.使用JSON格式进行数据交换

json 是一种轻量级的数据交互格式，采用完全独立语言的文本格式。相对XML，体积小，简单易懂

4.给图片加上宽高

网页中如果不给图片加上宽高，会导致图片原来位置会被其他元素占据，知道浏览器下载完图片才显示出来，页面又会reflow，加上宽高，可以减少页面重绘，防止图片缩放

5.少用全局变量

变量都层层查找的，最后才会到window层。

6.减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；

7.对字符串进行循环操作，譬如替换、查找，应使用正则表达式；

8.类型转换：把数字转换成字符串使用”” + 1，浮点数转换成整型使用Math.floor()或者Math.round()；

9.不使用EVAL；

10.避免404错误：特别要避免给404指定一个停摆页面，否则所有404错误都将会加载一次页面；

好了，知道的都总结了，欢迎大家指正

分类: 前端优化