# 为什什么要进⾏行行性能优化?

57%的⽤用户更更在乎⽹网⻚页在3秒内是否完成加载。 52%的在线⽤用户认为⽹网⻚页打开速度影响到他们对⽹网站的忠实度。 每慢1秒造成⻚页⾯面 PV降低11%，⽤用户满意度也随之降低降低16%。 近半数移动⽤用户因为在10秒内仍未打开⻚页⾯面从⽽而放弃。

# 性能优化学徒⼯工

# localstorage的使用

https://github.com/addyosmani/basket.js 1. obj{ a.js : 'a.xxxx5.js' }

2. active.js

3. a.js

4. active('a.js')

5. localStorage['a.js'] -> script src = 'a.js'(没有存过) script src = 'a.js' -> localStorage['a.js'] = 'a.xxxx5.js' -> localStorage['a.xxxx5.js'] = 'a.js详细内容

                    -> (有存过) localStorage['a.js'] == obj['a.js']
                    -> eval(localStorage['a.xxxx5.js'])
                    -> 请求并重新缓存
   

5M 2.5M很多机型会变的很卡

异步50M Web SQL关系型数据库 IndexedDB非关系型数据库(安卓4.4以上支持)

# 缓存优先级

etag / if-none-match 和 expires区别 一个是强缓 并且expires时间不够精缺 存在10几毫秒误差

# http

http2出现也就可以放弃打包压缩那一步了

# 渲染中性能优化

Composite Layers 合成层 Update Layer Tree 更新层树 Recalculate Style 重新计算样式 Layout 重排 Paint 重绘

# 重绘重排

重绘重排 网页整体渲染过程 1、获取dom分隔层 2、根据每层节点结算样式结果Recalculate Style 3、为每个节点生成图形和位置Layout 4、将每个节点回执填充到当前帧的位置中Paint 5、将图层上传的到GPU gpu bitmap专门处理图像 6、根据符合要求的多个图层合并生成图像 给你看Composite Layers

什么情况下分层 根元素(页面为什么开始会绿)、position、transform、半透明、滤镜、canvas、video、overflow gpu直接参与 css3d、video、webglk、transform、滤镜、硬件加速 重排引起重绘，重绘不一定引起重排 box-show color 重排 挤一挤让一让、添加删除、元素位置变化、元素尺寸变化、页面初始化、读取一些属性offset scroll client width 优化 var h1 = $('h1').clientheight; var h1 = $('h1').clientheight; requstAnimationFrame ===> 等到下一帧统一的写统一的读 $('h1').css('height',h1) $('h1').css('height',h1)

# ⻚页⾯面加载性能优化

FP第一个像素点落地 TTI交互时间

    <div class="container">
        <div class="ball" id="ball">ball</div>
    </div>

    const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
            console.log(entry);
        }
    });

    observer.observe({ entryTypes: ['paint'] })

PerformancePaintTiming {name: "first-paint", entryType: "paint", startTime: 16.30499999737367, duration: 0} duration: 0 entryType: "paint" FP name: "first-paint" startTime: 16.30499999737367 proto: PerformancePaintTiming index.html:61 FCP PerformancePaintTiming {name: "first-contentful-paint", entryType: "paint", startTime: 16.315000000759028, duration: 0} duration: 0 entryType: "paint" name: "first-contentful-paint" startTime: 16.315000000759028 proto: PerformancePaintTiming

let arr = [];
for (let i = 0; i < 10000000; i++) {
    arr.push(i)
}

const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.log(entry);
    }
});

observer.observe({ entryTypes: ['longtask'] })

PerformanceLongTaskTiming {attribution: Array(1), name: "self", entryType: "longtask", startTime: 12.879999994765967, duration: 303.82500000996515} attribution: [TaskAttributionTiming] duration: 303.82500000996515 longtask entryType: "longtask" name: "self" startTime: 12.879999994765967 proto: PerformanceLongTaskTiming

# nodejs性能优化