前端性能优化的方法和工具，减少http请求的次数和速度_前端发起请求如何变慢

作者：AllinToyou | 2024-03-10 10:41:44

踩

前端发起请求如何变慢

一、前端性能优化的方法和工具

cdn：Content Delivery Network内容分发网络

二、代码优化

cookie：减少cookie大小

css：将样式置顶，避免样式表达式，less/sass

js：将脚本置底，减少DOM访问，尽量不要定义全局变量，定义一些共用方法，使用gulp压缩代码，

页面：减少http请求

减少dom操作：

 
 js和DOM可以看成两个岛，js每操作一次DOM元素便要经过一次桥，操作的次数越多那么过桥的次数越多 效率就低了 所以尽量减少次数。而且修改DOM元素会造成重绘和重排。Repaint(重绘) Reflow(重排)  重绘就是一个元素的外观被改变，但是没有改变布局(宽高)的情况  如改变 outline 颜色 背景色等等。 重排就是DOM的变化影响到了元素的宽高，浏览器会重新计算元素的宽高，会影响页面的排版，这也是reflow低效的原因，如改变窗口大小 改变文字大小  内容改变等等。解决方案是尽可能避免reflow，难以避免的话尽量将元素定位成fixed和absolute。 

三、减少http请求

 
 只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。 

1、css sprites：

 
 css精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。 

 
 .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; } 

 
 .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; } .left:hover{ background-position:0px -18px; } 

 
 .right:hover{ background-position:-18px -18px; } 

2、精简，合并css,js：

精简就是将Javascript或CSS中的空格和注释全去掉，用来帮助我们做精简的工具很多

3、css替代图片：

 
  圆角 阴影 渐变 等css效果在当前主浏览器中已得到广泛的支持，而在之前是通过图片来实现这些效果的，比如圆角按钮 

4、缓存一些数据

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/217837