菜单

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

2019年1月31日 - Ajax

GT Metrix

GT Metrix 结合了 谷歌(Google) PageSpeed 和
YSlow,帮忙开发者创立急速、高效和宏观优化的网页浏览体验。

manbetx2.0手机版 1

HTML5 visual cheat sheet

manbetx2.0手机版 2

那是一个便利的 HTML5 速查,可以防费下载。它列出了 HTML5 所有的根本品质。

 

MaxCDN

CSS-Tricks 当前就在动用 马克斯CDN 托管所有的静态资源。它能够无缝地融为一体
WordPres 和 W3
的享有缓存资源,所以我们无需做什么尤其处理,即可将资源移入
CDN,并能有限支撑链接的准确性。

manbetx2.0手机版 3

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

咱俩的 CDN
服务均等是一个网站加快器和实时控制中央。创立它,就是为了让网站的用户和运维都能从下一代
CDN 中得到最大收入。

  本文收集的20款杰出的 HTML5 Web 应用程序,值得添加到你的 HTML5
的工具箱中,他们力所能及协理您付出前端项目更快,更易于。

WebPagetest

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

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

manbetx2.0手机版 4

通过运用 API
wrapper
,也可以将
WebPagetest 的相干服务丰裕到 NPM 模块和命令行工具中。

99 Lime

manbetx2.0手机版 5

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

speedgun

该网站允许你利用 Speedgun.js 收集任意公开站点的质量数据。它会运作五回,并浮现一个融洽的示图,扶助开发者明白当前页面的加载进度。

On/Off FlipSwitch

manbetx2.0手机版 6

假若您早已想创建一个理想的on/off开关,那么那几个网站可以襄助您。您可以自定义图形开关,区其他着色,大小清劲风骨。

 

Triamge

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

manbetx2.0手机版 7

Initializr

manbetx2.0手机版 8

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

可以创设样板 HTML5 模板,响应式的 HTML5 模板或 推特 Bootstrap HTML5
模板。

 

Yslow

Yslow 基于 Yahoo
的高质量网页教条,分析网页的质量并交付响应缓慢的原因。

Create – Make Anything Editable

manbetx2.0手机版 9

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

 

CSS Stats

该网页应用以可视化的花样浮现了开发者项目中关于 CSS 的计算新闻。

manbetx2.0手机版 10

Moqups

manbetx2.0手机版 11

那是一个智慧的基于 H​​TML5
应用程序,在那里你可以绘制线框架,完整的宏图实物模型和用户界面的定义,而不须求昂贵的软件。

ImageOptim

ImageOptim
是一个免费的运用,它在回落图片体积、提升加载速度的同时,还不会就义图片品质。它优化了滑坡参数、移除了不算的头音讯和非必要的颜料配置音信。

manbetx2.0手机版 12

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

HTML5 Demos

manbetx2.0手机版 13

此地聚集了有的按照 HTML5
的出色的尝试演示,最初只有5个示范,后来逐步扩张。

 

JavaScript

HTML5 Canvas Cheat Sheet

manbetx2.0手机版 14

假若你不可能记住所有 Canvas
的授命和抉择,那么那几个小抄是相对适合你。可作为一个图片或 PDF
免费下载。

grunt-perfbudget

用来评估质量的 Grunt task。 grunt-perfbudget 使用 WebPagetest
的公有或个体实例在一定的 URL
进行测试。它会将测试结果和您预期的特性期望做比较,若是低于预期,那么这么些task
就顺遂完结了,假设超越了您预期的性质期望,那么就会告知失败,并且会拉扯您解析超出预想的由来。

Online 3D Sketch Toy

manbetx2.0手机版 15

以此绘图工具对于孩子而很好玩,而不只是给网站设计师用!仍可以把你的小作文分享到
脸书 上。

 

Google PageSpeed

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

manbetx2.0手机版 16

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

在创设进程中,可以动用 PSI
测试移动端和桌面端的质量,最后收获可读性出色的测试结果。

manbetx2.0手机版 17

SpriteBox

manbetx2.0手机版 18

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

 

值得珍藏!Web开发的各样性能工具

2015/06/22 · HTML5 ·
性能

初稿出处: Robin
Rendle
   译文出处:南北   

喂,各位,又到了周末总括时间!得益于多量的 Grunt 和 Gulp
插件,大家得以轻松落成网站数量的可视化,即便深刻精通那几个工具还对比不方便,但分门别类的将它们列出来,也是很有协理的。

Patternizer

manbetx2.0手机版 19

Patternizer 很好玩。你可以拓展自由的决定,创建出了不起的纹理图案。

 

Critical path

领取和构成 HTML 中举足轻重的 CSS。

Lime JS

manbetx2.0手机版 20

LimeJS 是一个 HTML5
游戏开发框架,用于急忙创设运行于触屏设备和桌面浏览器的嬉戏。

 

HTMLMinifier

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

你可能感兴趣的连带小说

uglifyjs

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

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

LimeWeave

manbetx2.0手机版 21

LimeWeave是一个 HTML5 编辑器,它可以告诉你如何的 HTML5,CSS 和
JavaScript 特效的样板。

 

CSS Triggers

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

manbetx2.0手机版 22

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

您可能感兴趣的相干小说

 

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

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

http://www.bkjia.com/HTML5/626294.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML5/626294.htmlTechArticleHTML5 正在火速转移创制和管理网站的格局。 HTML5
在不一致的世界让网页设计更强大的。飞快,安全,响应式,互动和精粹,这一个亮点吸引更多…

