【前端】性能优化和分类

本页知识点参考：https://zhuanlan.zhihu.com/p/514222781

1. 加载性能优化

1.1 网站性能优化

content方法：
1）减少HTTP请求：合并文件，CSS精灵，inline Image
2）减少DNS查询：DNS缓存，将资源分布到恰当数量的主机名
3）减少DOM元素数量
server方法
1）使用CDN
2）配置ETag
3）组件使用Gzip压缩
cookie方法：减少cookie大小
css方法
1）样式表放到页面顶部
2）不使用css表达式
3）使用<link>不使用@import
javascript方法
1）脚本放到页面底部
2）将js和css从外部引入
3）压缩javascript和css
4）删除不需要的脚本
5）减少DOM访问
图片
1）优化图片：根据实际颜色选择色深、压缩
① HTTP规范（Hypertext Transfer Protocol）：TCP报文，对
② HTTP报文：HTTP报文主体和Web标准，
③ HTTP通信：Hypertext Transfer Protocol 超文本传输协议。
④ HTTP-Web：
2）优化css精灵：
3）不要在html中拉伸图片
4）隐式转换规则
① undefined, null：==下互相等且自身等
② ==值：只需要值相等，无需类型

③ 值相等，无需
ToNumber(A), ToNumber(B), ToPrimitive(A)
④ HTTP, TCP, 网络接口
```
IP分组
TCP段
```
⑤ 套接字API调用
⑥ 描述

1.2 用过前端性能优化

减少http请求次数：CSS Sprites， JS， CSS源码，图片大小控制合适；网络Gzip，CDN托管，data缓存，图片服务器
前端模板JS+数据：减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果；不用请求，减少请求次数
构建CSSOM树
1. Tokenizing：字符流转为标记流
2. Node根据标记创建节点
3. CSSOM节点创建CSSOM树
根据DOM树和CSSOM树构建
1. Tokenizing：DOM树的根节点遍历节点，不可见节点包括
2. Lexing：词法分析将
3. DOM construction：根据HTML标记关系将对象组成DOM树

解析过程中遇到图片、样式表、js文件，启动下载

构建CSSOM树
1.
2. 灵活的语法，表达能力强

function fn() {
   console.log('我是具名函数')
   console.log('看，我有名字')
   console.log('我的名字叫fn')
}
fn() 
fn()

数据库操作

移动开发平台

使用

js解析如下
1. 浏览器创建Document

1.3 前端静态化

https://blog.csdn.net/xxc_yc/article/details/131570307

1.4 懒加载，虚拟列表（虚拟滚动）和分页

三者都是减少长列表中无用资源的加载，总结如下

-技术-	懒加载	虚拟列表	分页
优点	用户体验好	虚拟列表	能够快速跳转，方便回溯定位
场景	C端产品		B端产品
缺点	不能快速跳转，不方便回溯定位。一定程度上没有解决长列表DOM带来的性能问题		用户体验差；需要后端支持

1.4.1 懒加载

参考：https://blog.csdn.net/muzidigbig/article/details/115376889

概念
即延迟加载，优先加载可视区域的内容、其他部分等进入可视再加载。
使用原因
1. 减少无用资源的加载
2. 提升用户体验
3. 防止加载过多图片而影响其它资源文件的加载
原理
由于图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给 src，这样就实现了图片的按需加载，即懒加载

具体使用：vue-lazyload包
Step 1 安装vue-lazyload

# npm
npm install vue-lazyload --save
# yarn
yarn add vue-lazyload --save

如果yarn中遇到“certificate has expired”错误，则在控制台使用以下命令或者在C:\User\.yarnrc中设置strict-ssl false忽略证书限制

yarn config set "strict-ssl" false -g

Step 2 全局导入
在main.js中使用，以下是Vue的使用方法

