文章目录

前言
一、图片懒加载
- 原因
- 判断是否进入可视区
- - 方案一: clientHeight、scrollTop 和 offsetTop
  - 方案二：getBoundingClientRect
二、防抖与节流
三、路由和组件懒加载
- 原因
- 使用实例
- - 路由懒加载:
  - 组件懒加载
四、图片预加载
- 原因
五、使用前端缓存
- 强缓存
- 协商缓存
六、减少回流重绘
- 什么是回流和重绘
- - 回流
  - 重绘
- 优化回流重绘
总结

前言

前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。

网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?

不知道也没关系,下面让我们一起谈一谈常见的前端优化手段。

一、图片懒加载

原因

使用原因:

在页面中,需要加载大量或内存很大的图片,有些图片甚至达到30M+
JavaScript需要在dom渲染后才会执行,如果加载图片使用时长过大,会影响JS资源加载
大量的图片请求,会增加浏览器的负荷,可能会导致页面直接卡死,极大影响用户体验。

图片懒加载的原理比较简单，就是先不设置图片的src属性，先将图片的属性放在一个浏览器无法识别的属性中（比如data-src），然后监听页面的scroll 事件，判断图片是否进入可视区,进入了可视区域，就将data-src中的值放进src中，这样图片就显示出来了。

那我们怎么判断进入可视区呢?

判断是否进入可视区

方案一: clientHeight、scrollTop 和 offsetTop

伪代码:

let img = document.getElementsByTagName("img");
let num = img.length;
let count = 0;//计数器，从第一张图片开始计lazyload();//首次加载别忘了显示图片window.addEventListener('scroll', lazyload);function lazyload() {let viewHeight = document.documentElement.clientHeight;//视口高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条卷去的高度for(let i = count; i < num; i++) {// 元素现在已经出现在视口中if(img[i].offsetTop < scrollHeight + viewHeight) {if(img[i].getAttribute("src") !== "你的占位图片") continue;img[i].src = img[i].getAttribute("data-src");count++;}}
}

这里绑定的滑动事件是可以使用节流来优化的,下面将详细介绍。

方案二：getBoundingClientRect

getBoundingClientRect可以直接获取元素距离各个方向视口的距离

