前端性能优化9大策略（面试一网打尽）！

大家好，我是讯享网，很高兴认识大家。

讯享网

前言

目标

优化策略

一、感知性能优化

1.loading

2.骨架屏

二、HTML优化

1.压缩 HTML

2.删除不必要的注释

3.删除不必要的属性

4.使用语义化标签

5.减少iframe数量

6..削减DOM数量和层级数量

7.减少 HTTP 请求次数

8.减少重排重绘

三、JavaScript优化

1.javascript脚本放到页面底部

2.将javascript和css从外部引入

3.删除重复的脚本

4.减少DOM访问

5.节流与防抖

6.合理的ajax恳求

7.长列表虚拟滚动优化

8 .代码结构的优化

四、CSS优化

1.尽量少用@import

2.避免！important，可以选择其他选择器

3.不要在ID选择器前面进行嵌套其它选择器

4.CSS文件压缩

5.CSS层级嵌套最好不要超过3层

6.删除无用的css

7.慎用*通配符

8.删除不必要的单位和零

9.异步加载非首屏css

10.将样式表放到页面顶部

11.不使用IE的Filter

12.检测工具推荐

五、图片优化

1.根据实际需要选择色深，压缩。

2.小图片引入雪碧图。

3.图片懒加载

4..缩小 favicon.ico 并缓存

5.img图片的alt属性要写, 合理使用target="_blank"

6.采用svg图片或者字体图标

7.Base64

六、webpack构建优化

1. 线程加载器

2. 缓存加载器

3.Hot update

4.exclude & include

5.缩小 CSS 代码

6.缩小 JavaScript 代码

7.tree-shaking

8.source-map

9.Bundle Analyzer

10.模块懒加载

11.压缩包

12.base64

13.正确配置哈希

七、资源加载优化

1.使用 Web Workers

2.DNS预解析

3.预加载 preload

八、浏览器缓存策略

1.缓存位置

2.缓存策略

3.缓存场景

4.用户操作行为与缓存

九、服务器优化

1.静态资源使用 CDN

2.添加Expires或者Cache-Control响应头

3.对组件使用Gzip压缩

4.配置ETag

5.提供来自相同协议的文件

6.开启http2（多路复用，并行加载）

7.服务端渲染

8.分域存放资源

9.减少页面重定向

补充

性能测试网站推荐

1.WebPageTest

2.Web Page Analyzer

3.GT Matrix

4.Pingdom

5.36全球网站性能测试（强烈推荐）

前言

在项目开发过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

目标

让你的网站访问速度飞起来，性能体验留住你的客户。让你面试披荆斩棘，收获各大厂心仪offer，废话不多说，直接开整。

优化策略

一、感知性能优化

对于用户来说，用户的感知性能才是最重要的，简单讲，就是让用户感觉你的网站访问很快，并且感知性能没有衡量标准。如果一个页面的加载时间很长，我们也可以通过一些方式让用户觉得没有那么慢。

1.loading

最基础的菊花等待～。

推荐给大家一个loading gif网址，可以选择自己喜欢的动图使用哦。

网页动态加载（loading）GIF图标 - GIF图标 - 素材集市

2.骨架屏

原理：

使用一张占位骨架图（svg / lottie / gif）来代替 loading 效果，当数据加载完成后对替换掉骨架图。

实现方案：

1.HTML + CSS：主流。基本是自己在项目中以侵入式方式围绕html“定制”；微信小程序的骨架屏生成方案本质上也是这种。

2. 像React， Angular， Vue 使用的UI框架 ant-design，ng_zorro，Element ui 自带一些基础简单的骨架屏可以直接使用。如下图：

3.自动生成。利用一些手段在业务代码之外生成骨架屏，但最终还要依托架构插入到业务中。

二、HTML优化

1.压缩 HTML

HTML代码压缩，将注释、空格和新行从生产文件中删除。删除所有不必要的空格、注释和中断行将减少HTML的大小，加快网站的页面加载时间，并显著减少用户的下载时间。

2.删除不必要的注释

注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。

我们可以使用HTML minify插件删除注释。

remove-html-comments - npm

3.删除不必要的属性

像 type="text/javascript" or type="text/css" 这样的属性应该被移除。

<!-- Before HTML5 --> <script type="text/javascript"> // Javascript code </script> <!-- Today --> <script> // Javascript code </script>

讯享网

类型属性不是必需的，因为HTML5把text/css和text/javascript作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。

4.使用语义化标签

使用语义化标签可以提高代码的可读性和可维护性，并有助于搜索引擎优化。例如，使用标签来定义页面头部，使用标签来定义导航等。

语义化优势：

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，如盲人阅读器根据语义渲染网页
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

5.减少iframe数量

尽量少用iframe标签，爬虫是不会读取iframe的内容的。

6..削减DOM数量和层级数量

HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并制作到浏览器中所花的时间就越长，所以应尽或许坚持 DOM 元素简洁和扁平化的层级。

7.减少 HTTP 请求次数

