【前端】性能优化和分类

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

1. 加载性能优化

1.1 网站性能优化

1. content方法：
   1）减少HTTP请求：合并文件，CSS精灵，inline Image
   2）减少DNS查询：DNS缓存，将资源分布到恰当数量的主机名
   3）减少DOM元素数量

2. server方法
   1）使用CDN
   2）配置ETag
   3）组件使用Gzip压缩

3. cookie方法：减少cookie大小

4. css方法
   1）样式表放到页面顶部
   2）不使用css表达式
   3）使用<link>不使用@import

5. javascript方法
   1）脚本放到页面底部
   2）将js和css从外部引入
   3）压缩javascript和css
   4）删除不需要的脚本
   5）减少DOM访问

6. 图片
   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 用过前端性能优化

1. 减少http请求次数：CSS Sprites， JS， CSS源码，图片大小控制合适；网络Gzip，CDN托管，data缓存，图片服务器
2. 前端模板JS+数据：减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果；不用请求，减少请求次数
3. 构建CSSOM树
   1. Tokenizing：字符流转为标记流
   2. Node根据标记创建节点
   3. CSSOM节点创建CSSOM树
4. 根据DOM树和CSSOM树构建
   1. Tokenizing：DOM树的根节点遍历节点，不可见节点包括
   2. Lexing：词法分析将
   3. DOM construction：根据HTML标记关系将对象组成DOM树
5. 解析过程中遇到图片、样式表、js文件，启动下载
   1. 构建CSSOM树
      1.
      2. 灵活的语法，表达能力强

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

      4. 数据库操作
      5. 移动开发平台
   2. 使用
6. 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. 使用原因

   1. 减少无用资源的加载
   2. 提升用户体验
   3. 防止加载过多图片而影响其它资源文件的加载

3. 原理
   由于图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会请求图片资源。根据这个原理，我们使用 HTML5 的 data-xxx 属性来储存图片的路径，在需要加载图片的时候，将 data-xxx 中图片的路径赋值给 src，这样就实现了图片的按需加载，即懒加载

4. 具体使用：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"/>
   

5. 原生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. 和懒加载的区别

   1. 懒加载的应用场景偏向于网络资源请求，解决网络资源请求过多时，造成的网站响应时间过长的问题
   2. 虚拟列表是对长列表渲染的一种优化，解决大量数据渲染时，造成的渲染性能瓶颈的问题

3. 原理
   根据容器元素的高度 clientHeight 以及列表项元素的高度 offsetHeight 来显示长列表数据中的某一个部分，而不是去完整地渲染整个长列表。

   

4. 第三方库

   1. 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>
      

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

5. 实现

   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 概念

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

2.1.2 区别

1. 2

2.1.3 调用

1. 防抖Throttle

2. 节流Debounce

2.1.4 手撕

1. 防抖Throttle

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

2. 节流Debounce

3. 1

3. 浏览器安全

3.1 XSS攻击：代码注入攻击

1. XSS是跨站脚本攻击。攻击者通过注入恶意脚本，用户浏览器上运行，从而盗取用户的信息如cookie等
2. 储存性
3. 反射
4. DOM：前端的漏洞，

3.2 CSRF：跨站请求伪造攻击

用户进入一个第三方网站

3.3 1

3.4 浏览器同源策略（跨域）

同源策略：protocol(协议)，domain（域名），port（端口）网页只能与同源的进行交互

1. cors：服务断配置cors
2. jsop：通过<script>标签src，发送带有callback参数的get，
3. nginx：配置
4. 本地开启代理服务器：React Vue都有对应的配置

4. vue中key的原理

3. 1
4. 1

5. Vue常用的修饰符有哪些，应用场景？

1. 1
2. 1
3. 1
4. 1