常见web性能优化的方法

Posted 2021-04-30 js是世界上最好的语言

先从为什么要做性能优化开始：当页面打开速度变得非常慢，当我们滚轮滚动页面开始变的卡顿，当并发数量非常多，多个人访问一台服务器（请参考春运12306抢票23333333）的时候，当然，我们这里只去谈前端性能优化，高并发应该是属于后端工程师需要解决的问题。
从前端的角度出发，常见的web性能优化的方法大概有以下几种：
1、尽量减少HTTP请求次数
什么是http请求？就是我们打开F12之后看到的network里面的列表，每一条都是一个http请求


http_req.png

我们可以做到的是：
1）、资源合并与压缩
 
   
   
 

  
    
    
  
多个css文件合并到一起，压缩
  
    
    
  
多个js文件合并到一起，压缩
 
   
   
 
2）、合理设置 HTTP缓存，缓存资源越多，我们需要请求的资源越少，速度就越快
3）、多张图片压缩到一起，制作精灵图，并且使用 tinypng 减小图片体积，甚至能用代码写出的效果就不要使用图片
 
   
   
 
2、css、js放在正确的位置
css使用link标签引入并且放在head标签里面；js文件或代码放在body底部（html代码结束后）；浏览器是可以并发请求的，这一特点使得其能够更快的加载资源，然而外链脚本在加载时却会阻塞其他资源，例如在脚本加载完成之前，它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验（参考链接 来源：知乎）
 
   
   
 
2、合理使用CDN
3、减少dom操作
dom操作过于频繁是万恶之源（手动微笑），曾见证了一个系统因为dom操作过于频繁几乎无法使用（虽然不只是dom操作过于频繁导致的，但是我个人觉得dom操作过于频繁是原因之一）
当必须操作dom的时候，有这么几种方法：
 
   
   
 

  
    
    
  
缓存已经访问过的元素，举例;
 
   
   
 
使用这种方法var $img = $('.ct img')
$img.append() ...
$img.css() ...
而不是
$('.ct img').append() ...
$('.ct img').css() ...
这样可以避免频繁的去dom里面查找相应的元素，当这样的代码多起来的时候，性能的不同就很明显了
 
   
   
 

  
    
    
  
建议隐藏显示之类的操作用class的添加删除来进行操作，利用js直接进行增删改查相比可以用class操作来说性能会差一些
  
    
    
  
如果一定要增加dom元素，建议代码中一次性或使用尽量少的次数直接添加多个dom节点
 
   
   
 
4、合理使用缓存
可以将常用的图片，css，js存储于localStorage里面，可以保存一些较大文件和不常更换的静态资源。
 
   
   
 
5、减少DNS的查找次数
 
   
   
 
6、尽量避免使用iframe


作者：李博洋li
链接：http://www.jianshu.com/p/c0a594d2ecce