菜单

值得 Web 开发人士收藏的16款 HTML5 工具

2019年2月2日 - Json

值得珍藏!Web开发的各类质量工具

2015/06/22 · HTML5 ·
性能

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

嘿,各位,又到了周末总括时间!得益于大批量的 Grunt 和 Gulp
插件,大家可以轻松已毕网站数据的可视化,即便深刻精晓那么些工具还相比较坚苦,但分门别类的将它们列出来,也是很有帮忙的。

  HTML5 正在迅猛转移创制和治本网站的方法。HTML5
在不一致的世界让网页设计更强大的。火速,安全,响应式,互动和美观,这个亮点吸引更加多的 Web 开发人士使用
HTML5 开发种种网站和应用程序。

内容分发网络(CDN)

CDN
可以帮您把网站的资源分发到世界各市,有助于压实网站的响应速度,当然,那对于那多少个特殊地区的用户是收效甚微的。

  本文收集的20款优良的 HTML5 Web 应用程序,值得添加到您的 HTML5
的工具箱中,他们可以帮助你付出前端项目更快,更便于。

CloudFlare

CloudFlare 的强有力之处在于它可以改为你的 DNS 服务器(CDN
只是它有着服务的一个组成部分),那样对您的网站发起的持有请求都会通过它。

CloudFlare 的 CDN
在过去十五年的筹划和提升中,并没有始终的封建和守旧。大家的专利技术中充足利用了风尚的技能进步,包蕴并不压制硬件、web
服务器和互连网路由。换言之,我们立异的建设了新一代的 CDN。新的 CDN
配置简单、价格低廉,其性质也终将比你利用过的其他传统 CDN 都要完美。

您或许感兴趣的相关文章

MaxCDN

CSS-Tricks 当前就在应用 马克斯CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的兼具缓存资源,所以大家无需做怎么着尤其处理,即可将资源移入
CDN,并能有限协助链接的准头。

图片 1

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

俺们的 CDN
服务均等是一个网站加快器和实时控制中央。创立它,就是为着让网站的用户和运维都能从下一代
CDN 中收获最大收益。

CloudFront

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

亚马逊(亚马逊(Amazon)) CloudFront
是一个内容分发网络服务。它可以无缝融合入其余的亚马逊(亚马逊(Amazon))互联网服务产品,为开发者和商家分发内容到最后用户手中提供了一种简易的格局,整个经过都有所低顺延、高转换速度的表征,也向来不最小使用量的要挟必要。

 

CDNperf

上述的 CDNs
并无法托管你轻易的资源,它们往往只是托管最频仍用到的文本。即便对于线上产品来说将资源和服务器托管到村办的
CDN 上并不是最好的方式,但那种办法对于分发资源来说如故是高速和省略的。

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

图片 2

Initializr

图片 3

Initializr 是一个得以让您成立 HTML5 模板的网站。

能够成立样板 HTML5 模板,响应式的 HTML5 模板或 推特 Bootstrap HTML5
模板。

 

属性测试

上面的这一个品质测试工具,使用了量化的章程测试了网站中诸如首字节加载时间(time
to first
byte)或者渲染时间等表现。有些工具还会检讨更加检查资源是还是不是被缓存,八个CSS 或 JS 文件是否值得合并。

HTML5 Demos

图片 4

那里聚集了部分基于 HTML5
的地道的尝试演示,最初只有5个示范,后来逐步扩充。

 

WebPagetest

WebPagetest
是性质测试的纯金标准,它提供了多地点的量化目标用于质量测试,比如有一个主干的评分,用于评论当前页面优化的品位;有一个截图,突显页面加载后的视觉效果;还有一个浏览器加载资源的瀑布流…

基于用户浏览器真实的连年速度,在海内外范围内进行网页速度测试,并提供详细的优化提议。

图片 5

透过利用 API
wrapper
,也得以将
WebPagetest 的连锁服务丰裕到 NPM 模块和命令行工具中。

HTML5 visual cheat sheet

图片 6

那是一个便民的 HTML5 速查,可以防费下载。它列出了 HTML5 所有的要紧质量。

 

Yslow

Yslow 基于 Yahoo
的高质量网页教条,分析网页的性质并付诸响应缓慢的缘由。

