浅析前端性能优化

稍微整理一下常见的性能优化方法，每个优化方法的原理和具体实现很多且复杂就不在文章里挨个阐述了，本文就简单的梳理一遍

一、页面内容

1. 减少HTTP请求次数 合并CSS和JS文件 使用CSS雪碧图通过background-image和background-position来控制
2. 减少DNS查询 用户输入URL后，浏览器要查询域名对应的ip地址，这个过程要花费20-120ms。DNS查询完成之前，浏览器无法从服务器下载任何数据 引入DNS缓存（通过浏览器配置）
3. 避免重定向 客户端收到服务器的重定向响应后，会根据响应头中location 的地址再次发送请求。重定向会影响用户体验，尤其是多次重定向时，用户在一段时间内看不到任何内容，只看到浏览器进度条一直在刷新。
   最浪费的重定向经常发生、而且很容易被忽略：URL 末尾应该添加 / 但未添加。比如，访问 astrology.yahoo.com/astrology 将被 301 重定向到 astrology.yahoo.com/astrology/
4. 缓存Ajax请求 添加Expires或Cache-Control响应头，讲Ajax响应结果缓存下来。
5. 延迟加载(懒加载) 延迟加载非首屏使用的图片，样式，脚本已经用户交互时才会显示的内容
6. 预先加载 利用浏览器空闲时间来加载将来要使用的资源，以便用户访问下一个页面可以更快。
7. 减少DOM元素数量

二、服务器

1. 使用CDN (下载静态资源更快)
2. 添加Expires和Cache-control响应头
3. 启用Gzip，可以通常压缩减少70%的响应大小，压缩的内容多为（HTML,CSS,JS.JSON.XML）图片和PDF不要用
4. 配置Etag 方便服务器判断请求内容有没有更新，没有就响应304，避免重新下载
5. Ajax使用get方法 因为get更快 post分为两步（先发送header 再发送数据）
6. 避免src属性为空，虽然src为空，但浏览器仍然会对服务器发送一个HTTP请求
7. 减少cookie大小，因为每次请求都会带上cookie 增加了通信开销

三、CSS与JS

1. 样式表放在head中，这样可以渐进渲染，给用户加载很快的感觉
2. 不要使用CSS表达式，对性能损耗很严重
3. 使用代替@import ，@import会阻塞dom树渲染
4. 脚本放在底部。 浏览器下载脚本时会阻塞其它资源的并行加载。 可以考虑script的异步属性 async与defer
5. 使用外部js、css。 外部JS与CSS可以被浏览器缓存，在不同页面间重用。
6. 移除重复脚本
7. 减少DOM操作
8. 减少绑定事件监听的节点，通过事件委托

四、图片

使用雪碧图，不要在图片样式中缩放图片，使用相应大小的图片