前端项目如何性能优化？（路由懒加载、图片懒加载...）

本文探讨了Web应用性能优化的关键点，包括秒开率的提升、通过减少HTTP请求、懒加载、SSR、代码压缩等方法优化页面加载，以及关注动画与操作性能中的回流与重绘问题，同时强调了内存占用管理和电量消耗在移动设备上的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.页面加载
2.动画与操作性能
3.内存占用
4.电量消耗

性能优化可以从以下几个方面来考虑：1.页面加载、2.动画与操作性能、3.内存占用、4.电量消耗

1.页面加载

秒开率：一秒之内能够打开网页看到关键内容的用户占所有用户的百分比是多少？秒开率越高网站越牛逼；网页打开的时间不能超过2秒

（1）减少http请求：雪碧图或者精灵图，目前不用了，背景定位麻烦，现在用字体图标
（2）懒加载、预加载
（3）SSR服务端渲染
（4）代码压缩（GZIP）:配合服务端，现在要改读取，去连接.gzip文件

路由懒加载：使用箭头函数来实现路由按需加载

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const router = new VueRouter({
  routes :[
    {
      path: '/',
      redirect:'homeList',
      component: ()=>import('@/views/Layout'),
      children:[
        {path:'/homeList',component:()=>import('@/views/Layout/homeList')},
        {path:'/categorize',component:()=>import('@/views/Layout/categorize')},
        {path:'/my',component:()=>import('@/views/Layout/my')},
        {path:'/cart',component:()=>import('@/views/Layout/cart')},
       
      ]
    },
    {path: '/Detail',component: ()=>import('@/views/Detail')},
    {path: '/Login',component: ()=>import('@/views/Login')},
    {path: '/Pay',component: ()=>import('@/views/Pay')},
    {path: '/Search',component: ()=>import('@/views/Search')},
  ]
})

export default router

预加载代理模式优化加载体验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>性能优化案例</h1>
    <img class="img1" src="" alt="">
    <div>
        <img class="img2" src="" alt="">
    </div>
    <button class="btn1">请求图片</button>
    <script>
        // 预加载：代理模式优化加载体验
        let btn1 = document.querySelector(".btn1")
        btn1.onclick = function () {
            let myImage = (function () {
                let imgNode = document.querySelector(".img2")
                return {
                    setSrc: function (src) {
                        imgNode.src = src
                    }
                }
            })();
            let proxyImage = (function () {
                let img = new Image;
                // 监听图片加载
                img.onload = function () {
                    myImage.setSrc(this.src)
                }
                return {
                    setSrc: function (src) {
                        // 过渡的动画
                        myImage.setSrc('./img/loading.webp')
                        img.src = src
                    }
                }
            })();
            // 加载大图
            proxyImage.setSrc("./img/big.webp")
        }
    </script>
</body>

</html>

图片懒加载
（1）先所有图片都是加载的动画
（2）获取可是区域高度
（3）获取滚动高度
（4）for循环图片，判断图片距离可视区域顶部的具体是否小于可视区域高度加滚动高度，如果小于，就用data-src图片替换掉加载中的图片。
（5）循环i+1，避免重复加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./img/loading.webp" data-src="./img/big.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big1.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big2.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big3.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big4.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big5.webp" alt="">
    <img src="./img/loading.webp" data-src="./img/big6.webp" alt="">
    <script>
        let num = document.getElementsByTagName("img").length;
        let img = document.getElementsByTagName("img")
        let n = 0//防止重复加载
    // 一打开页面触发lazyLoad()
    lazyLoad()
    // 屏幕滚动的时候触发，所有懒加载组件的原理就是onscroll
    window.onscroll = lazyLoad

    function lazyLoad() {
        //   获取可见区域的高（整个视口的高）
        let seeHeight = document.documentElement.clientHeight
        // 获取滚动条滚动的距离，document.body.scrollTop容错处理
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        // 滚动条的滚动距离 
        for(let i=n;i<num;i++){
            // 当图片上方距离小于屏幕可见区域高度加上滚动的高度，就把图片加载出来，替换掉。
            if(img[i].offsetTop<seeHeight+scrollTop){
                img[i].src = img[i].getAttribute("data-src")
                // 不会重复加载
                  n=i+1
            }

        }
        }
    </script>
</body>
</html>