前端页面性能优化方式

# 一、调试工具

# 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,
          ge