每个前端工程师都应该懂的前端性能优化总结：

超、凢脫俗 2023-07-20 13:55 38阅读 0赞

### 文章目录 ###

*   *   *   *  采用css雪碧图（css sprite/css图片精灵）技术
             *  在项目中，我们最好把css或者js文件进行合并或者压缩，尤其是在移动端开发的时候，如果css或者j s内容不是很多，我们可以采用内嵌式，以此减少http的请求次数，加快页面加载速度
             *  采用图片懒加载技术，在页面开始加载的时候，不请求真实图片地址，而是用默认图占位，当前页面加载完成后，在根据相关的条件依次加载真实图片（减少页面首次加载http请求的次数）
             *  对于不经常更新的数据，最好采用浏览器的304缓存左处理，主要由服务器处理（减少http请求次数）
             *  使用字体图标代替一些页面中的位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了htttp请求次数（类似雪碧图）
             *  如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload为none,页面加载的时候，音视频资源不进行加载，播放的时候再进行加载，（减少页面首次加载HTTP请求的次数）
             *  在客户端和服务器端进行数据通信的时候，我们尽量采用json格式进行数据传输
             *  采用CDN加速
             *  关于编写代码时候的一些优化技巧
             *  关于页面的SEO优化技巧
             *  总结

#### 采用css雪碧图（css sprite/css图片精灵）技术 ####

采用css雪碧图（css sprite/css图片精灵）技术，把一些小图合并到一张大图上，使用的时候通过背景图片定位，定位到具体的某一张小图片上  
css代码如下：

.pubBg{ 
    	background: url('././img/sprit.png') no-repeat;
      background-size: 0 0 /*和原图大小保持一致*/
    }
    .box { 
    	background-position: x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/
    }

html代码：

优点：减少HTTP的请求次数或者减少请求数据的大小，因为页面中每发送一次http请求，都需要完成请求+响应这个完整的http事务，会消耗一些时间，也可能会导致http链接通道的阻塞，为了提高页面加载速度和运行的性能，我们应该减少http的请求次数和减少请求内容的大小（请求内容越大，消耗的时间越长）。

#### 在项目中，我们最好把css或者js文件进行合并或者压缩，尤其是在移动端开发的时候，如果css或者j s内容不是很多，我们可以采用内嵌式，以此减少http的请求次数，加快页面加载速度 ####

1.  css合并成一个，js也最好合并
2.  首页通过一些工具（例如： webpack）把合并后的css或者js压缩成x xx.min.js减少文件大小
3.  服务器开启资源文件的GZIP压缩
4.  通过一些自动化工具完成css以及js的合并压缩，或者再完成less转css，es6转es5等操作，我们这种自动化构建模式，称之为前端“工程化”开发

#### 采用图片懒加载技术，在页面开始加载的时候，不请求真实图片地址，而是用默认图占位，当前页面加载完成后，在根据相关的条件依次加载真实图片（减少页面首次加载http请求的次数） ####

在实际项目中，我们开始图片都不加载，页面首次加载完成后，先把第一屏幕中可以看见的图片进行加载，随着页面滚动，再把下面区域中能够呈现出来的图片进行加载。  
**根据图片的恶懒加载技术，还可以扩充出，数据的懒加载**

*  开始加载页面的时候，我们只把首屏或者前两屏的数据从服务器端进行请求（有些网站首屏数据是后端渲染好，整体返回给客户端呈现的）
 *  当页面下拉，滚动到某个区域，再把这个区域需要的数据进行请求，（请求回来做数据绑定以及图片延迟加载等）
 *  分页展示技术采用的也是数据的懒加载思想实现的：如果我们请求获取的数据是很多的数据，我们最好分批请求，开始只请求一页的数据，当用户点击其他页的时候，再请求那页的数据

#### 对于不经常更新的数据，最好采用浏览器的304缓存左处理，主要由服务器处理（减少http请求次数） ####

例： 第一个请求css和js下来，浏览器会把请求的内容缓存起来，如果做了304处理，用户再次请求css和js，直接从缓存中读取，不再请求服务器获取（减少http请求次数）  
当用户强制刷新页面，或者当前缓存的css和js发生了变动，都会重新从服务器获取  
对于客户端来讲，我们还可以基于localStorage来做一些本地存储。

#### 使用字体图标代替一些页面中的位图（图片），这样不仅做适配的时候方便，而且更加轻量级，而且减少了htttp请求次数（类似雪碧图） ####