import App from './App.vue'
import VueLazyload from 'vue-lazyload'
const app = createApp(App)
app.use(VueLazyload, {
 preload: 1.5, // number：表示lazyload的元素, 距离页面底部距离的百分比。计算值为(preload - 1)
 error: "./asstes/img/lazyLoad/图片ERROR.png", // string：加载失败后图片地址
 loading: "./assets/img/lazyLoad/图片LOADING.jpg", // string: 加载时图片地址
 attempt: 1, // number：加载错误后最大尝试次数
 // listenEvents['scroll','wheel','mousewheel','resize','animationend','	transitionend','touchmove'],  //想让vue监听的事件
})

Step 3 直接使用在img标签中使用 v-lazy，如果后端要使用分页则必须加入:key

<img v-lazy="videoOverview.imgUrl" :key="videoOverview.imgUrl" class="video-content"/>

原生JS实现
1）
window.innerHeight：浏览器可视区高度
document.body.scrollTop || document.documentElement.scrollTop：浏览器滚动的区域
imgs.offsetTop：
图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop

具体实现的HTML部分

<img src="loading.gif"  data-src="pic.png">
<img src="loading.gif"  data-src="pic.png">

具体实现的JS部分

function lazyLoad(){
 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 var winHeight= window.innerHeight;
 for(var i=0;i < imgs.length;i++){
     if(imgs[i].offsetTop < scrollTop + winHeight ){
         imgs[i].src = imgs[i].getAttribute('data-src');
     }
 }
}
// window.onscroll是个事件处理器，指定滚动页面时执行的函数，lazyLoad是事件发生时调用的
window.onscroll = lazyLoad

2）
3）

1.3.2 虚拟列表

概念
是对于列表形态数据展示的一种按需渲染，以提高无限滚动的性能
和懒加载的区别
1. 懒加载的应用场景偏向于网络资源请求，解决网络资源请求过多时，造成的网站响应时间过长的问题
2. 虚拟列表是对长列表渲染的一种优化，解决大量数据渲染时，造成的渲染性能瓶颈的问题
原理
根据容器元素的高度 clientHeight 以及列表项元素的高度 offsetHeight 来显示长列表数据中的某一个部分，而不是去完整地渲染整个长列表。

第三方库

vue-virtual-scroll包：目前发现只能在vue2的export default情况下使用，vue3会遇见很多错误（官网）
Step 1 安装

yarn add vue-virtual-scroll

Step 2 全局导入
在main.js中添加以下代码

import App from './App.vue'
import VueVirtualScroller from "vue-virtual-scroller"
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
app.use(VueVirtualScroller)

Step 3 在页面中使用

<virtual-scroller :items="items" :item-height="40" class="scroll-container">
<template slot-scope="{ item }">
   <div class="list-item">{{ item }}</div>
</template>
</virtual-scroller>

vue-virtual-scroll-list包：使用vue-virtual-scroll-list

实现
1. 使用React
  （怎么使用React+TS+IntersectionObserver实现视频懒加载和自动播放功能）
  
  https://www.27ka.cn/134728.html
  （React虚拟滚动的三种方法）
  https://blog.csdn.net/xgangzai/article/details/131179466
2. 使用Vue
  1. 相信

浏览器的5种观察模式：https://zhuanlan.zhihu.com/p/482144072
《IntersectionObserver》
https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0
《交叉观察器API》
https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API
《什么是Intersection Observer》
https://zhuanlan.zhihu.com/p/554549262

1.3.3 分页

2. 渲染性能优化

2.1 防抖（Throttle）和节流（Debounce）

用于节省性能，均是基于DOM事件限制正在执行的JS数量的方法

2.1.1 概念

防抖：强制函数再次被调用和调用间需相隔一定时间，如“仅当100ms过去没被调用才执行”
节流：强制执行一个函数在一段时间内可以被调用的最大次数。如“最多每 100 毫秒执行一次此函数”

2.1.2 区别

2.1.3 调用

防抖Throttle
节流Debounce

2.1.4 手撕

防抖Throttle

function throttle(func, play){
    // 定义计时器timer
    let timer = null
    // 防抖核心：每次触发事件计时器会重新计时(递归调用，timer)
    return function(){
        const that = this
        const args = arguments
        // 开始重置timer

    }
}