一键难忘520

这个屌丝很懒，什么也没留下！

热门标签

前端性能优化【前端必备】（含懒加载，手写防抖、节流等）_网页懒加载

作者：一键难忘520 | 2024-07-02 19:38:32

踩

网页懒加载

前端性能优化方向

减少网络加载耗时
减少 CPU 计算量

都可以考虑用空间换时间

让加载更快

减少资源体积

清理冗余的代码、图片和视频等无效资源

优化代码结构

将重复的代码提炼为公共组件、公共样式、全局变量和函数等。

打包构建时，将代码和资源进行压缩

减少访问服务器的次数

合并代码，减少代码文件数量

在这里插入图片描述

使用 SSR 服务器端渲染

将网页和数据一起加载，一起渲染，如早先的 JSP ASP PHP，现在的 vue React SSR

非 SSR(前后端分离) : 先加载网页，再加载数据，再渲染数据

尽可能多地使用浏览器的缓存
以 webpack 打包构建的 hash 命名机制为例：
- 静态资源加 hash 后缀，根据文件内容计算 hash
- 文件内容不变，则 hash 不变，则 ur 不变
- ur 和文件不变，则会自动触发 http 缓存机制，返回 304

使用更快的网络

使用 CDN 加载静态资源（通用的 js ，css 文件，图片，视频等）

在这里插入图片描述

让渲染更快

CSS 放在 head 里

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 内联 CSS 样式 -->
    <style>
        body {
            background-color: #f1f1f1;
            font-family: Arial, sans-serif;
        }
        
        h1 {
            color: blue;
        }
    </style>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Js 放在 body 最下面

<body>
     <!-- 此处省略了其他HTML内容 -->
     
     <!-- 将JavaScript代码放置在body标签的最后部分 -->
     <script src="your_js_file.js"></script>
</body>
1
2
3
4
5
6

尽早执行JS，用DOMContentLoaded 触发

window.addEventListener("load", function () {
  // 页面的全部资源加载完才会执行，包括图片视频等
});
document.addEventListener("DOMContentLoaded", function () {
  // DOM 渲染完即可执行，此时图片、视频可能还没有加载完
});
1
2
3
4
5
6

使用懒加载

监听页面的滚动，当资源（如图片/视频）即将进入视口（用户可见的网页区域）时，再加载资源。

在这里插入图片描述

具体实现方法可参考

缓存DOM 查询

在这里插入图片描述

频繁的DOM 操作，合并到一起插入 DOM 结构

在这里插入图片描述

节流 throttle

含义：节省流量，即减少高频事件内操作的执行频率。

目标：让高频事件内的操作，按预期的频率触发

功效：降低了高频事件内操作的频率，避免了性能的浪费，有效降低页面卡顿的风险。

场景：

拖拽元素时，避免 drag 事件内的操作过于频繁的执行

原理：见下图

在这里插入图片描述
代码 : 需能手写

// 节流
function throttle(fn, delay = 100) {
    let timer = null

    return function () {
        if (timer) {
            return
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

使用

const div1 = document.getElementById('div1')
div1.addEventListener('drag', throttle(function (e) {
    console.log(e.offsetX, e.offsetY)
}))
1
2
3
4

防抖 debounce

含义：防止抖动，即防止高频事件内的操作重复触发

目标：让高频事件内的操作等待高频事件结束时触发一次

功效：降低了高频事件内操作的频率，避免了性能的浪费，有效降低页面卡顿的风险。

场景：

监听用户输入，实时搜索（如百度搜索），用防抖来等待用户停止输入时，执行一次查询操作。
不断地调整浏览器窗口大小会不断的触发 window 的 resize 事件，用防抖来等待用户停止调整浏览器窗口大小时，执行一次 resize 事件内的操作。

原理：见下图
在这里插入图片描述
代码 : 需能手写

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

使用

const input1 = document.getElementById('input1')
input1.addEventListener('keyup', debounce(function (e) {
    console.log(input1.value)
}, 600))
1
2
3
4

选择性能更优的页面渲染方案

动画渲染

需实时更新的动画，使用 RAF
简单的静态或者中等复杂度的动画，用 CSS
若使用的 setTimeout 实现的动画，建议改用 CSS 或 RAF 进行优化！

js 实现动画的两种方案对比：setTimeout vs RAF

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