CSS

 

SVGO

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

一经你须要的是互相界面的操作,而不是
CLI,那么可以下载这一个 APP

HTML5 Reset

manbetx2.0手机版 23

HTML5 Reset 是一组文件,包涵 HTML、CSS
等,用于在开端新类型的时候辅助你节省时间,提供 HTML5
的空白WordPress模板。

 

Page performance

本条扩大插件应用于 Chrome
浏览器,可以开速分析当前页面的属性。假如浏览器打开了八个标签,那么该插件会自动分析当前页面的性质表现。

manbetx2.0手机版 24

  HTML5 正在迅猛改变创制和治本网站的办法。HTML5
在区其余园地让网页设计更强劲的。火速,安全,响应式,互动和华美,这么些亮点吸引越多的 Web 开发人员使用
HTML5 开发各个网站和应用程序。

火狐开发者浏览器

该浏览器是为开发者而创建的,专注于服务开发者的工作流。这是历来第五遍,将创设、测试和伸张等劳动集中于一体。

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

HTML5 Test

manbetx2.0手机版 25

想了然桌面或移动 Web 浏览器符合最新的 HTML5
标准吗?那一个网站可以匡助测试出分数和评级。

 

CDNperf

上述的 CDNs
并无法托管你轻易的资源,它们往往只是托管最频仍用到的文件。固然对于线上产品以来将资源和服务器托管到个人的
CDN 上并不是最好的法子,但那种办法对于分发资源来说如故是飞速和省略的。

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

manbetx2.0手机版 26

CanvasLoader Creator

manbetx2.0手机版 27

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

 

特性测试

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

手动优化 SVGs

恍如于其他的图形文件,SVG 也应当在上线前被优化。纵然有那一个近乎 雷Mond的工具得以帮你做那种优化,但最好的形式照旧长远了解其细节并做一些手动的优化。

grunt-contrib-htmlmin

用来压缩 HTML 的 grunt 插件。

PerfAudit

咱俩审批页面的加载和渲染品质。对于令人反感的响应缓慢和难点页面,大家有本分的义务提供便捷、稳定和可信的页面。

Perfmonkey

PerfMonkey 让追踪页面的渲染品质变得极其简单。

HTML

uncss

UnCSS 是一个用来移除脚本中没用 CSS
的工具。它可以查处多个公文,也足以查处由 JavaScript 注入的 CSS。

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

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

评估网站在世界各省为每个移动端用户支付的护卫开销。

manbetx2.0手机版 28

CloudFront

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

亚马逊(Amazon) CloudFront
是一个内容分发互联网服务。它可以无缝融合入别的的亚马逊网络服务产品,为开发者和供销社分发内容到末了用户手中提供了一种简单的形式,整个经过都享有低顺延、高转换速度的特色,也不曾最小使用量的强制必要。

您恐怕并不必要某些 jQuery 插件

jQuery
及其直属工具都是格外精良的花色,使用它们往往使开发工作轻松而又便捷。

一边,要是你正在开发一个库,那么您必要考虑一下是或不是真的须要借助于
jQuery。也许你只必要引入几行代码,就能够舍弃引入一个库达成某些职能。如果您的库只是针对于高级浏览器,那么可能直接调用浏览器的停放函数就足以兑现相关功效了。

manbetx2.0手机版 29

CSS Shrink

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

Calibre

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

manbetx2.0手机版 30

perf bar

一种简易的点子,用于飞速收集和查阅网页品质,提供预置的量化标准,也支撑自定义的量化标准。

perf.js

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

CloudFlare

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

CloudFlare 的 CDN
在过去十五年的筹划和进步中,并不曾始终的封建和封建。大家的专利技术中丰盛利用了风尚的技术提高,包括并不避免硬件、web
服务器和网络路由。换言之,我们革新的建设了新一代的 CDN。新的 CDN
配置简单、价格低廉,其性质也肯定比你利用过的别的传统 CDN 都要完美。

SpeedCurve

SpeedCurve
既可以让你追踪竞争对手的特性表现,也可以追踪自己的属性表现。使用
SpeedCurve
时,你可以查阅某个因素在分化站点的进程呈现。对于移动用户来说,他们希望网站在表弟大上加载起来要快于电脑,倘若觉得加载迟缓,往往会飞速关上网页,所以,网站的响应速度对她们很重点。

manbetx2.0手机版 31

Chrome 开发者工具

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

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

manbetx2.0手机版 32

Network
面板以动态的办法实时地展现了资源的呼吁和下载。就算辨析和定位这一个请求会比纯粹的加载页面多花一些时日,但这个消耗对于指点页面的习性优化是卓殊紧要的。

manbetx2.0手机版 33

gulp size

彰显档次大小。

manbetx2.0手机版 34

SVG 和图片

增加阅读

manbetx2.0手机版 35

内容分发网络(CDN)

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

gulp-htmlmin

用来压缩 HTML 的 gulp 插件。

审查

Sitespeed

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

浏览器工具盒插件

SVGOMG

SVGOMG 是 SVGO’s Missing GUI 的缩写,目的在于揭穿 SVG
文件的重点难点,而不拥有 SVGO 的完好可配置项。

manbetx2.0手机版 36

Pingdom 网站速度测试

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

manbetx2.0手机版 37

相关文章

发表评论

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

网站地图xml地图