文档章节

前端利器,6 款开源 Web 性能优化辅助工具推荐

编辑部的故事
 编辑部的故事
发布于 02/19 08:13
字数 769
阅读 2833
收藏 147

Web 性能优化是一个老生常谈的话题,也是前端页面开发十分重要的部分。当页面加载速度越慢,用户流失的概率就越大,性能和交互直接影响用户体验。下面推荐几款 Web 性能优化辅助工具推荐,希望能对大家有所帮助。

1、Lighthouse

Lighthouse 是 Google 开源的一个自动化工具,用于改进网络应用的质量。你可以将其作为一个 Chrome 扩展程序运行,或从命令行运行。 当为 Lighthouse 提供一个要审查的网址,它将针对此页面运行一连串的测试,然后生成一个有关页面性能的报告。可以参考失败的测试,看看可以采取哪些措施来改进应用。

Chrom 扩展则会把报告以非常人性化的图形界面展示给你。

2、Speed Racer

SpeedRacer 是一款性能测试工具,它在 Chrome 中运行脚本,并生成详细的性能报告。

SpeedRacer 是直接借助浏览器来实际测试性能的工具,在实际工作中,可以与其它模拟用户访问流量来评估性能的工具配合使用。

3、Yellow Lab Tools

Yellow Lab Tools 是一款 Web 性能及前端质量测试工具。与其他工具不同的是,它有一些在其他工具上无法看到的独特功能,例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。

Yellow Lab Tools 偏向于一个发现不良实践的工具,会综合页面权重、请求数、DOM、错误的 Javascript、错误的 CSS 等方面取得一个评分。并显示出在加载页面的过程中,DOM 是如何相互影响。

4、Web Tracing Framework

Web Tracing Framework 也是 Google 推出的一组用于跟踪和调查复杂 Web 应用的库、工具和可视化工具合集。它可以帮助发现性能问题,跟踪回归,并构建流畅的 60fps Web 应用。能让你花更少时间来测试代码即可。

5、grunt-perfbudget

grunt-perfbudget 是一款用于评估性能的 Grunt task,它使用 WebPagetest 的公有或私有实例在特定的 URL 进行测试,并将测试结果和你预期的性能期望做比较。如果小于预期,那么这个 task 就顺利完成了,如果超过了预期的性能期望,那么就会报告失败,并帮助你分析超出预期的原因。

perfbudget: {
  default: {
    options: {
      url: 'http://google.com',
      key: 'API_KEY_HERE',
      output: 'wpt-results.json'
    }
  }
}

6、Sitespeed.io

Sitespeed.io 是一组基于最佳实践以及一些加载时序等量化标准的开源工具,用以帮助开发者分析网页的加载速度和渲染性能。

Sitespeed.io 从开发者的站点收集多个页面的数据,并根据最佳实践等规则来分析这些网页,然后将结果以 HTML 的形式输出,或者以数值的形式发送到 Graphite

© 著作权归作者所有

共有 人打赏支持
编辑部的故事

编辑部的故事

粉丝 1204
博文 252
码字总数 445830
作品 0
深圳
运营/编辑
私信 提问
加载中

评论(3)

张伟斌卍
张伟斌卍
...这就尴尬了
amita
amita
最大的一个警告是 jquery 被加载了 4 次 😄
amita
amita
我用 Yellow Lab Tools 测了下这个页面,得分 46/100,属于C等 😈
[Share]2008年国外最佳Web设计/开发技巧、脚本及资源总结

今天是2008年的最后一天,彬Go为大家奉上今年的最后大餐,这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实 例及工具资源等,有一些是曾经彬Go发表过的翻译文...

吞吞吐吐的
2017/10/05
0
0
前端每周清单半年盘点之 PWA 篇

前端每周清单专注前端领域内容,以对外文资料的搜集为主,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公...

王下邀月熊
2017/08/29
0
0
实用高效,27款腾讯热门开源项目推荐

腾讯作为互联网行业的一大巨头,一直都不吝啬将好的技术开放,与广大开发者共享,未来也将推出VR开放平台和AI技术。腾讯在全球合作伙伴大会披露了未来五年的发展思路,在技术共享方面,腾讯希...

达尔文
2016/10/19
13.9K
29
匠以利器为助---移动设计师应该知道的8款利器

导读: 不说废话,下面的8款软件首先都是目前非常优秀的移动开发工具,我认为不管是移动开发、交互设计、UI都应该知道,其实是应该会用,善用。 1。Sketch矢量绘图软件 $79.99 是一款专业矢量...

半饱即好
2014/06/05
0
0
2016 Web 开发资源工具大搜罗

 原文链接: 100+ Awesome Web Development Tools and Resources Web的迅猛发展对于开发者来说既是一件好事也是一件坏事。不断紧跟潮流学习新的技术、编程语言、适应变化听起来就很令人兴奋...

两味真火
2016/10/03
5.7K
13

没有更多内容

加载失败,请刷新页面

加载更多

EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
8
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
14
0
IC-CAD Methodology知识图谱

CAD (Computer Aided Design),计算机辅助设计,指利用计算机及其图形设备帮助设计人员进行设计工作,这个定义同样可以用来近似描述IC公司CAD工程师这个岗位的工作。 早期IC公司的CAD岗位最初...

李艳青1987
今天
14
0
CompletableFuture get方法一直阻塞或抛出TimeoutException

问题描述 最近刚刚上线的服务突然抛出大量的TimeoutException,查询后发现是使用了CompletableFuture,并且在执行future.get(5, TimeUnit.SECONDS);时抛出了TimeoutException异常,导致接口响...

xiaolyuh
今天
8
0
dubbo 搭建与使用

官网:http://dubbo.apache.org/en-us/ 一,安装监控中心(可以不安装) admin管理控制台,monitor监控中心 下载 bubbo ops 这个是新版的,需要node.js环境,我没有就用老版的了...

小兵胖胖
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部