>

Web开发的各种性能工具,值得Web开发人员收藏的

- 编辑:澳门新葡亰平台游戏 -

Web开发的各种性能工具,值得Web开发人员收藏的

值得收藏!Web开发的各种性能工具

2015/06/22 · HTML5 · 性能

原文出处: Robin Rendle   译文出处:南北   

嗨,各位,又到了周末总结时间!得益于大量的 Grunt 和 Gulp 插件,我们可以轻松实现网站数据的可视化,虽然深入理解这些工具还比较困难,但分门别类的将它们列出来,也是很有帮助的。

  HTML5 正在迅速改变创建和管理网站的方式。HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5 开发各种网站和应用程序。

HTML5已经成为当今世界的一个必然组成部分。由于World Wide Web万维网是使用超文本标记语言来架构和呈现的,于是HTML5成为了最流行的编程语言之一。随着网络的不断扩张,Web开发人员非常有必要拥有最新的HTML5工具,用于创建动态和交互式的Web应用程序和网页。下面这些就是你应该熟悉且掌握的HTML5工具。值得Web开发人员收藏的8款新HTML5工具

内容分发网络(CDN)

CDN 可以帮你把网站的资源分发到世界各地,有助于提高网站的响应速度,当然,这对于那些特殊地区的用户是收效甚微的。

  本文收集的20款优秀的 HTML5 Web 应用程序,值得添加到您的 HTML5 的工具箱中,他们能够帮助你开发前端项目更快,更容易。

图片 1

CloudFlare

CloudFlare 的强大之处在于它可以成为你的 DNS 服务器(CDN 只是它所有服务的一个组成部分),这样对你的网站发起的所有请求都会经过它。

CloudFlare 的 CDN 在过去十五年的设计和发展中,并没有一味的守旧和固步自封。我们的专利技术中充分利用了最新的技术进步,包括并不限于硬件、web 服务器和网络路由。换言之,我们创新的建设了下一代的 CDN。新的 CDN 配置简单、价格低廉,其性能也一定比你使用过的任何传统 CDN 都要优秀。

您可能感兴趣的相关文章

1、Google Web Toolkit

MaxCDN

CSS-Tricks 当前就在使用 MaxCDN 托管所有的静态资源。它可以无缝地融合 WordPres 和 W3 的所有缓存资源,所以我们无需做什么特别处理,即可将资源移入 CDN,并能保证链接的准确性。

图片 2

对于一个博客来说,考虑到其中的大文件主要是 JavaScript、CSS 和图片,而不是视频等类型,这贷款占用的可真多。

我们的 CDN 服务同样是一个网站加速器和实时控制中心。创建它,就是为了让网站的用户和运维都能从下一代 CDN 中获得最大收益。

  • 推荐10款非常优秀的 HTML5 开发工具
  • 2012年最经典的10款 HTML5 游戏集锦
  • 35款非常优秀的基于 HTML5 网页游戏
  • 20个惊艳的 HTML5 Canvas 应用试验
  • 8个惊艳的 HTML5 和 JavaScript 特效

Google Web Toolkit是现在大家还不熟悉的工具之一,主要用于开发浏览器应用的一个工具,不过库中支持很多的功能,包括对客户端,或者是web存储的支持,都可以实现。

CloudFront

亚马逊网络服务(AWS)版本的 CDN。

亚马逊 CloudFront 是一个内容分发网络服务。它可以无缝融合入其他的亚马逊网络服务产品,为开发者和企业分发内容到最终用户手中提供了一种简单的方式,整个过程都具有低延迟、高转换速度的特点,也没有最小使用量的强制要求。

 

2、JetBrains WebStorm

CDNperf

上述的 CDNs 并不能托管你任意的资源,它们往往只是托管最频繁用到的文件。虽然对于线上产品来说将资源和服务器托管到私有的 CDN 上并不是最好的方式,但这种方式对于分发资源来说仍然是快速和简单的。

CDNperf 可以帮你找出最快和最可信赖的 JavaScript CDNS,让你的网站更快更有朝气。

图片 3

Initializr

图片 4

