前端页面性能优化方式

# 一、调试工具

# 1、Network

这里可以看到资源加载详情，初步评估影响页面性能的因素。鼠标右键可以自定义选项卡，页面底部是当前加载资源的一个概览。DOMContentLoaded DOM渲染完成的时间，Load：当前页面所有资源加载完成的时间

思考：如何判断哪些资源对当前页面加载无用，做对应优化？

shift + cmd + P 调出控制台的扩展工具，添加规则

监控页面性能变化

# 瀑布流waterfal

Queueing 浏览器将资源放入队列时间
Stalled 因放入队列时间而发生的停滞时间
DNS Lookup DNS解析时间
Initial connection 建立HTTP连接的时间
SSL 浏览器与服务器建立安全性连接的时间
TTFB 等待服务端返回数据的时间
Content Download 浏览器下载资源的时间

# 2、Lighthouse

First Contentful Paint 首屏渲染时间，1s以内绿色
Speed Index 速度指数，4s以内绿色
Time to Interactive 到页面可交换的时间

根据chrome的一些策略自动对网站做一个质量评估，并且会给出一些优化的建议

# 3、Peformance

对网站最专业的分析

# 4、webPageTest

可以模拟不同场景下访问的情况，比如模拟不同浏览器、不同国家等等，在线测试地址：webPageTest

# 5、资源打包分析

# webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8889,
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }),
  ]
}

// package.json
"analyz": "NODE_ENV=production npm_config_report=true npm run build"

@前端进阶之旅: 代码已经复制到剪贴板

# 开启source-map

webpack.config.js

module.exports = {
    mode: 'production',
    devtool: 'hidden-source-map',
}

@前端进阶之旅: 代码已经复制到剪贴板

package.json

"analyze": "source-map-explorer 'build/*.js'",

@前端进阶之旅: 代码已经复制到剪贴板

npm run analyze

# 二、WEB API

工欲善其事，必先利其器。浏览器提供的一些分析API至关重要

# 1、监听视窗激活状态

// 窗口激活状态监听
let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
    vEvent = 'webkitvisibilitychange';
}

function visibilityChanged() {
    if (document.hidden || document.webkitHidden) {
        document.title = '客官，别走啊~'
        console.log("Web page is hidden.")
    } else {
        document.title = '客官，你又回来了呢~'
        console.log("Web page is visible.")
    }
}

document.addEventListener(vEvent, visibilityChanged, false);

@前端进阶之旅: 代码已经复制到剪贴板

其实有很多隐藏的api，这里大家有兴趣的可以去试试看：

# 2、观察长任务（performance 中Task）

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

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

@前端进阶之旅: 代码已经复制到剪贴板

# 3、监听网络变化

网络变化时给用户反馈网络问题，有时候看直播的时候自己的网络卡顿，直播平台也会提醒你或者自动给你切换清晰度

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

@前端进阶之旅: 代码已经复制到剪贴板

# 4、计算DOMContentLoaded时间

window.addEventListener('DOMContentLoaded', (event) => {
    let timing = performance.getEntriesByType('navigation')[0];
    console.log(timing.domInteractive);
    console.log(timing.fetchStart);
    let diff = timing.domInteractive - timing.fetchStart;
    console.log("TTI: " + diff);
})

@前端进阶之旅: 代码已经复制到剪贴板

# 5、更多计算规则

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时:loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart

# 三、雅虎军规

关于雅虎军规，你知道的有多少条，平时写用到的又有哪些？针对以下规则，我们可以做很多优化工作

# 1、减少cookie传输

cookie传输会造成带宽浪费，可以：

减少cookie中存储的东西
静态资源不需要cookie，可以采用其他的域名，不会主动带上cookie

# 2、避免过多的回流与重绘

连续触发页面回流操作

  let cards = document.getElementsByClassName("MuiPaper-rounded");
  const update = (timestamp) => {
    for (let i = 0; i <cards.length; i++) {
      let top = cards[i].offsetTop;
      cards[i].style.width = ((Math.sin(cards[i].offsetTop + timestamp / 100 + 1) * 500) + 'px')
    }
    window.requestAnimationFrame(update)
  }
  update(1000);

@前端进阶之旅: 代码已经复制到剪贴板

看下效果，很明显的卡顿

