前端性能优化02-- 代码执行优化

短命女 2023-06-11 10:24 61阅读 0赞

# 前端性能优化02 #

1.  节流 防抖
2.  重绘 回流
3.  vue react (ssr) 常见优化 代码执行的更少，dom 操作更少
4.  浏览器如何渲染页面
5.  vue源码做过哪些执行层面的优化
6.  雅虎军规

## 性能监控 Performance ##

放到控制台执行  
performance.getEntriesByType(“navigation”)  
![字段说明][20191029175302375.png]

## 节流、防抖 ##

1.  节流，某一段时间只触发一次，避免函数执行次数过多，比如滚动调用图片做懒加载
2.  防抖，每隔一段时间触发一次 最后一个人说了算，比如用户输入

## 重绘 回流 ##

回流：当我们对DOM的修改引发了DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等也会因此收到影响），然后再将计算的结果绘制出来，这个过程就是回流（也叫重排），影响大  
如：窗口、字体大小、增加样式表、内容变化、class属性、offsetWidth、fixed

重绘：当我们对DOM的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需要重新计算元素的几何属性，直接为改元素绘制新的样式（跳过了回流环节）。这个过程叫做重绘。重绘不一定会导致回流，回流一定会导致重绘。

## vue ##

其实我们只要做好异步组件，vue本身已经足后快乐，但是还是有一些可以优化的点。

*  v-if VS v-show  
    初始性能 VS 频繁切换性能
 *  和渲染无关的数据，不要放到data上,直接放this上  
    data也不要嵌套多层
 *  nextTick  
    修改数据的当下，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成后，再统一进行视图更新

this.$nextTick(function(){
        // DOM 更新了
     })

Object.freeze()  
冻结数据 取消setters

## react ##

1.  只传递需要的props  
    不要随便< Component \{…props\}/>
2.  key
3.  无状态组件
4.  pureComponent 自己订阅了shouldComponentUpdate 渲染时机
5.  少在render中绑定事件
6.  redux+reselect data扁平化
7.  长列表优化 react-virtualized  
    长列表优化  
    1、淘宝首页，无限滚动，怎么优化，加载dom过多，低端安卓机就崩了  
    虚拟列表，模拟滚动跳，只保留上下三屏dom， 多于销毁  
    \*\* react-virtualized \*\*  
    只渲染可见的
    
        import {List} from "react-virtualized";
        
          < div  classname="list">
             {this.list.map(this.renderRow.bind(this))}
          </ div>
        
          // 改为
          const listHeight = 600;
          const rowHeight = 50;
          const rowWidth = 800;
        
          // ...
          < div className="list>
             <List
               width={rowWidth}
               height={listHeight}
               rowHeight={rowHeight}
               rowRender={this.renderRow.bind(this)}
               rowCount={this.list.length}
             >
          </ div>
        
          renderRow({index,key,style}){
             return{
                < div key={key} style={style} className="row">
                  < div className="image">
                     < img src={this.list[index].image} alt=""/>
                 </ div>
                 < div className="content">
                   < div>{this.list[index].name}</div>
                   < div>{this.list[index].ntext}</div>
                  </div>
                </div>
             }
          }

## 浏览器渲染 Web Workers ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

渲染过程，首先基于HTML构建一个DOM树，这颗DOM树与CSS解释器解析的CSSDOM相结合，有了布局渲染树，最后浏览器1⃣️这个为蓝本，计算布局并绘制图像，初次渲染完成，之后每个新元素加入这个DOM树中，浏览器会在CSS引擎查遍CSS样式，找到复合的规则应用上去，重新绘制

## dom ##

## css ##

## 算法 ##

vue的dom diff 做了哪些优化

1.  vue 中，使用definePropery实际上是能够知道所有数据的修改，知道哪个数据被修改了，然后直接去修改dom(vue1就是这么做的)
2.  我们自己做的minivue也是这养，每个数据修改，都知道是哪个数据变了，直接修改就行
3.  细腻dom是什么，数据修改后，我们通过dom diff算出哪个数据个给修改了，然后再去修改dom
4.  我们有definePropery为啥还需要虚拟dom

vue1 的问题是什么？  
每个数据都有监听器，watcher太多了，项目庞大之后，尤其冥想，vue2做了这种，watcher只到组件层面，一个组件只有一个watcher，组件内部，使用dom diff

vue的dom diff 和react的比，做了哪些性能优化？  
vue针对web业务的特点，在数组diff的时候，做了几个小优化，在patch中增加了对web数组常用修改的猜测，在diff算法之前

雅虎军规

*  尽量减少HTTP请求个数-需权衡
 *  使用CDN内容分发网络
 *  为文件头制定Expires或Cache-Control，使内容具有缓存性
 *  避免空的src和href
 *  使用gzip压缩内容
 *  把css放到顶部
 *  把js放到底部
 *  避免使用css表达式
 *  把css、js文件放到外部文件中
 *  减少DNS查找次数
 *  精简css、js
 *  避免跳转
 *  删除重复代码js、css
 *  配置ETags
 *  使AJAX可缓存
 *  使用GET来完成AJAX请求
 *  延迟加载
 *  预加载
 *  减少DOM元素个数
 *  根据域名划分页面内容
 *  尽量少的使用iframe
 *  减少cookie的大小
 *  避免404
 *  避免使用滤镜
 *  优化图像
 *  优化css Spirite
 *  不要在html中缩放图像-需权衡
 *  favicon.icon 要小而且可以缓存
 *  保持单个内容小于25k
 *  打包组件成复合文本

[20191029175302375.png]: /images/20230531/28c73363f57344b796c6b7eefefd3c18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: /images/20230531/ae211424486a47f49a0490562087f842.png