function lazyload() {for(let i = count; i <num; i++) {// 元素现在已经出现在视口中if(img[i].getBoundingClientRect().top < document.documentElement.clientHeight) {if(img[i].getAttribute("src") !== "你的占位图片") continue;img[i].src = img[i].getAttribute("data-src");count ++;}}
}

二、防抖与节流

手把手带你实现防抖节流

博主在上面这篇博客有详细介绍哦,在此就不多说了!

三、路由和组件懒加载

原因

使用原因:

当进行打包构建应用时，打包后的代码逻辑实现包可能会非常大。
当我们把不同的路由对应的组件分别打包，在路由被访问时再进行加载，就会更加高效。

SPA(单页面应用)已经在我们的开发中普及,带来便利的同时也加大了浏览器的负担

例如:

现在最常用的前端构建工具Webpack,我们在打包部署时,它会对我们的JavaScript代码进行打包压缩如果我们单个打包代码量非常大,那么我们的渲染速度将会变得非常慢。

在Webpack4.x版本之后,Webpack会对一些特定操作进行分包(将JS文件分成多个)

路由和组件懒加载就是能让Webpack进行分包的情况之一。

那么我们如何去使用路由懒加载和组件懒加载呢?

别急,很简单,让我们一起来看一看。

使用实例

路由懒加载:

正常使用:

import xiamLogin from './views/XiamLogin.vue'
routes: [{path:'/xiamLogin',component: xiamLogin,},]

懒加载:

routes: [{path:'/xiamLogin',component: () => import('./views/XiamLogin.vue'),},]

组件懒加载

正常使用:

import choose from './choose/index.vue'

懒加载:

const choose = () => import('./choose/index.vue')

是不是非常简单呢!

四、图片预加载

原因

使用场景:

用户可能在当前页面停留,可以在页面渲染完成后提前渲染其他页面资源
可以设置缓存,提前请求其他页面资源存入缓存,在其他页面加载后直接从缓存中读取。

预加载就是提前加载所需资源,通常是加载静态资源,在可能停留页对其他静态资源发起请求,将资源放入浏览器缓存(需设置max-age类可缓存字段,下面将详细介绍)

五、使用前端缓存

优点：

减少了服务器的负担，提高了网站的性能
加快了客户端网页的加载速度
减少了多余网络数据传输

想要完成上述步骤，就需要浏览器的强缓存和协商缓存共同协作完成。

强缓存

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。
Expires 是 http1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值。

Cache-Control常用值：

no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；（和服务器确定有资源更新，再进行判断。没有强缓存，会有协商缓存）
no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；（不适用缓存，每次都从服务器获取）
max-age：设置缓存的最大有效期，单位为秒；

这里设置了max-age的缓存时间为31536000s(注意:max-age的单位是s)

注意:当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。

协商缓存

如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。

从上面我们说到，命中协商缓存只有两种情况：

max-age 过期了
值为no-cache

使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源

注意：当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。

六、减少回流重绘

什么是回流和重绘

大家都了解，在浏览器渲染过程中，当cssom树和dom树合并成render树后，将会计算render树的布局（这一步就是回流），然后将布局渲染到屏幕上（这一步就是重绘）

回流

当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流。

可能会导致回流的操作：

浏览器的窗口大小发生变化
添加或者删除可见的DOM元素
元素的字体大小发生变化
元素的尺寸或者位置发生变化
元素的内容发生变化

重绘

当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这个过程就是重绘。

可能会导致重绘的操作：

字体颜色或背景发生变化
border-radius、visibility、box-shadow等发生变化

注意：重绘不一定引起回流，回流一定引起重绘。

优化回流重绘

减少回流重绘的操作：

不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式。
如果需要修改多个css属性，可以先将元素设置为display:none，然后操作完成之后再改变回来，这样就能大大降低回流次数。
使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素
避免频繁的操作dom

总结

以上就是比较常用的前端优化手段，主要思路就是减少渲染率，增强用户体验以防卡顿。

前端优化手段远不止这么一点，虽然每个都只能优化一小部分，但是如果我们十分熟练使用的话，优化的就是一个很大的提升。

量变引起质变！

【前端优化】超详细!带你体验常用的前端优化手段相关推荐

手把手带你入门前端工程化——超详细教程（高级前端必备）
本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能优化重构部分小节提供了非常详细的实战教程,让大家动手实践. 另外我还写了一个前端工程化 demo 放在 github 上.这 ...
手把手带你入门前端工程化——超详细教程
授权自@谭光志链接:https://segmentfault.com/a/1190000037752931,也可点击阅读原文本文将分成以下 7 个小节: 技术选型统一规范测试部署监控性能 ...
谷歌优化指南，谷歌SEO优化超详细新手教程
谷歌优化其实就是我们平时说的Google SEO推广.SEO是正规的叫法,翻译过来是搜索引擎优化的意思:国人都喜欢用简称,于是很多人习惯称之为优化,于是出现了"Google优化"这 ...
超全面试总结——数据仓库超详细!!!带答案!!!持续更新中~
超全面试总结--数据仓库如何理解数仓为什么要数据仓库建模为什么要设计数据分层通用的数据分层设计分层的原则是什么? 数据集市和数据仓库的区别数据库和数据仓库有什么区别? 维度建模三种模式星 ...
超全面试汇总——Hive 超详细!!!带答案!!!持续更新中~
Hive面试总结什么是 Hive ? Hive结构描述 Hive的优势内部表.外部表.分区表.分桶表 hive中排序的种类和适用场景动态分区和静态分区的区别 + 使用场景 hive 语句执行顺 ...
超详细带你入门开发一个超实用的浏览器插件
相信大家平时在电脑上逛掘金.知乎网站时,肯定有看到过下面超级烦人的跳转拦截确认页面虽然这种拦截的初衷是好的,但是我相信大家平时肯定不会因为有了这个拦截提醒页面,就会对即将打开的网站安全性提高自己的警 ...
Nginx性能优化(超详细)
目录一.性能优化考虑点一.当前系统结构瓶颈二.了解业务模式三.系统与Nginx性能优化 1.文件句柄 (1)设置方式 (2)系统全局性修改和用户局部性修改 (3)进程局部性修改 2.cpu的亲 ...
Linux内核UDP性能优化(超详细讲解)
现在很多人都在诟病Linux内核协议栈收包效率低,不管他们是真的懂还是一点都不懂只是听别人说的,反正就是在一味地怼Linux内核协议栈,他们的武器貌似只有DPDK. 但是,即便Linux内核协议栈收包 ...
【博学谷学习记录】超强总结，用心分享 | 前端开发前端基础超详细总结-上篇
文章目录 HTML标签 1.排版标签标题标签段落标签换行标签水平线标签 2.文本格式化标签标题标签 3. 媒体标签图片标签的介绍路径的介绍音频标签的介绍视频标签的介绍 4. 链接标签 ...

【前端优化】超详细!带你体验常用的前端优化手段