将多个 CSS 和 JavaScript 文件合并为一个文件，可以减少 HTTP 请求次数，从而提高页面加载速度。同时，使用浏览器缓存可以避免每次请求相同的文件。

8.减少重排重绘

重排：

当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

哪些操作可以影响重排：

添加/删除元素
display:none
移动元素位置
操作styles
offsetLeft, scrollTop, clientWidth
修改浏览器大小，字体大小

重绘：

重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。

划重点：

重排必定会引发重绘，但重绘不一定会引发重排。

三、JavaScript优化

1.javascript脚本放到页面底部

脚本的下载和执行，会阻塞其他资源（样式文件或图片）的下载。因此，将<script>标签尽量尽可能放到<body>标签的底部。

2.将javascript和css从外部引入

将样式和脚本代码放到外部文件中，并使用链接或脚本标签来引用，可以提高页面加载速度。减少 DOM 操作：DOM 操作往往是页面加载速度缓慢的主要原因之一。尽量减少 DOM 操作的次数和复杂度，可以提高页面的响应速度和性能。

3.删除重复的脚本

一个页面中如果有两次使用到同一个JavaScript文件，那这将对页面性能产生很大的影响。主要有以下两点：

增加了不必要的HTTP请求。
JavaScript执行所花费的时间。

4.减少DOM访问

访问DOM元素是有代价的，修改DOM元素则更为昂贵，因为它会导致浏览器重新计算页面的几何变化。如下代码：

讯享网// 频繁操作dom案列 <script type="text/javascript"> function insertHtml () { for(let count = 0; count < 15000; count++){ document.getElementById('dom').innerHTML+='循环操作dom'; } } </script>

访问DOM的次数越多，代码运行速度越慢。因此，在有其他方案可以代替的时候，我们要尽量减少访问DOM的次数。

5.节流与防抖

日常开发过程中，滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）。

防抖函数：

