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

前端性能优化02

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

性能监控 Performance

放到控制台执行
performance.getEntriesByType(“navigation”)

节流、防抖

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

渲染过程，首先基于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
• 打包组件成复合文本