Initializr 是一个可以让你创建 HTML5 模板的网站。

可以创建样板 HTML5 模板,响应式的 HTML5 模板或 Twitter Bootstrap HTML5 模板。

 

大家需要创建HTML文档时可获得对文件的支持,现在的运用很多,比如砍伐者键入,使用者可以在浏览器中及时的预览的文档很方便。

性能测试

下面的这些性能测试工具,使用了量化的方式测试了网站中诸如首字节加载时间(time to first byte)或者渲染时间等表现。有些工具还会检查特别检查资源是否被缓存,多个 CSS 或 JS 文件是否值得合并。

HTML5 Demos

图片 5

这里集合了一些基于 HTML5 的优秀的实验演示,最初只有5个演示,后来逐渐扩充。

 

图片 6

WebPagetest

WebPagetest 是性能测试的黄金标准,它提供了多方面的量化指标用于性能测试,比如有一个基本的评分,用于评价当前页面优化的水平;有一个截图,显示页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

根据用户浏览器真实的连接速度,在全球范围内进行网页速度测试,并提供详细的优化建议。

图片 7

通过使用 API wrapper,也可以将 WebPagetest 的相关服务添加到 NPM 模块和命令行工具中。

  • webpagetest-mapper:将 WebPageTest 的测试数据转换为可读的文档格式。
  • WPT Bulk Tester:使用 Google Docs 测试多个 URLs(如果你拥有 API key,也可以使用 webpagetest.org 来做这件事,或者其他公开可访问的实例)。

HTML5 visual cheat sheet

图片 8

这是一个方便的 HTML5 速查,可以免费下载。它列出了 HTML5 所有的主要属性。

 

3、Visual Studio 2010 SP1

Yslow

Yslow 基于 Yahoo 的高性能网页教条,分析网页的性能并给出响应缓慢的原因。

HTML5 Test

图片 9

想知道桌面或移动 Web 浏览器符合最新的 HTML5 标准吗?这个网站可以帮助测试出分数和评级。

 

微软的Visual Studio 2010 SP1中提供了IntelliSense这个项目,也就是说追加了针对HTML5的一些元素,总体使用起来还是比较好的,但是我们要结合ddhu的一些实用工具。

Google PageSpeed

PageSpeed 根据网页最佳实践分析和优化测试的网页。

图片 10

PageSpeed 也有一个 CLI(Command Line Interface)工具:PSI(PageSpeed Insights with reporting)

在构建进程中,可以使用 PSI 测试移动端和桌面端的性能,最终得到可读性良好的测试结果。

图片 11

HTML5 Canvas Cheat Sheet

图片 12

如果你不能记住所有 Canvas 的命令和选项,那么这个小抄是绝对适合你。可作为一个图形或 PDF 免费下载。

4、Dojo Foundation Maqetta

我的网站都开销到哪里去了?

评估网站在世界各地为每个移动端用户支出的维护成本。

图片 13

Lime JS

图片 14

LimeJS 是一个 HTML5 游戏开发框架,用于快速构建运行于触屏设备和桌面浏览器的游戏。

 

Dojo Foundation Maqetta是一个不错的选择,这款工具是来自于IBM项目之一,Dojo Foundation Maqetta是为桌面和移动设备开发HTML5应用的开源工具,浏览器即可使用。

Pingdom 网站速度测试

输入 URL 地址,即可测试页面加载速度,分析并找出性能瓶颈。

图片 15

HTML5 Reset

图片 16

HTML5 Reset 是一组文件,包括 HTML、CSS 等,用于在开始新项目的时候帮助你节省时间,提供 HTML5 的空白WordPress模板。

 

5、Sencha Touch2

SpeedCurve

SpeedCurve 既可以让你追踪竞争对手的性能表现,也可以追踪自己的性能表现。使用 SpeedCurve 时,你可以查看某个因素在不同站点的速度表现。对于移动用户来说,他们希望网站在手机上加载起来要快于电脑,如果感到加载迟缓,往往会迅速关上网页,所以,网站的响应速度对他们很重要。

图片 17

Moqups

图片 18