function debounce(fn, wait) { let timeout = null; //定义一个定时器 return function() { if(timeout !== null) clearTimeout(timeout); //清除这个定时器 timeout = setTimeout(fn, wait); } } // 处理函数 function handle() { console.log(Math.random()); } // 滚动事件 window.addEventListener('scroll', debounce(handle, 1000));

节流函数：

讯享网let throttle = function(func, delay) { let prev = Date.now(); return function() { let context = this; //this指向window let args = arguments; let now = Date.now(); if (now - prev >= delay) { func.apply(context, args); prev = Date.now(); } } } function handle() { console.log(Math.random()); } window.addEventListener('scroll', throttle(handle, 1000));

防抖和节流能有效减少浏览器引擎的损耗，防止出现页面堵塞卡顿现象。

6.合理的ajax恳求

关于回来内容相同的恳求，没必要每次都直接从服务端拉取，合理运用 AJAX 缓存能加快 AJAX 呼应速度并减轻服务器压力。

7.长列表虚拟滚动优化

虚拟列表是一种用来优化长列表的技术。它可以保证在列表元素不断增加，或者列表元素很多的情况下，依然拥有很好的滚动、浏览性能。它的核心思想在于：只渲染可见区域附近的列表元素。下图左边就是虚拟列表的效果，可以看到只有视口内和临近视口的上下区域内的元素会被渲染。

推荐几个基于框架的开源实现：

基于React的 react-virtualized
基于Vue 的 vue-virtual-scroll-list
基于Angular的 ngx-virtual-scroller

8 .代码结构的优化

1．设置Viewport：HTML的viewport可加快页面的渲染。

2．减少DOM结点：DOM结点太多会影响页面的渲染。

3．尽量使用css3动画：合理使用requestAnimationFrame动画代替setTimeout。

4．优化高频事件：scroll、touchmove等事件尽量使用函数防抖节流等进行限制。

5. 不滥用WEB字体：WEB字体需要下载、解析、重绘当前页面，尽量减少使用。

6. 文件命名规则须统一且要有意义，同类型文件归类到相同的文件夹中。

7.删除无效注释。

四、CSS优化

1.尽量少用@import

主要有两个原因：

1.使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

2.多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载。

2.避免！important，可以选择其他选择器

因为这破坏了样式表中固有的级联规则，使调试bug变得更加困难。它很容易使用不当，而且容易成倍增加，尤其是在滥用时。您可以轻松地!important得出一个带有要覆盖的规则的元素，这时您通常不得不重构样式，或使用另一个!important规则来加剧问题。

如果你一定要使用，最好定义基本样式尽可能靠近html或body元素，并且要覆盖时，请尽量避免使用特殊性。这样，您就有足够的空间进行更改。

3.不要在ID选择器前面进行嵌套其它选择器

主要有两个原因：

1.ID选择器本来就是唯一的而且人家权值那么大，前面嵌套，完全是浪费性能。

// 浪费性能。 .content #dom {}

2.除了嵌套，在ID选择器前面也不需要加标签或者其它选择器。比如 div#dom 或者.box#dom。这两种方式完全是多余的，理由就是ID在页面就是唯一的。前面加任何东西都是多余的！

讯享网// 多余写法 div#dom {}

4.CSS文件压缩

这应该是最容易想到的一个方法了，通过压缩CSS文件大小来提高页面加载速度。现在的构建工具，如webpack、gulp/grunt、rollup等也都支持CSS压缩功能。压缩后的文件能够明显减小，可以大大降低了浏览器的加载时间。

5.CSS层级嵌套最好不要超过3层

一般情况下，元素的嵌套层级不能超过3级，过度的嵌套会导致代码变得臃肿，沉余，复杂。导致css文件体积变大，造成性能浪费，影响渲染的速度！而且过于依赖HTML文档结构。这样的css样式，维护起来，极度麻烦，如果以后要修改样式，可能要使用!important覆盖。尽量保持简单，不要使用嵌套过多过于复杂的选择器。

6.删除无用的css

我们应该尽可能地提取公共类，减少重复。对于后者，在不同开发者进行代码维护的过程中，总会产生不再使用的CSS的代码，当然一个人编写时也有可能出现这一问题。

7.慎用*通配符

有时候可能会写下面这种代码来消除一些标签的默认样式或统一浏览器对标签渲染的差异化

*{ margin：0； padding：0; }

开发时尽量避免使用通配符选择器。

8.删除不必要的单位和零

CSS 支持多种单位和数字格式，可以删除尾随和跟随的零，零始终是零，添加维度不会为包含的信息附带任何价值。

讯享网.dom { padding: .2px; margin: 24px; width: 20px; }

9.异步加载非首屏css

CSS会阻塞DOM的渲染，所以我们将首屏关键CSS内联后，剩余的非首屏CSS内容可以使用外部CSS，并且异步加载，防止非首屏CSS内容阻塞页面的渲染。

10.将样式表放到页面顶部

我们希望浏览器尽早渲染获取到的任何内容。这对大页面和网速慢的用户很重要。给用户视觉反馈，比如进度条的重要性已经被大量研究和记录。在我们的情况中，HTML 页面就是进度条。当浏览器逐步加载页面头部，导航条，logo 等等，这些都是给等待页面的用户的视觉反馈。这优化了整体用户体验。

11.不使用IE的Filter

在图片加载过程中，这个滤镜会阻塞渲染，卡住浏览器，还会增加内存消耗而且是被应用到每个元素的，而不是每个图片，所以会存在一大堆问题。

12.检测工具推荐

给大家推荐两个检测和优化css的工具：

Online CSS Analyzer - Project Wallace

CSS Performance Testing Tool — Maker's Aid

五、图片优化

1.根据实际需要选择色深，压缩。

减小图片的大小可以减少页面加载时间。可以使用图片压缩工具来压缩图片，以减小文件大小。

2.小图片引入雪碧图。

雪碧图（CSS Sprite）又叫CSS精灵图主要用于把一堆小图标整合在一张背景透明的大图上，通过设置对应的位置来显示不同的图片，目的是大幅减轻服务器对图片的请求数量，是前端性能优化的一种方式。

优势：

劣势：

3.图片懒加载

一般来说，我们访问网站页面时，其实很多图片并不在首屏中，如果我们都加载的话，相当于是加载了用户不一定会看到图片，这显然是一种浪费。解决的核心思路就是懒加载：实现方式就是先不给图片设置路径，当图片出现在浏览器可视区域时才设置真正的图片路径。

4..缩小 favicon.ico 并缓存

有利于 favicon.ico 的重复加载，由于一般一个 Web 运用的 favicon.ico 是很少改动的。

5.img图片的alt属性要写, 合理使用target="_blank"

<img src="图片地址" alt="图片keyword"/> alt属性一定要写

前端性能优化9大策略（面试一网打尽）！

前言

目标

优化策略

一、感知性能优化

1.loading

2.骨架屏

二、HTML优化

1.压缩 HTML

2.删除不必要的注释

3.删除不必要的属性

4.使用语义化标签

5.减少iframe数量

6..削减DOM数量和层级数量

7.减少 HTTP 请求次数

8.减少重排重绘

三、JavaScript优化

1.javascript脚本放到页面底部

2.将javascript和css从外部引入

3.删除重复的脚本

4.减少DOM访问

5.节流与防抖

6.合理的ajax恳求

7.长列表虚拟滚动优化

8 .代码结构的优化

四、CSS优化

1.尽量少用@import

2.避免！important，可以选择其他选择器

3.不要在ID选择器前面进行嵌套其它选择器

4.CSS文件压缩

5.CSS层级嵌套最好不要超过3层

6.删除无用的css

7.慎用*通配符

8.删除不必要的单位和零

9.异步加载非首屏css

10.将样式表放到页面顶部

11.不使用IE的Filter

12.检测工具推荐

五、图片优化

1.根据实际需要选择色深，压缩。

2.小图片引入雪碧图。

3.图片懒加载

4..缩小 favicon.ico 并缓存

5.img图片的alt属性要写, 合理使用target="_blank"

相关推荐