菜单

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

2019年1月26日 - XML

值得珍藏!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 当前就在运用 马克斯(Max)CDN 托管所有的静态资源。它可以无缝地融为一体
WordPres 和 W3
的有着缓存资源,所以大家无需做哪些越发处理,即可将资源移入
CDN,并能保障链接的准确性。

manbetx2.0手机版 1

对此一个博客来说,考虑到内部的大文件根本是 JavaScript、CSS
和图表,而不是录像等项目,那贷款占用的可真多。

俺们的 CDN
服务一样是一个网站加快器和实时控制宗旨。创设它,就是为着让网站的用户和运维都能从下一代
CDN 中获得最大受益。

CloudFront

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

亚马逊(亚马逊(Amazon)) CloudFront
是一个内容分发网络服务。它能够无缝融合入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和商号分发内容到最终用户手中提供了一种不难的情势,整个进度都拥有低顺延、高转换速度的性状,也没有最小使用量的强制必要。

 

CDNperf

上述的 CDNs
并不可能托管你轻易的资源,它们往往只是托管最频仍用到的文件。即使对于线上产品来说将资源和服务器托管到个体的
CDN 上并不是最好的法子,但那种措施对于分发资源来说依然是高效和概括的。

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

manbetx2.0手机版 2

Initializr

manbetx2.0手机版 3

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

manbetx2.0手机版,可以创制样板 HTML5 模板,响应式的 HTML5 模板或 推特(TWTR.US) Bootstrap HTML5
模板。

 

属性测试

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

HTML5 Demos

manbetx2.0手机版 4

此处汇集了一些按照 HTML5
的美妙的试行演示,最初唯有5个示范,后来日益扩张。

 

WebPagetest

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

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

manbetx2.0手机版 5

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

HTML5 visual cheat sheet

manbetx2.0手机版 6

那是一个方便的 HTML5 速查,可以免费下载。它列出了 HTML5 所有的第一性能。

 

Yslow

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

HTML5 Test

manbetx2.0手机版 7

想领悟桌面或活动 Web 浏览器符合最新的 HTML5
标准吧?那么些网站可以扶持测试出分数和评级。

 

Google PageSpeed

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

manbetx2.0手机版 8

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

在构建进度中,可以采纳 PSI
测试移动端和桌面端的特性,最后赢得可读性突出的测试结果。

manbetx2.0手机版 9

HTML5 Canvas Cheat Sheet

manbetx2.0手机版 10

若是您无法记住所有 Canvas
的吩咐和挑选,那么那一个小抄是纯属适合您。可作为一个图形或 PDF
免费下载。

本身的网站都付出到何地去了?

评估网站在世界各地为各样移动端用户支出的保安资产。

manbetx2.0手机版 11

Lime JS

manbetx2.0手机版 12

LimeJS 是一个 HTML5
游戏支付框架,用于神速构建运行于触屏设备和桌面浏览器的娱乐。

 

Pingdom 网站速度测试

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

manbetx2.0手机版 13

HTML5 Reset

manbetx2.0手机版 14

HTML5 Reset 是一组文件,包蕴 HTML、CSS
等,用于在开头新类型的时候帮忙您节省时间,提供 HTML5
的空白WordPress模板。

 

SpeedCurve

SpeedCurve
既可以让您追踪竞争对手的属性表现,也可以追踪自己的性质表现。使用
SpeedCurve
时,你可以查看某个因素在不一样站点的快慢彰显。对于移动用户来说,他们愿意网站在手机上加载起来要快于电脑,如若感觉到加载迟缓,往往会飞快关上网页,所以,网站的响应速度对他们很首要。

manbetx2.0手机版 15

Moqups

manbetx2.0手机版 16

这是一个智慧的按照 H​​TML5
应用程序,在这里你可以绘制线框架,完整的统筹实物模型和用户界面的概念,而不必要昂贵的软件。

Calibre

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

manbetx2.0手机版 17

SpriteBox

manbetx2.0手机版 18

七喜box 是一个所见即所得的工具,协理 Web
设计者疾速而轻松地从一张天使图片(CSS Sprit
Image)创造CSS类和ID选用符样式。

 

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,援助开发者创建快速、高效和周密优化的网页浏览体验。

manbetx2.0手机版 19

Patternizer

manbetx2.0手机版 20

Patternizer 很好玩。你可以展开任意的控制,创设出宏伟的纹理图案。

 