这是一个聪明的基于 H​​TML5 应用程序,在那里你可以绘制线框架,完整的设计实物模型和用户界面的概念,而不需要昂贵的软件。

Sencha Touch2是移动应用框架的一种,可以当做一个重要Sencha的HTML5平台,使用者可以用它开发面向iOS进行制作和使用,也可以Android和Blackberry、Kindle Fire使用。

Calibre

Calibre 可以帮你追踪页面的加载时间,以及页面大小。问题页面(Janky page)?是的,Calibre 会直接告诉你哪些页面有问题。

图片 19

SpriteBox

图片 20

Spritebox 是一个所见即所得的工具,帮助 Web 设计者迅速而轻松地从一张精灵图片(CSS Sprit Image)创建CSS类和ID选择符样式。

 

图片 21

GT Metrix

GT Metrix 结合了 Google PageSpeed 和 YSlow,帮助开发者创建快速、高效和全面优化的网页浏览体验。

图片 22

Patternizer

图片 23

Patternizer 很好玩。你可以进行任意的控制,创造出伟大的纹理图案。

 

6、Sencha

perf.js

在开发过程中,将性能的时序情况显示在页面上。

LimeWeave

图片 24

LimeWeave是一个 HTML5 编辑器,它可以告诉你什么的 HTML5,CSS 和 JavaScript 特效的样子。

 

Sencha这款工具的主要定位是HTML5的可视化开发研究,一般来说开发团队可以在一个任务,然后做一个集成的环境,然后在这个环境中完成应用的设计和开发,以及需要的部署。

perf bar

一种简单的方式,用于快速收集和查看网页性能,提供预置的量化标准,也支持自定义的量化标准。

99 Lime

图片 25

如果你想节省时间,使用 HTML5,CSS 和 jQuery 创建一些新的元素,布局和代码,那么99 Lime 真的可以帮助你。

7、Adobe ColdFusion

grunt-perfbudget

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

On/Off FlipSwitch

图片 26

如果你曾经想创建一个漂亮的on/off开关,那么这个网站可以帮助你。您可以自定义图形开关,不同的着色,大小和风格。

 

这款工具主要是用来开发企业web程序的一个技术,通过websockets和互动表单以及视频等来做出HTML5技术,创建一种用户体验。

Sitespeed

Sitespeed.io 是一个基于最佳实践以及一些加载时序等量化标准的开源工具,有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据,根据最佳实践等规则来分析这些网页,并将结果以 HTML 的形式输出,或者以数值的形式发送到 Graphite。

CanvasLoader Creator

图片 27

这个免费的在线工具可以帮助设计师和程序员为他们的 HTML5 项目生成基于 Canvas 的 Loading 效果。

 

8、Adobe Dreamweaver CS6

speedgun

该网站允许你使用 Speedgun.js 收集任意公开站点的性能数据。它会运行五次,并显示一个友好的示图,帮助开发者了解当前页面的加载过程。

Create – Make Anything Editable

图片 28

Create 是一款可以在 CMS 中使用的编辑器。借助 HTML5 特性,可以把页面上的内容变成可编辑区域。

 

作为一个web端口的一种设计软件,这款工具提供了对HTML网站和移动程序的可视化编辑界面,整体来说使用也是比较方便。

gulp size

显示项目大小。

图片 29

Online 3D Sketch Toy

图片 30

这个绘图工具对于孩子而很好玩,而不只是给网站设计师用!还可以把您的小创作分享到 Facebook 上。

 

欢迎大家在评论区评论留言,小编会及时给大家解答疑惑

浏览器工具盒插件

您可能感兴趣的相关文章

  • 让人惊叹的 Chrome 浏览器实验项目
  • 分享21款丰富多彩的 HTML5 网页游戏
  • 推荐10款优秀的 HTML5 在线设计工具
  • 2012年最佳的 HTML5 应用和网站作品
  • 29款基于 HTML 5 Canvas 的网页游戏

 

本文链接:值得Web前端开发工程师收藏的20款 HTML5 工具

文章来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

正在迅速改变创建和管理网站的方式。 HTML5 在不同的领域让网页设计更强大的。快速,安全,响应式,互动和美丽,这些优点吸引更多...

