知识点---前端页面性能优化的方式，小bai也能懂

绝世唐门三哥

已于 2022-07-23 23:36:17 修改

阅读量318

点赞数

CC 4.0 BY-SA版权

分类专栏：重点知识笔记性能优化文章标签：前端 javascript 开发语言

于 2022-04-28 21:19:09 首次发布

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/119450706

重点知识同时被 3 个专栏收录

56 篇文章

订阅专栏

笔记

46 篇文章

订阅专栏

性能优化

8 篇文章

订阅专栏

==让加载更快==


1. 压缩代码，减小体积。使加载更快。
2. 减少请求次数：合并请求，ssr服务端渲染，缓存
3. 将静态文件采用CDN方式引入


==缓存==
1. 静态资源加hash后缀，根据文件内容计算hash
2. 文件内容不变，则hash不变，则url不变
3. url和文件不变，则会自动触发http缓存机制，返回304

==SSR(服务端渲染)==
1. 服务端渲染：将网页和数据一起加载一起渲染
2. 非SSR(前后端分离)：先加载网页，在加载数据并渲染数据
3. 早先的JSP/ASP/PHP,现在的vue/react/SSR均是服务端渲染

==让渲染更快==

1. css放在head头部，js放在body最下面
2. 尽早的执行JS，用DOMContentLoaded触发
3. 懒加载(图片过大或过多，上拉加载)
4. 对于小图标等采用雪碧图（精灵图）
5. 对dom查询进行缓存
6. 频繁操作DOM,合并到一起插入DOM结构
7. 节流throttle和防抖debounce

前面两条简单总结不加区分的话，可使用下面简单几条

目的：
从用户角度而言：优化能够让页面加载得更快、对用户的操作响应的更及时。能够给用户提供更为友好的体验；
从服务商角度而言：优化能够减少页面的请求数，或者减小请求所占的带宽，能够节省可观的资源；

方案措施：
- 减少页面中的HTTP的请求数；(不必要的请求或可以合并的请求可以剔除掉)
- css外联样式放在head部，js脚本文件放在body中底部
- 图片较多时，采用懒加载，按需请求，
- 采用事件代理的形式绑定来实现子元素的事件调用
- 防抖和节流函数的运用；对于搜索功能，采用防抖函数控制；对于滚动条监听等采用节流函数来控制    
- js/css/图片等文件的压缩处理
- 采用精灵图展示字体图标等小图：利用background-position的属性来展示在页面
- 常用的插件js采用cdn的形式引入

==有关Vue2的性能优化==

部分优化对vue3同样适用，具体可自行区分

Vue性能优化方法？
●路由懒加载 ：() => import('./Foo.vue')
●keep-alive缓存页面：包裹路由组件即可:router-view
●使用v-show复用DOM：减少页面重排带来的页面显示问题
●v-for 遍历避免同时使用 v-if，采用计算属性computed来提前处理
●长列表性能优化
●事件的销毁:定时器的使用应及时销毁~
●图片懒加载：vue-lazyload插件
●第三方插件按需引入：require方式引入
●无状态的组件标记为函数式组件
●子组件分割：对应的功能性可分离的组件封装成可调用的组件
●变量本地化:即尽量将页面总的属性计算在js中处理赋值给单一变量使用
-----------------对应的代码如下：----------------------
1. 路由懒加载
 const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue') }
  ]
2. keep-alive缓存页面☟
 <template>
 <div id="app">
  <keep-alive><router-view/></keep-alive>
 </div>

3. 使用v-show复用DOM，减少页面的重排，优化页面展示速度
<template>
 <div id="app">
    <div v-show="isShow"></div>
 </div>
</template>
4. v-for 遍历避免同时使用 v-if (先计算属性处理要过滤的东西,遍历新数组结构)
5. 长列表优化方案---https://blog.csdn.net/weixin_46396187/article/details/107928838
   ① 做分页处理，首页默认展示第一页数据，滚动加载，这也是一种方案
   ② 使用vue-virtual-scroller插件，只渲染可视区的 dom 节点，其余不可见的数据卷起来，只会渲染可视区域的 dom 节点，提高渲染性能及流畅性
   ③ 使用无限滚动的方式来展示：比如elementUI中的无限滚动组件：InfiniteScroll 无限滚动
7. 比如定时器创建时即生命全局变量，在销毁beforeDestory周期中销毁对应的定时器；
8. [图片懒加载，采用vue-lazyload插件全局引入，来实现图片的实时加载，配置好后直接将src属性改为v-lazy，后面属性值仍为url地址即可](https://www.npmjs.com/package/vue-lazyload)
9.  无状态的组件标记为函数式组件：template上加上属性 functional
<template functional>
    <div>
       <div v-if="props.value" class="on"></div>
    <div>
</template>