菜单

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

2019年1月30日 - JavaScript

值得珍藏!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 当前就在运用 MaxCDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的具备缓存资源,所以大家无需做什么样越发处理,即可将资源移入
CDN,并能有限辅助链接的准确性。

图片 1

对此一个博客来说,考虑到其中的大文件重大是 JavaScript、CSS
和图纸,而不是摄像等项目,那贷款占用的可真多。

大家的 CDN
服务一样是一个网站加速器和实时控制中央。创设它,就是为了让网站的用户和运维都能从下一代
CDN 中收获最大收入。

CloudFront

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

亚马逊(亚马逊) CloudFront
是一个内容分发互联网服务。它能够无缝融合入其余的亚马逊网络服务产品,为开发者和店铺分发内容到最后用户手中提供了一种不难的法门,整个经过都怀有低顺延、高转换速度的性状,也并未最小使用量的勒迫需求。

 

CDNperf

上述的 CDNs
并不能够托管你随便的资源,它们往往只是托管最频繁用到的文本。纵然对于线上产品以来将资源和服务器托管到个人的
CDN 上并不是最好的法门,但这种形式对于分发资源来说仍旧是全速和简单的。

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

图片 2

Initializr

图片 3

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

可以创设样板 HTML5 模板,响应式的 HTML5 模板或 推特(Twitter) 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

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

 

浏览器工具盒插件

您可能感兴趣的有关文章

 

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

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

http://www.bkjia.com/HTML5/626294.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/626294.htmlTechArticleHTML5 正在迅猛改变创造和管制网站的办法。 HTML5
在分化的圈子让网页设计更强硬的。快速,安全,响应式,互动和华美,那一个亮点吸引更加多…

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估质量有三个分外实惠的竹签:Audits 和 Network

奥迪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 也应该在上线前被优化。尽管有数见不鲜近似 雷Mond的工具得以帮你做那种优化,但最好的点子仍然深远领悟其细节并做一些手动的优化。

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 中首要性的 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地图