#### 如果当前页面中出现了AUDIO或者VIDEO标签，我们最好设置它们的preload为none,页面加载的时候，音视频资源不进行加载，播放的时候再进行加载，（减少页面首次加载HTTP请求的次数） ####

preload为auto，页面首次加载的时候就把音视频资源进行加载；  
preload为metadata: 页面首次加载的时候只把音视频资源的头部信息进行加载

#### 在客户端和服务器端进行数据通信的时候，我们尽量采用json格式进行数据传输 ####

优势：

1.  json格式数据，能够清晰明了的展示数据结构，而且也方便我们获取和操作
2.  相对于很早以前的xml格式传输，json格式的数据更加轻量级
3.  客户端和服务器端都支持json格式数据的处理，处理起来非常的方便

> 在真实项目中，并不是所有的数据都要基于json，我们尽可能这样做，但对于某些特殊需求（例如文件流传输或者文档传输），使用json就合不合适了

#### 采用CDN加速 ####

cdn: 分布式（地域分布式）

#### 关于编写代码时候的一些优化技巧 ####

> 除了减少http请求次数和大小可以优化性能，在编写代码的时候，也可以进行一些优化，让页面性能有所提升（不好的代码编写习惯，会导致页面性能消耗太大，例如：内存泄露）

1.  在编写js代码的时候，尽量减少对DOM的操作。在js中操作DOM是一个非常消耗性能的事情，但是我们又不可能避免的操作DOM，我们只能尽量减少对于DOM的操作

**操作DOM弊端：**

*  DOM存在映射机制（js中的DOM元素对象和页面的DOM结构是存在映射机制的，一改则都是改），这种映射机制，是浏览器按照W3C标准完成对JS语言的构建和DOM的构建（其实就是构建了一个监听机制），操作DOM是同时要修改两个地方，相对于一些其他的js编程来说是消耗性能的。
 *  页面中的DOM结构改变或者样式改变，会触发浏览器的回流（浏览器会把DOM结构重新进行计算，这个操作很消耗性能）和重绘（把一个元素的样式重新渲染）

1.  编写代码的时候，更多的使用异步编程

同步编程会导致： 上面的东西完不成，下面任务也做不了，开发的时候，可以把某一个区域模块都设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响（用的比较少）。  
尤其是ajax数据请求，我们一般都要使用异步编程，最好是基于promise设计模式进行管理（项目中经常使用fetch、vue axios等插件，来进行ajax请求处理，因为这些插件中就是基于promise设计模式对ajax进行封装处理）

1.  在实际项目中，我们尽可能避免一次性循环过多的数据（因为循环操作是同步编程），尤其是避免while导致的死循环操作
2.  css选择器优化

*  尽量减少标签选择器的使用
 *  尽量少使用id选择器，多使用样式类选择器（通用性比较强）
 *  减少选择器前面的前缀（选择器是从右向左查找的，前缀多，查询的时间多）

1.  避免使用css表达式
2.  减少页面中的冗余代码，尽可能提高方法的重复使用率：“低耦合高内聚”
3.  最好css放在head中，js放在body尾部，让页面加载的时候，先加载css，再加载js(先呈现页面，再给用户提供操作)
4.  js中避免使用eval

*  性能消耗大
 *  代码压缩后，容易出现代码执行错话问题

1.  js中尽量减少闭包使用

*  闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能
 *  还会容易造成内存的泄漏

闭包也有自己的优势：保存和保护，我们不能避免，我们只能尽量减少

1.  在做dom事件绑定的时候，尽量避免一个个的事件绑定，而是采用性能更高的事件委托来实现

*  事件委托（事件代理）
 *  把事件绑定给外层容器，当里面的后代元素相关行为被触发，外层容器绑定的方法也会被触发执行（冒泡传播机制导致）通过事件源是谁，我们做不同的操作即可

1.  尽量使用css3动画代替js动画，因为css3的动画或者变形都开启了硬件加速，性能比js动画好。
2.  编写js代码的时候，尽可能使用设计模式来构建体系，方便后期的维护，也提高了扩充性
3.  css中减少对滤镜的使用，页面中减少队友flash的使用

#### 关于页面的SEO优化技巧 ####

1.  页面中杜绝出现死链接（404页面），而且对于用户输入一个错误页面，我们要引导到404提示页面中（服务器处理的）。
2.  避免浏览器中异常错误抛出