performance分析结果，load事件之后存在大量的回流，并且chrome都给标记了红色

使用fastDom进行优化，将对dom的读和写分离，合并

let cards = document.getElementsByClassName("MuiPaper-rounded");
  const update = (timestamp) => {
    for (let i = 0; i < cards.length; i++) {
      fastdom.measure(() => {
        let top = cards[i].offsetTop;
        fastdom.mutate(() => {
          cards[i].style.width =
            Math.sin(top + timestamp / 100 + 1) * 500 + "px";
        });
      });
    }
    window.requestAnimationFrame(update)
  }
  update(1000);

@前端进阶之旅: 代码已经复制到剪贴板

performance分析结果，load事件之后也没有了那么多的红色标记

感兴趣的可以去了解一下fastDom：github fastdom 在线预览：fastdom demo

关于任务拆分与组合的思想，react fiber架构做的很牛逼，有兴趣的可以去了解一下调度算法在fiber中的实践

# 四、压缩

# 1、Gzip

开启方式可参考：nginx开启gzip

还有一种方式：打包的时候生成gz文件，上传到服务器端，这样就不需要nginx来压缩了，可以降低服务器压力。可参考：gzip压缩文件&webPack配置Compression-webpack-plugin

# 2、服务端压缩

server.js

package.json

"start": "npm run build && node server.js",

@前端进阶之旅: 代码已经复制到剪贴板

# 3、JavaScript、Css、Html压缩

工程化项目中直接使用对应的插件即可，webpack的主要有下面三个：

UglifyJS
webpack-parallel-uglify-plugin
terser-webpack-plugin

html压缩可以用HtmlWebpackPlugin，单页项目就一个index.html,性能提升微乎其微~

# 一、调试工具

# 1、Network

思考：如何判断哪些资源对当前页面加载无用，做对应优化？

shift + cmd + P 调出控制台的扩展工具，添加规则

监控页面性能变化

# 瀑布流waterfal

Queueing 浏览器将资源放入队列时间
Stalled 因放入队列时间而发生的停滞时间
DNS Lookup DNS解析时间
Initial connection 建立HTTP连接的时间
SSL 浏览器与服务器建立安全性连接的时间
TTFB 等待服务端返回数据的时间
Content Download 浏览器下载资源的时间

# 2、Lighthouse

First Contentful Paint 首屏渲染时间，1s以内绿色
Speed Index 速度指数，4s以内绿色
Time to Interactive 到页面可交换的时间

根据chrome的一些策略自动对网站做一个质量评估，并且会给出一些优化的建议

# 3、Peformance

对网站最专业的分析

# 4、webPageTest

可以模拟不同场景下访问的情况，比如模拟不同浏览器、不同国家等等，在线测试地址：webPageTest

# 5、资源打包分析

# webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer
// webpack.config.js 文件
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8889,
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }),
  ]
}

// package.json
"analyz": "NODE_ENV=production npm_config_report=true npm run build"

@前端进阶之旅: 代码已经复制到剪贴板

# 开启source-map

webpack.config.js

module.exports = {
    mode: 'production',
    devtool: 'hidden-source-map',
}

@前端进阶之旅: 代码已经复制到剪贴板

package.json

"analyze": "source-map-explorer 'build/*.js'",

@前端进阶之旅: 代码已经复制到剪贴板

npm run analyze

# 二、WEB API

工欲善其事，必先利其器。浏览器提供的一些分析API至关重要

# 1、监听视窗激活状态

// 窗口激活状态监听
let vEvent = 'visibilitychange';
if (document.webkitHidden != undefined) {
    vEvent = 'webkitvisibilitychange';
}

function visibilityChanged() {
    if (document.hidden || document.webkitHidden) {
        document.title = '客官，别走啊~'
        console.log("Web page is hidden.")
    } else {
        document.title = '客官，你又回来了呢~'
        console.log("Web page is visible.")
    }
}

document.addEventListener(vEvent, visibilityChanged, false);

@前端进阶之旅: 代码已经复制到剪贴板

其实有很多隐藏的api，这里大家有兴趣的可以去试试看：

# 2、观察长任务（performance 中Task）

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

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

@前端进阶之旅: 代码已经复制到剪贴板

# 3、监听网络变化

