前端性能检测

╰+攻爆jí腚メ 2022-10-23 04:51 130阅读 0赞

翻一翻《全栈性能测试性能宝典》回忆了以前httpwatch好像以前用到过，文章介绍了YSlow，但这个功能已经看不到了。我用的是`PageSpeed Insights`，这个插件只有chrome浏览器中支持.  
输入你的网址就可以，评估出优化项并能给出建议，挺好。  
![1][]  
下面的前端性能优化来自yahoo的网站优化的34条黄金法则。

<table> 
 <thead> 
  <tr> 
   <th>主题</th> 
   <th>法则</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>内容类</td> 
   <td>1.减少http请求</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>2.减少DNS查找</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>3.避免跳转</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>4.缓存ajax</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>5.延迟加载</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>6.提前加载</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>7.减少dom元素数量</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>8.用域名划分页面内容</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>9.减少frame</td> 
  </tr> 
  <tr> 
   <td>内容类</td> 
   <td>10.避免404错误</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>1.使用cdn</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>2.为文件头制定expires或cache-control</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>3.gzip压缩网页</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>4.配置实体标签</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>5.尽早刷新输出缓冲</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>6.使用get完成ajax请求</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>7.减少cookie体积</td> 
  </tr> 
  <tr> 
   <td>服务器类与cookie类</td> 
   <td>8.对于页面内容使用无cookie域名</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>1.把脚本置于页面底部</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>2.使用外部javascipt和css</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>3.削减javaascript和css</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>4.剔除重复脚本</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>5.减少dom访问</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>6.开发智能事件处理程序</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>7.把样式表置于底部</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>8.避免使用css表达式</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>9.使用外部javascript和css</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>10.用户代理@import</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>11.避免使用滤镜</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>12.优化图像</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>13.优化css sprites</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>14.不要在html中缩放图像</td> 
  </tr> 
  <tr> 
   <td>javascript、css、图片类</td> 
   <td>16.favicon.ico要小而且可缓存</td> 
  </tr> 
  <tr> 
   <td>移动应用类</td> 
   <td>1.保持单小内容小于25KB</td> 
  </tr> 
  <tr> 
   <td>移动应用类</td> 
   <td>2.打包组件成复合文本</td> 
  </tr> 
 </tbody> 
</table>

[1]: /images/20221022/28eb2c3be03749da86b60dc5cefcc836.png