【无标题】

如何经行网站性能优化+前端性能优化

网站性能优化

1. content方面

 - 减少HTTP请求：合并文件、css精灵，inline Image
 - 减少DNS查询：DNS缓存，将资源分布到恰当数量的主机名
 - 减少DOM元素数量

2. server方面

 - 使用CDN
 - 配置ETag：浏览器下载组件的时候，会将他们储存到浏览器内存中，如果需要再次获取相同的组件，浏览器将检查组件的缓存时间，假如已经过期，那么浏览器将发送一个条件GET请求到服务器，服务器判断缓存还有效，则发送一个304响应，告诉浏览器可以重用缓存组件。
 - 对组件使用Gzip压缩

3. cookie方面

 - 减少cookie的大小

4. css方面

 - 讲样式表放到页面的顶部
 - 不使用CSS表达式
 - 使用<link>不适应@import

5. js方面

 - 将脚本放到页面底部
 - 讲JS和CSS从外部引入
 - 压缩	JS和CSS
 - 删除不需要的脚本
 - 减少DOM访问

6. 图片方面

 - 优化图片，根据实际颜色选择色深，压缩
 - 优化CSS精灵
 - 不要在HTML中拉伸图片

前端性能优化

1. 减少HTTP请求次数
2. cssSprites：原来，图片较多时，一个图片代表一个浏览器请求，一般的浏览器内核只能同时访问5个左右的网络请求，大量的图片会有大量的网络请求，一个网络请求，就需要几百毫秒，所以，把网页中的一些背景图片整合到一个图片文件中，再利用CSS的“background-image,background-repeat,background-position”的组合进行背景定位
3. JS、CSS源码压缩
4. 图片大小控制合适
5. 网页Gzip(压缩)
6. CDN托管（不直接下载源码到本地，转为访问源码的路径）
7. data缓存（）
8. 图片服务器
9. 前端模板JS+数据，减少由于HTML标签导致的带宽浪费（不太懂）
10. 前端用变量保存AJAX请求结果，减少请求次数
11. 用innerHtml代替DOM操作，减少DOM操作次数，优化JS性能
12. 当样式很多是，用class而不用style
13. 少用全局变量，缓存DOM节点查找的结果，减少IO读取操作
14. 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
15. 图片预加载，讲样式放在顶部，讲脚步放在底部，加上时间戳
16. 避免在页面的主体布局中使用 table，table要等其中的内容完全下载之后才会显示出来，显示比DIV+CSS布局慢

前端性能优化最佳实践？

性能评级工具（PageSpeed 或 YSlow）
合理设置 HTTP 缓存：Expires 与 Cache-control
静态资源打包，开启 Gzip 压缩（节省响应流量）
CSS3 模拟图像，图标base64（降低请求数）
模块延迟(defer)加载/异步(async)加载
Cookie 隔离（节省请求流量）
localStorage（本地存储）
使用 CDN 加速（访问最近服务器）
启用 HTTP/2（多路复用，并行加载）
前端自动化（gulp/webpack）