HTML5 Test

图片 7

想清楚桌面或位移 Web 浏览器符合最新的 HTML5
标准呢?那么些网站可以辅助测试出分数和评级。

 

Google PageSpeed

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

图片 8

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

在营造进度中,可以应用 PSI
测试移动端和桌面端的品质,最终收获可读性良好的测试结果。

图片 9

HTML5 Canvas Cheat Sheet

图片 10

倘诺你无法记住所有 Canvas
的指令和选拔,那么那几个小抄是纯属适合您。可用作一个图片或 PDF
免费下载。

我的网站都付出到哪个地方去了?

评估网站在世界各市为每个移动端用户支出的保证资金。

图片 11

Lime JS

图片 12

LimeJS 是一个 HTML5
游戏支付框架,用于飞速创设运行于触屏设备和桌面浏览器的玩耍。

 

Pingdom 网站速度测试

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

图片 13

HTML5 Reset

图片 14

HTML5 Reset 是一组文件,包罗 HTML、CSS
等,用于在起来新品类的时候扶助你节省时间,提供 HTML5
的空白WordPress模板。

 

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的性能表现,也足以追踪自己的性质表现。使用
SpeedCurve
时,你可以查阅某个因素在不一致站点的快慢展现。对于移动用户来说,他们期待网站在手机上加载起来要快于电脑,假如感觉加载迟缓,往往会很快关上网页,所以,网站的响应速度对他们很首要。

图片 15

Moqups

图片 16

那是一个精晓的按照 H​​TML5
应用程序,在那边您可以绘制线框架,完整的宏图实物模型和用户界面的概念,而不须要昂贵的软件。

Calibre

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

图片 17

SpriteBox

图片 18

Pepsi-Colabox 是一个所见即所得的工具,帮忙 Web
设计者快捷而轻松地从一张精灵图片(CSS Sprit
Image)创造CSS类和ID接纳符样式。

 

GT Metrix

GT Metrix 结合了 谷歌 PageSpeed 和
YSlow,帮助开发者创造急忙、高效和完善优化的网页浏览体验。

图片 19

Patternizer

图片 20

Patternizer 很好玩。你可以拓展随机的决定,创设出巨大的纹路图案。

 

perf.js

在开发进度中,将质量的时序情状突显在页面上。

LimeWeave

图片 21

LimeWeave是一个 HTML5 编辑器,它可以告诉您怎么着的 HTML5,CSS 和
JavaScript 特效的旗帜。

 

perf bar

一种不难的点子,用于火速收集和查看网页质量,提供预置的量化标准,也襄助自定义的量化标准。

99 Lime

图片 22

假设你想节省时间,使用 HTML5,CSS 和 jQuery
创造一些新的元素,布局和代码,那么99 Lime 真的可以扶持你。

grunt-perfbudget

用以评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的国有或个人实例在特定的 URL
进行测试。它会将测试结果和您预期的习性期望做比较,若是低于预期,那么这么些task
就顺遂落成了,即使超越了您预期的质量期望,那么就会告知失利,并且会拉扯您解析超出预期的原因。

On/Off FlipSwitch

图片 23

比方您早已想创设一个不错的on/off开关,那么这么些网站可以支持您。您可以自定义图形开关,不相同的着色,大小清劲风骨。

 

Sitespeed

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

CanvasLoader Creator

图片 24

以此免费的在线工具得以协助设计师和程序员为她们的 HTML5 项目变更基于
Canvas 的 Loading 效果。

 

speedgun

该网站允许你利用 Speedgun.js 收集任意公开站点的品质数据。它会运行一遍,并体现一个谈得来的示图,协理开发者了解当下页面的加载进程。

Create – Make Anything Editable

图片 25

Create 是一款可以在 CMS 中选取的编辑器。借助 HTML5
特性,可以把页面上的情节变成可编制区域。

 

gulp size

突显档次大小。

图片 26

Online 3D Sketch Toy

图片 27

其一绘图工具对于孩子而很好玩,而不只是给网站设计师用!还足以把您的小作文分享到
非死不可 上。

 

浏览器工具盒插件

您或许感兴趣的有关文章

 

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

