前端性能的优化设计（前端开发性能优化方案）

JS书写需注意的点

一    
    
    
    
、JS书写过程中减少对闭包的使用

　　原因：闭包会产生不释放的栈内存

　　替代方案：1 
    
    
    
  ，循环给元素做事件绑定的时候
     


     


     


     
，尽量把后期需要的数据（如：索引）绑定到元素的自定义属性上 




 




 




 




，而不是创建闭包存储

　　　　　　　2 

   

   

   

 ，可以在最外层创建一个闭包
     

     

     

     ，把需要的数据进行存储  




  




  




  




，而不是一个方法创建一个闭包（如：单例模式）

　　　　　　 3 


  


  


  


，手动释放不被占用的内存

二  


     


     


     


  、避免“嵌套循环 
    
    
    
  ”

　　原因：会额外增加循环次数和死循环

三


 




 




 




 
、尽量使用事件委托
     
     
     
     ，减少DOM的频繁操作

四   

   

   

   

、页面中数据尽量采用异步编程和延迟分批加载

　　异步编程：减少HTTP通道阻塞   




   




   




   



，而导致页面加载不出来

　　延迟加载：减少首次加载的HTTP请求次数

五   

     

     

     

 、尽量封装JS方法（低耦合高内聚） 



 



 



 



，减少冗余代码

六



  




  




  




  、减少使用eval                   ，代码压缩后
    




    




    




    


，可能出现符号不完善的问题

七  


  


  


  


、尽量使用设计模式来管理代码（单利    
     
     
     
、构造




   




   




   




   、Promise 



 



 



 


、发布订阅）

css书写需注意的点

一                    、减少css表达式的使用

二




    




    




    




   、减少选择器的层级



















，尽量控制在3个层级

　　css选择器解析规则是从右到左解析

　　减少标签选择器的使用

三


















、css导入时减少使用@import                   ，因为@import是同步操作
     



     



     



     

，等导入的内容加载完才会像下渲染



















，link是异步操作

四                    、静态资源放置顺序

　　css放在header内 
    
    
    
  ，js放在body最下面

　　能用css
     


     


     


     
，就不用js 




 




 




 




，能用原生js就不用插件

　　css处理动画的性能优于js 

   

   

   

 ，而且css中的transform浏览器会开启“硬件加速
     


     


     


     
”

DOM书写需注意的点　　　　

二 



     



     



     



   、减少HTTP请求次数

　　1
     

     

     

     ，静态资源进行打包压缩（webpack构建工具）

　　2  




  




  




  




，图片尽量合成雪碧图 


  


  


  


，或者图片base64

　　3
     
     
     
     ，icon可以使用iconfont或者svg图片

　　4   




   




   




   



，如果极其要求高性能 



 



 



 



，可以使用内嵌css和js                   ，减少HTTP请求

　　5
    




    




    




    


，利用localstorage本地存储

三


















、减少DOM的重绘和回流

　　1



















，回流的分离读写

　　 2                   ，使用文档碎片/字符串拼接动态创建DOM

四    
    
    
    
、采用图片“懒加载 




 




 




 




”

　　目的：减少页面第一次加载中http的请求次数

　　步骤：页面开始加载
     



     



     



     

，用占位图占位



















，当页面加载完 
    
    
    
  ，图片在可视区内再去发送http请求

五  


     


     


     


  、减少cookie的使用

六：音视频资源设置（preload=‘none’）
     


     


     


     
，播放时再加载

七


 




 




 




 
、避免使用iframe

八   

   

   

   

、script引用 添加defer / async 异步加载

九   

     

     

     

 、服务器端渲染

浏览器及服务器注意的点

一



  




  




  




  、利用浏览器和服务器的缓存技术（304缓存）

　　把不频繁更新的静态资源做缓存处理（如：JS  


  


  


  


、CSS    
     
     
     
、Image）

　　原理也是减少HTTP请求次数

二




   




   




   




   、CDN加速

三 



 



 



 


、开启服务端的gzip压缩（减少请求资源文件大小）