perf.js

在支付进度中,将性能的时序情状显示在页面上。

LimeWeave

manbetx2.0手机版 21

LimeWeave是一个 HTML5 编辑器,它可以告诉你怎么的 HTML5,CSS 和
JavaScript 特效的规范。

 

perf bar

一种简单的不二法门,用于急忙收集和查阅网页性能,提供预置的量化标准,也支撑自定义的量化标准。

99 Lime

manbetx2.0手机版 22

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

grunt-perfbudget

用以评估性能的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个人实例在特定的 URL
举办测试。它会将测试结果和您预期的属性期望做相比较,如若低于预期,那么这一个task
就顺遂落成了,假使跨越了你预期的性质期望,那么就会告诉败北,并且会辅助您分析超出预想的由来。

On/Off FlipSwitch

manbetx2.0手机版 23

若果你曾经想创制一个大好的on/off开关,那么那个网站可以协助您。您能够自定义图形开关,分化的着色,大小清劲风格。

 

Sitespeed

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

CanvasLoader Creator

manbetx2.0手机版 24

本条免费的在线工具得以支持设计师和程序员为他们的 HTML5 项目转移基于
Canvas 的 Loading 效果。

 

speedgun

该网站允许你选用 Speedgun.js 收集任意公开站点的属性数据。它会运作一次,并出示一个和谐的示图,辅助开发者领悟当前页面的加载过程。

Create – Make Anything Editable

manbetx2.0手机版 25

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

 

gulp size

浮现档次大小。

manbetx2.0手机版 26

Online 3D Sketch Toy

manbetx2.0手机版 27

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

 

浏览器工具盒插件

您可能感兴趣的相干小说

 

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

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

http://www.bkjia.com/HTML5/626294.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/626294.htmlTechArticleHTML5 正在迅猛转移创造和治本网站的办法。 HTML5
在不相同的世界让网页设计更强有力的。快速,安全,响应式,互动和美观,这几个亮点吸引越来越多…

Chrome 开发者工具

在 Chrome
的开发者工具中,对于评估性能有八个格外有效的竹签:Audits 和 Network

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

manbetx2.0手机版 28

Network
面板以动态的措施实时地显示了资源的请求和下载。固然辨析和永恒这个请求会比纯粹的加载页面多花一些时刻,但那个消耗对于辅导页面的属性优化是万分关键的。

manbetx2.0手机版 29

火狐开发者浏览器

该浏览器是为开发者而创办的,专注于服务开发者的工作流。那是常有第三次,将构建、测试和伸张等劳动集中于一体。

越多音信请查看 MDN 上的 Network
Monitor

Page performance

本条扩充插件应用于 Chrome
浏览器,可以开速分析当前页面的特性。要是浏览器打开了多个标签,那么该插件会自行分析当前页面的性能表现。

manbetx2.0手机版 30

审查

PerfAudit

俺们核查页面的加载和渲染性能。对于让人反感的响应缓慢和题材页面,大家有本分的沉重提供疾速、稳定和准确的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染性能变得最好容易。

SVG 和图片

ImageOptim

ImageOptim
是一个免费的使用,它在裁减图片体积、升高加载速度的还要,还不会就义图片质料。它优化了削减参数、移除了没用的头音讯和非需要的颜色配置音讯。

manbetx2.0手机版 31

它也得以被购并到 Grunt 和 Gulp 中。

SVGO

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

假使您需要的是互为界面的操作,而不是
CLI,那么可以下载这几个 APP

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,目的在于揭示 SVG
文件的关键问题,而不拥有 SVGO 的全部可配置项。

manbetx2.0手机版 32

手动优化 SVGs

类似于任何的图形文件,SVG 也应该在上线前被优化。纵然有过多类似 雷Mond(Raymond)的工具得以帮你做这种优化,但最好的方式仍然尖锐了然其细节并做一些手动的优化。

Triamge

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

manbetx2.0手机版 33

CSS

CSS Triggers

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

manbetx2.0手机版 34

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

CSS Stats

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

manbetx2.0手机版 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。也许你只必要引入几行代码,就足以遗弃引入一个库落成某些功效。假诺你的库只是指向于高级浏览器,那么可能直接调用浏览器的内置函数就可以兑现相关职能了。

manbetx2.0手机版 36

扩充阅读

manbetx2.0手机版 37

相关文章

发表评论

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

网站地图xml地图