Chrome 开发者工具

在 Chrome 的开发者工具中,对于评估性能有两个非常有用的标签:Audits 和 Network。

Audit 面板用于分析加载的页面。它可以提供优化建议,减少页面加载时间,加快页面的响应速度。

图片 31

Network 面板以动态的方式实时地展示了资源的请求和下载。虽然辨析和定位这些请求会比纯粹的加载页面多花一些时间,但这些消耗对于指导页面的性能优化是非常重要的。

图片 32

火狐开发者浏览器

该浏览器是为开发者而创造的,专注于服务开发者的工作流。这是有史以来第一次,将构建、测试和扩展等服务集中于一体。

更多信息请查看 MDN 上的 Network Monitor。

Page performance

这个扩展插件应用于 Chrome 浏览器,可以开速分析当前页面的性能。如果浏览器打开了多个标签,那么该插件会自动分析当前页面的性能表现。

图片 33

审查

PerfAudit

我们审查页面的加载和渲染性能。对于令人反感的响应缓慢和问题页面,我们有义不容辞的使命提供快速、稳定和准确的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得无比简单。

SVG 和图片

ImageOptim

ImageOptim 是一个免费的应用,它在减少图片体积、提高加载速度的同时,还不会牺牲图片质量。它优化了压缩参数、移除了无用的头信息和非必要的颜色配置信息。

图片 34

它也可以被集成到 Grunt 和 Gulp 中。

SVGO

SVG Optimizer 是一个基于 Nodejs 的 SVG 矢量图形优化工具。

如果你需要的是交互界面的操作,而不是 CLI,那么可以下载这个 APP。

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,旨在揭露 SVG 文件的主要问题,而不具有 SVGO 的完整可配置项。

图片 35

手动优化 SVGs

类似于其他的图形文件,SVG 也应该在上线前被优化。虽然有许多类似 Raymond 的工具可以帮你做这种优化,但最好的方式还是深入理解其细节并做一些手动的优化。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI 工具,用于优化网站的图片文件。它组合使用 optipng、pngcrush、advpng 和 jpegoptim,并根据文件类型做优化(最新版本中,已经支持 PNG 和 JPG)。

图片 36

CSS

CSS Triggers

该网站用于展示哪些 CSS 属性可以影响浏览器的布局、渲染和其他组合操作。

图片 37

更多有关 CSS-triggers 的消息,可以点击这里查看。

CSS Stats

该网页应用以可视化的形式展示了开发者项目中有关 CSS 的统计信息。

图片 38

CSS Shrink

CSS 压缩工具。由于 CSS 是页面渲染的核心文件,所以必须保持轻巧,便于快速响应和渲染。

uncss

UnCSS 是一个用于移除脚本中无用 CSS 的工具。它可以审查多个文件,也可以审查由 JavaScript 注入的 CSS。

它也可以被集成到 Grunt 和 Gulp 中。

Critical path

提取和整合 HTML 中关键的 CSS。

HTML

HTMLMinifier

HTMLMinifier 是一个高度可配置、经过完善的测试、基于 JavaScript 的 HTML 压缩工具,并且内置了代码审查类的工具。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用于压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

JavaScript 解析器、混淆、压缩和美化工具集。

它也可以被集成到 Grunt 和 Gulp 中。

你也许并不需要某些 jQuery 插件

jQuery 及其附属工具都是非常优秀的项目,使用它们往往使开发工作轻松而又快捷。

另一方面,如果你正在开发一个库,那么你需要思考一下是否真的需要依赖于 jQuery。也许你只需要引入几行代码,就可以放弃引入一个库实现某些功能。如果你的库只是针对于高级浏览器,那么可能直接调用浏览器的内置函数就可以实现相关功能了。

图片 39

扩展阅读

  • Usertiming API
  • Jank Free
  • Scrolling performance
  • Mobile web performance auditing
  • Gone in 60 frames per second
  • Udacity course on rendering performance

    1 赞 6 收藏 评论

图片 40

本文由前端php发布,转载请注明来源:Web开发的各种性能工具,值得Web开发人员收藏的