前端性能优化

个人把优化分为两个方面网络性能优化和执行性能优化
 
  1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
  2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
 
网络性能优化 (减少HTTP请求)
0 页面简洁 减少资源请求(这一般是不可能的)
1 资源合并与压缩(合并文件)
  尽可能讲外部脚本,样式进行合并,css、JavaScript、Image 都可以相应的进行压缩
2 CSS Sprites(雪碧图)
  合并CSS图片 减少请求
3 图片懒加载
4 将外部js文件放在底部(js阻塞加载)
5 Lazy Load JavaScript (只有在需要的时候加载,一般情况下不加载信息内容)
 YUI 中,最初只是加载核心模块,其他模块可以等到需要使用的时候才加载
6 CSS 放在head中
7 DOMReady
8 使用缓存
9 DNS (后)
10 CDN Content Delivery Network,即内容分发网络(后)
    CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题
11 多域名
 
执行性能
1 尽量不使用全局变量
2 减少定时器
3 使用正则
4 少用for 、 while、 for in 等循环
5 尽量不使用属性 把它赋值给变量
6 减少dom操作
7 及时关闭定时器
8 图片不要缩放
9 使用base64 (利弊同在)
  优点
    1 减少了HTTP请求
    2 某些文件可以避免跨域问题
    3 没有图片更新要重新上传,还有清理缓存
  缺点
    ie6 /ie7不支持 但是在ie9 下的ie7 支持
    增加了css文件的尺寸
    增加工作量
    用在:①不能以雪碧图的形式存储 ②很少更新的 ③图片尺寸实际很小④这类图片在网站中大规模使用
 
 附上一张图标一张 
 
 
 
原文地址:https://www.cnblogs.com/NTWang/p/6258129.html