前端性能优化及检测工具

2020-12-20  本文已影响0人  时子释

[TOC]

chrome性能优化检测工具

1.谷歌浏览器工具资源管理工具network查看

右键>save all as HAR with content

  1. Lighthouse 选项卡
  1. show frames per second(FPS) meter
  1. Throttling调整网络吞吐
  1. 在控制台配置自己的资源监控工具

性能优化-加载测量指标

性能优化-响应

性能测量模型-RAIL模型

网站整体测量工具

  1. devtools
  2. lighthouse
  3. webpagetest 自备梯子使用
    webpagetest使用总结

性能优化方案

后台开启网络传输的压缩

审查页面js的运行耗时长性能问题

  1. 打开控制台的performance标签记录页面的加载和操作的快照
  2. 在时间条页面中找到自己的代码块（在Main程序中一般拉到最下面就是自己的代码块啦），然后查看里面耗时较长的函数看一下有啥问题

减少重绘回流，页面抖动（layout trashing）

cord.style.width = cards.offsetTop+1+'px'; // cards.offsetTop引起读取高度触发回流，再赋予高度又触发回流，连续的读写触发强制更新，引起页面抖动

以下会引起回流

  1. 改变窗口大小
  2. font-size大小改变
  3. 增加或者移除样式表
  4. 内容变化（input中输入文字会导致）
  5. 激活CSS伪类（:hover）
  6. 操作class属性，新增或者减少
  7. js操作dom
  8. offset相关属性读取和计算
  9. 设置style的值 ......

fast-dom使用API

// 实现
 fastdom.measure(()=>{
     let top =  cards.offsetTop+1+'px';
     fastdom.mutate(()=>{
         cord.style.width = top; 
     })
 })

减少布局和重绘（repaint）

willchange: transform;

缩短js的解析开销

html优化-html-minifier插件

css优化

contain 属性的主要目的是隔离指定内容的样式、布局和渲染。开发人员可以使用这个 contain 属性来限制指定的DOM元素和它的子元素同页面上其它内容的联系；我们可以把它看做一个iframe。跟iframe很相似，它能建立起一个边界，产生一个新的根布局；保证了它和它的子元素的DOM变化不会触发父元素重新布局、渲染等。

.a li {
    padding:10px;
    contain:layout;
}

资源压缩与合并

图片优化

字体优化

font-display:block; // 阻塞3s不显示，直到下载完成显示
font-display:swap; // 先用默认字体，然后字体下载完成再更换
font-display:optional; // 移动端解决方案， 加载下载字体，如果一定时间后显示不出来替换成系统字体，不再改变成加载字体

babel7优化配置

    "useBuiltIns":"usage"

    "targets":{
        "browsers":[">0.25%"] //这个百分比是保留浏览器兼容版本列表
    }

webpack配置

// webpack.config.js
module:{
    noParse:/lodash/, //忽略lodash库，不进行递归解析
}


optimization:{
    splitChunks:{
        cacheGrounps:{
            vendor: {
                name:'vendor',
                test:/[\\/]node_module[\\/]/,
                minSize:0,
                minChunks:1,
                priority:10,
                chunks:'initial'
            },
            common:{
                name:'common',
                test:/[\\/]src[\\/]/,
                chunks:'all',
                minSize:0,
                minChunks:2,
                
            }
        }
    }
}
  1. 动态加载
