如何进行前端性能优化？

1、减少 http 请求

减少 http 请求的方案主要有：合并 JavaScript 和 CSS 文件、合并图片 CSS Sprites、图像映射（Image Map）和使用 Data URI 来编码图片，图片较多的页面也可以使用 lazyLoad 等技术进行优化。

2、减少对 DOM 的操作 

修改和访问 DOM 元素会造成页面的 Repaint（重绘）和 Reflow（重排），循环对 DOM 操作更是不推荐的行为。所以合理的使用 JavaScript 变量储存内容，考虑大量 DOM 元素中循环的性能开销，在循环结束时一次性写入。 减少对 DOM 元素的查询和修改，查询时可将其赋值给局部变量。

 ⚠️ 在 IE 中:hover 会降低响应速度

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

JSON 是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON 是 JavaScript 原生格式，这意味着在 javaScript 中处理 JSON 数据不需要任何特殊的API 或工具包。与 XML 序列化相比，JSON 序列化后产生的数据一般要比 XML 序列化后数据体积小。

4、高效使用 HTML 标签和 CSS 样式

HTML 是一门标记语言，使用合理的 HTML 标签前你必须了解其属性，比如 Flow Elements，Metadata Elements ，Phrasing Elements。比较基础的就是要知道块级元素和内联元素、盒模型、SEO 方面的知识。

CSS 是用来渲染页面的，也是存在渲染效率的问题。CSS 选择符是从右向左进行匹配的，当页面被触发引起回流（reflow）的时候，低效的选择符依然会引发更高的开销，所以要避免低效。

5、使用 CDN 加速（内容分发网络） 

其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN 系统能够实时的根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

6、将 CSS 和 JS 放到外部文件中引用，CSS 放头，JS 放尾

7、精简 CSS 和 JS 文件

8、压缩图片和使用图片 Sprite 技术

9、注意控制 Cookie 大小和污染

因为 Cookie 是本地的磁盘文件，每次浏览器都会去读取相应的 Cookie，所以建议去除不必要的Coockie，使 Coockie 体积尽量小以减少对用户响应的影响，使用 Cookie 跨域操作时注意在适应级别的域名上设置 Coockie 以便使子域名不受其影响

Coockie 是有生命周期的，所以请注意设置合理的过期时间，合理地 Expire 时间和不要过早去清除 Coockie，都会改善用户的响应时间。

10.减少重定向

尽量避免使用重定向，当页面发生了重定向，就会延迟整个HTML文档的传输。在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载，降低了用户体验，如果一定要使用重定向，如http重定向到https，要使用301永久重定向，而不是302临时重定向。因为，如果使用302，则每一次访问http，都会被重定向到https的页面。而永久重定向，在第一次从http重定向到https之后 ，每次访问http，会直接返回https的页面