# 性能优化

# yoho optimizion(雅虎军规)

网络部分
尽量减少HTTP请求数
合并文件
雪碧图
小图Base64
减少DNS查找
开启DNS预解析
使用CND静态资源服务器
避免重定向
杜绝404

缓存
配置ETags
实体标签（ETags），是服务器和浏览器用来决定浏览器缓存中组件与源服务器中的组件是否匹配的一种机制
添上Expires或者Cache-Control HTTP头
使用外链的方式引入JS和CSS（缓存）

内容部分
按需加载组件
预加载组件
减少DOM元素的数量
尽量少用iframe
压缩JavaScript和CSS（代码层面）

CSS 部分
避免使用CSS表达式
选择<link>而不是@import
避免使用滤镜
把样式表放在顶部

JS 部分
把脚本放在底部
去除重复脚本
减少DOM访问

图片部分
选用合适的图片格式
雪碧图中间少留空白
不要用HTML缩放图片，要小图就去加载小图
用小的可缓存的favicon.ico

cookie
给cookie减肥
清除不必要的cookie
cookie尽可能小
设置好合适的域
合适的有效期
把静态资源放在不含cookie的域下
当浏览器发送对静态图像的请求时，cookie也会一起发送，而服务器根本不需要这些cookie。

移动端
保证所有组件都小于25K
把组件打包到一个复合文档里

服务器
开启Gzip等压缩
避免图片src属性为空（为空浏览器也会向服务器发送另一个请求）
对Ajax用GET请求
尽早清空缓冲区
使用CDN（内容分发网络）
内容分发网络（CDN）是一组分散在不同地理位置的web服务器，用来给用户更高效地发送内容

# CSS优化

多个 css 合并，尽量减少 HTTP 请求

css 雪碧图

抽象提取公共样式，减少代码量

选择器优化嵌套，尽量避免层级过深 （用‘>’替换‘ ’）

属性值为 0 时，不加单位

压缩CSS代码

避免使用 CSS 表达式

它们要计算成千上万次并且可能会对你页面的性能产生影响。

# 首屏图片加载

预加载： 就是事先把网页的图片加载到本地，之后就直接到缓存那里拿图片了。 预加载分为有序加载和无序加载两种。

# 延迟加载（懒加载）

原理：先用一张极小的图片来代替，等到内容加载完了，再向服务器请求真正的图片并替换，可以有效的减少等待时间。优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源。

优点：可以减少请求数(有可能不会去加载)或者延迟请求，减缓了服务器端的压力

jquery的lazyload插件可以实现图片延迟加载的插件 使用settimeout或setinterval进行延迟加载

# 服务器端渲染.用户首屏时间优化

一、代码的足够简洁 减少代码冗余，保持简洁的代码风格，这是作为一个网页程序员的必修，能同样实现一个效果的能用 css 就尽量不用 js，能用两行代码解决问题的就别写三行，这是最基础的一点。

二、减少资源载入 这里子凡所说的资源主要是指 js、css 文件，因为我知道现在很多的前端开发设计人员喜欢用各种开源的特效或者别人做好的效果，其中包括为了给网站添加几个图标就引入一个开源的图标字体库，为了某个特效又在引入几个 js 和 css 文件，这无形之中就为网站加重了“份量”。

三、图片使用懒加载，视频或音频禁止自动播放 还记得子凡曾在泪雪博客写过关于“图片懒加载是否会影响网站 SEO 优化”的文章，其中就说到过如何合理的使用图片懒加载技术提升用户体验而不影响网站优化，因为懒加载是为了防止页面一被打开就立即载入图片，这样就会占用网络带宽，从而影响网站的打开速度以及网站首屏的请求，所以非正文图片都是可以做懒加载的。

图片是每个网站基本都少不了的东西，但是对于做视频、音频的站点来说，如果打开页面就自动播放，占用的网站带宽资源都更多了，所以这也是一个网站打开速度优化的一个小知识。

四、使用 CDN 加速静态资源 关于使用 CDN 加速是否影响网站优化的文章子凡也曾有过讨论，子凡对于网站整体做 CDN 加速还是有些不太认同，但是对于将网站静态资源做 CDN 加速镜像或者缓存优化却是非常认同的，例如将网站的 js、css、图片等文件做 CDN 加速是更有利于整个网站的加载和打开速度的。

五、提升页面渲染速度 将 CSS 样式写在头部样式表中，减少由 CSS 文件网络请求造成的渲染阻塞。

将 JavaScript 放到文档末尾，或使用 async 方式加载，避免 JS 执行阻塞渲染。

对非文字元素（如图片，视频）指定宽高，避免浏览器重排重绘。

六、服务器本身的速度优化 启用服务器 Gzip 压缩功能；

开启数据库查询及页面缓存功能（如果是直接生成静态页面的网站可忽略）；

升级或者保证服务器足够的网络带宽；

开启网站缓存，充分利用本地缓存。

同样随着网络安全的重视程度，如果你的网站已经安装 SSL 证书启用了 HTTPS 协议，那么你可以开启 HTTPS/2 或者 SPDY 这个功能，可以在某些程度上加速网站的打开。

# 性能优化的方法

（1）减少http请求次数：CSS，Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。

（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

（4）当需要设置的样式很多时设置className而不是直接操作style。

（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

（7）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。