// 常规加载
import {add} from './math'
console.log(add(1,2)

// 动态加载
import('./math').then(math=>{
    console.log(math.add(1,2))
})

持久化缓存方案

webpack打包监测和分析的工具

启用Gzip压缩

启用keep alive

http缓存

Service Workers作用

http2

SSR服务端渲染

PS

PerformanceNavigationTiming 浏览器接口

// 获取时间接口
// 在load事件后触发
window.addEventListener('load',(event)=>{
    // 获取可交互时间
    let timing = performance.getEntriesByType('navigation')[0];
    let tti = timing.domInteractive - timing.fetchStart;
    console.log("TTI:"+tti);
})

navigationStart 加载起始时间
redirectStart 重定向开始时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回开始重定向的fetchStart的值。其他情况，则返回0）
redirectEnd 重定向结束时间（如果发生了HTTP重定向，每次重定向都和当前文档同域的话，就返回最后一次重定向接受完数据的时间。其他情况则返回0）
fetchStart 浏览器发起资源请求时，如果有缓存，则返回读取缓存的开始时间
domainLookupStart 查询DNS的开始时间。如果请求没有发起DNS请求，如keep-alive，缓存等，则返回fetchStart
domainLookupEnd 查询DNS的结束时间。如果没有发起DNS请求，同上
connectStart 开始建立TCP请求的时间。如果请求是keep-alive，缓存等，则返回domainLookupEnd
(secureConnectionStart) 如果在进行TLS或SSL，则返回握手时间
connectEnd 完成TCP链接的时间。如果是keep-alive，缓存等，同connectStart
requestStart 发起请求的时间
responseStart 服务器开始响应的时间
domLoading 从图中看是开始渲染dom的时间，具体未知
domInteractive 未知
domContentLoadedEventStart 开始触发DomContentLoadedEvent事件的时间
domContentLoadedEventEnd DomContentLoadedEvent事件结束的时间
domComplete 从图中看是dom渲染完成时间，具体未知
loadEventStart 触发load的时间，如没有则返回0
loadEventEnd load事件执行完的时间，如没有则返回0
unloadEventStart unload事件触发的时间
unloadEventEnd unload事件执行完的时间

检查页面中所有的长任务

let observer = new PerformanceObserver((list)=>{
    for(const entry of list.getEntries()){
    console.log(entry)
}}) 
observer.observe({entryTypes:['longtask']});

检查页面是否可见

这是只有浏览器的行为会触发，如切换页签和最小化

let vEvent = 'visibilitychange';
if(document.webkitHidden != undefined){
    // webkit事件名称
    vEvent = 'webkitvisibilitychange';
}
function visibilityChanged(){
    if(document.hidden || document.webkitHidden){
        console.log("Web page is hidden");
    } else { // 页面可见
        console.log("Web page is visibile");
    }
}
document.addEventListener(vEvent, visibilityChanged,false);

检测网络变化状况

如果网络发生变化，就要加载不同大小的资源来保证网站打开速度流畅

let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
let type = connection.effectiveType;
function updateConnectionStatus() {
   console.log("connection type change from " + type + " to " + connection.effectiveType);
}
connection.addEventListener('change',updateConnectionStatus,false);

浏览器的绘制过程

这里说的是重新计算布局，也就是当使用css或者js进行动画或者crud dom节点时候的过程

js/css > style > layout > paint > composite

v8引擎工作原理

  1. 源码的编译过程 => 抽象语法树 > 字节码bytecode > 机器码
  2. 编译过程会进行优化
  3. 运行时可能发生反优化

    第二，三点，比如数据类型的编译，如果再js代码中循环对一个数组进行函数数字运算，编译过程会将它优化成只有数据类型，不进行类型检测，运行速度会快许多，当参与运算的数组中放入一个字符串的时候，编译过程无法优化，需要每次迭代都进行参数类型验证，运行速度明显下降。
  4. V8优化机制
    • 脚本流 （边下载边解析，比如当一个脚本超过30kb，认为足够大，就单独开一个线程进行解析，不用等所有都下载完成）
    • 字节码缓存 （使用频率高的字节码片段会临时存储，等下次运行从缓存中使用）
    • 懒解析 （函数声明，但是不解析里面的逻辑，等运行时再解析）<i id="懒解析"></i>
  5. tree-shaking

如有问题烦请评论告知，如有喜欢请点个赞哈哈哈

上一篇下一篇

猜你喜欢

热点阅读