网络变化时给用户反馈网络问题，有时候看直播的时候自己的网络卡顿，直播平台也会提醒你或者自动给你切换清晰度

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
var type = connection.effectiveType;

function updateConnectionStatus() {
  console.log("Connection type changed from " + type + " to " + connection.effectiveType);
  type = connection.effectiveType;
}

connection.addEventListener('change', updateConnectionStatus);

@前端进阶之旅: 代码已经复制到剪贴板

# 4、计算DOMContentLoaded时间

window.addEventListener('DOMContentLoaded', (event) => {
    let timing = performance.getEntriesByType('navigation')[0];
    console.log(timing.domInteractive);
    console.log(timing.fetchStart);
    let diff = timing.domInteractive - timing.fetchStart;
    console.log("TTI: " + diff);
})

@前端进阶之旅: 代码已经复制到剪贴板

# 5、更多计算规则

DNS 解析耗时: domainLookupEnd - domainLookupStart
TCP 连接耗时: connectEnd - connectStart
SSL 安全连接耗时: connectEnd - secureConnectionStart
网络请求耗时 (TTFB): responseStart - requestStart
数据传输耗时: responseEnd - responseStart
DOM 解析耗时: domInteractive - responseEnd
资源加载耗时:loadEventStart - domContentLoadedEventEnd
First Byte时间: responseStart - domainLookupStart
白屏时间: responseEnd - fetchStart
首次可交互时间: domInteractive - fetchStart
DOM Ready 时间: domContentLoadEventEnd - fetchStart
页面完全加载时间: loadEventStart - fetchStart
http 头部大小： transferSize - encodedBodySize
重定向次数：performance.navigation.redirectCount
重定向耗时: redirectEnd - redirectStart

# 三、雅虎军规

关于雅虎军规，你知道的有多少条，平时写用到的又有哪些？针对以下规则，我们可以做很多优化工作

# 1、减少cookie传输

cookie传输会造成带宽浪费，可以：

减少cookie中存储的东西
静态资源不需要cookie，可以采用其他的域名，不会主动带上cookie

# 2、避免过多的回流与重绘

连续触发页面回流操作

  let cards = document.getElementsByClassName("MuiPaper-rounded");
  const update = (timestamp) => {
    for (let i = 0; i <cards.length; i++) {
      let top = cards[i].offsetTop;
      cards[i].style.width = ((Math.sin(cards[i].offsetTop + timestamp / 100 + 1) * 500) + 'px')
    }
    window.requestAnimationFrame(update)
  }
  update(1000);

@前端进阶之旅: 代码已经复制到剪贴板

看下效果，很明显的卡顿

performance分析结果，load事件之后存在大量的回流，并且chrome都给标记了红色

使用fastDom进行优化，将对dom的读和写分离，合并

let cards = document.getElementsByClassName("MuiPaper-rounded");
  const update = (timestamp) => {
    for (let i = 0; i < cards.length; i++) {
      fastdom.measure(() => {
        let top = cards[i].offsetTop;
        fastdom.mutate(() => {
          cards[i].style.width =
            Math.sin(top + timestamp / 100 + 1) * 500 + "px";
        });
      });
    }
    window.requestAnimationFrame(update)
  }
  update(1000);

@前端进阶之旅: 代码已经复制到剪贴板

performance分析结果，load事件之后也没有了那么多的红色标记

感兴趣的可以去了解一下fastDom：github fastdom 在线预览：fastdom demo

关于任务拆分与组合的思想，react fiber架构做的很牛逼，有兴趣的可以去了解一下调度算法在fiber中的实践

# 四、压缩

# 1、Gzip

开启方式可参考：nginx开启gzip

还有一种方式：打包的时候生成gz文件，上传到服务器端，这样就不需要nginx来压缩了，可以降低服务器压力。可参考：gzip压缩文件&webPack配置Compression-webpack-plugin

# 2、服务端压缩

server.js

package.json

"start": "npm run build && node server.js",

@前端进阶之旅: 代码已经复制到剪贴板

# 3、JavaScript、Css、Html压缩

工程化项目中直接使用对应的插件即可，webpack的主要有下面三个：

UglifyJS
webpack-parallel-uglify-plugin
terser-webpack-plugin

html压缩可以用HtmlWebpackPlugin，单页项目就一个index.html,性能提升微乎其微~