前端常见性能优化方法

1.内容优化

(1)减少HTTP请求数:这条策略是最重要最有效的，因为一个完整的请求要经过DNS寻址，与服务器建立连接，发送数据，等待服务器响应，接收数据这样一个消耗时间成本和资源成本的复杂的过程。常见方法：合并多个CSS文件和js文件，利用CSS Sprites整合图像，Inline Images(使用 data：URL scheme在实际的页面嵌入图像数据 )，合理设置HTTP缓存等。
(2)减少DNS查找
(3)避免重定向（302.303）
(4)使用Ajax缓存
(5)延迟加载组件,预加载组件
(6)减少DOM元素数量:页面中存在大量DOM元素,会导致javascript遍历DOM的效率变慢。
(7)最小化iframe的数量：iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但其创建速度比其他包括JavaScript和CSS的DOM元素的创建慢了1-2个数量级。
(8)避免404：HTTP请求时间消耗是很大的，因此使用HTTP请求来获得一个没有用处的响应（例如404没有找到页面）是完全没有必要的，它只会降低用户体验而不会有一点好处。

2.Cookie优化

(1)减小Cookie大小
(2)针对Web组件使用域名无关的Cookie

3.css优化

(1)将CSS代码放在HTML页面的顶部（在文档<head/>内加载你的样式表，这样做的好处是：提高网页渲染性能，避免网页出现白屏或者是没有样式的内容）
(2)避免使用CSS表达式
(3)使用<link>来代替@import
(4)避免使用Filters

4.js优化

(1)将JavaScript脚本放在页面的底部。
(2)将JavaScript和CSS作为外部文件来引用：在实际应用中使用外部文件可以提高页面速度，因为JavaScript和CSS文件都能在浏览器中产生缓存。
(3)缩小JavaScript和CSS
(4)删除重复的脚本
(5)最小化DOM的访问：使用JavaScript访问DOM元素比较慢。
(6) 减少作用域链查找
(7) 在 Javascript中使用”+”号来拼接字符串效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。

5.图片优化

(1)合理控制图片大小
(2)通过CSS Sprites优化图片 （这是减少图像请求的有效方法，把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分；合并后的图片会比分离的图片总和要小，这是因为它降低了图片自身的开销）
(3)不要在HTML中使用缩放图片
(4)图标尽量使用矢量图标