作品来源:梦想天空 ◆ 关切前端开发技术 ◆ 分享网页设计资源

http://www.bkjia.com/HTML5/626294.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/626294.htmlTechArticleHTML5 正在火速改变创立和管理网站的法子。 HTML5
在不一致的园地让网页设计更强有力的。连忙,安全,响应式,互动和美妙,那一个亮点吸引越多…

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估品质有七个尤其实用的标签:Audits 和 Network

奥迪(Audi)t
面板用于分析加载的页面。它可以提供优化提议,收缩页面加载时间,加速页面的响应速度。

图片 28

Network
面板以动态的章程实时地显示了资源的请求和下载。尽管辨析和稳定那一个请求会比纯粹的加载页面多花一些时光,但那几个消耗对于指导页面的属性优化是格外主要的。

图片 29

火狐开发者浏览器

该浏览器是为开发者而成立的,专注于服务开发者的工作流。那是一贯第四遍,将创设、测试和伸张等服务集中于一体。

更加多音信请查看 MDN 上的 Network
Monitor

Page performance

以此扩张插件应用于 Chrome
浏览器,可以开速分析当前页面的特性。假设浏览器打开了多个标签,那么该插件会自动分析当前页面的品质表现。

图片 30

审查

PerfAudit

大家查对页面的加载和渲染品质。对于令人反感的响应缓慢和题材页面,大家有本分的重任提供急忙、稳定和规范的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染质量变得最好简单。

SVG 和图片

ImageOptim

ImageOptim
是一个免费的利用,它在收缩图片体积、升高加载速度的还要,还不会捐躯图片品质。它优化了减少参数、移除了没用的头音信和非要求的水彩配置音信。

图片 31

它也足以被并入到 Grunt 和 Gulp 中。

SVGO

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

若果您须求的是互为界面的操作,而不是
CLI,那么能够下载这么些 APP

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,目的在于揭破 SVG
文件的主要难题,而不享有 SVGO 的一体化可布置项。

图片 32

手动优化 SVGs

接近于其余的图形文件,SVG 也应有在上线前被优化。即使有成百上千看似 Raymond的工具得以帮你做那种优化,但最好的艺术照旧深深掌握其细节并做一些手动的优化。

Triamge

Triamge 是一个扩平台的 GUI 和 CLI
工具,用于优化网站的图形文件。它结合使用 optipng、pngcrush、advpng 和
jpegoptim,并依照文件类型做优化(最新版本中,已经协助 PNG 和 JPG)。

图片 33

CSS

CSS Triggers

该网站用于浮现什么 CSS 属性可以影响浏览器的布局、渲染和任何组成操作。

图片 34

越来越多关于 CSS-triggers
的音讯,可以点击这里查看

CSS Stats

该网页应用以可视化的样式展现了开发者项目中有关 CSS 的总计音讯。

图片 35

CSS Shrink

CSS 压缩工具。由于 CSS
是页面渲染的主导文件,所以必须维持轻巧,便于飞速响应和渲染。

uncss

UnCSS 是一个用以移除脚本中没用 CSS
的工具。它可以审核多少个文件,也能够审核由 JavaScript 注入的 CSS。

它也可以被合并到 Grunt 和 Gulp 中。

Critical path

领到和重组 HTML 中任重(英文名:rèn zhòng)而道远的 CSS。

HTML

HTMLMinifier

HTMLMinifier 是一个惊人可配备、经过完美的测试、基于 JavaScript 的 HTML
压缩工具,并且放置了代码审查类的工具。

gulp-htmlmin

用于压缩 HTML 的 gulp 插件。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

JavaScript

uglifyjs

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

它也足以被合并到 Grunt 和 Gulp 中。

您或许并不须求某些 jQuery 插件

jQuery
及其直属工具都是老大出色的品类,使用它们往往使开发工作轻松而又火速。

单向,如果你正在开发一个库,那么您要求思考一下是否确实必要依靠于
jQuery。也许你只须求引入几行代码,就可以吐弃引入一个库完毕某些意义。如果您的库只是本着于高级浏览器,那么可能直接调用浏览器的放权函数就足以兑现相关职能了。

图片 36

壮大阅读

图片 37

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图