Web开发的各种性能工具,开发资源

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

2015/06/22 · HTML5 ·
性能

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

嘿,各位,又到了周末统计时间!得益于大量的 Grunt 和 Gulp
插件,大家得以轻松完毕网站数量的可视化,纵然深远精通这几个工具还比较不方便,但分门别类的将它们列出来,也是很有扶持的。

  HTML5 正在快捷转移创设和治本网站的艺术。HTML5
在分裂的天地让网页设计更强硬的。急忙,安全,响应式,互动和雅观,这个亮点吸引越来越多的 Web 开发人员使用
HTML5 开发各类网站和应用程序。

对于 Web 工程师来说做好和最不好的事都是 Web
技术的新生事物正在蓬勃发展。那也意味作为一个 Web
开发者来说肯定要不断的读书,适应变化。

正文头阵于搜狐专栏「极光晚报」

内容分发互连网(CDN)

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

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

之所以,小编列举出了协调开发和上学进度中遇见的好工具和资源,在此处享用给大家:

亚洲城888,对此 Web 工程师来说做好和最不好的事都是 Web
技术的朝气蓬勃。那也意味着作为一个 Web
开发者来说肯定要持续的学习,适应变化。
为此,小编列举出了投机开发和上学进程中相遇的好工具和资源,在那边享用给大家:

CloudFlare

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

CloudFlare 的 CDN
在过去十五年的设计和进步中,并不曾始终的封建和守旧。大家的专利技术中足够利用了风尚的技术发展,包涵并不幸免硬件、web
服务器和互连网路由。换言之,大家立异的建设了下一代的 CDN。新的 CDN
配置不难、价格低廉,其品质也终将比你使用过的其他传统 CDN 都要好好。

你或许感兴趣的相关作品

JavaScript Libraries

  • jQuery:最盛名的
    JavaScript 库。
  • BackBoneJS:为复杂性
    WEB 应用程序提供 MVP 结构。
  • D3.js:最盛行的
    Javascript 可视化图形库之一。
  • React:Facebook
    开源的 JavaScript 库。
  • jQuery UI:以
    jQuery 为底蕴的开源 JavaScript 网页用户界面代码库。
  • jQuery
    Mobile:jQuery
    框架的一个组件,提供全部统一的活动 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用成效,但是并未增加任何
    JavaScript 内置对象。
  • Moment.js:一个JavaScript
    日期处理类库,用于解析、检验、操作、以及体现日期。
  • Lodash:一个具备同等接口、模块化、高品质等特色的
    JavaScript 工具库。

JavaScript Libraries

  • jQuery:最闻名的
    JavaScript 库。
  • BackBoneJS:为复杂性
    WEB 应用程序提供 MVP 结构。
  • D3.js:最风靡的
    Javascript 可视化图形库之一。
  • React:Facebook
    开源的 JavaScript 库。
  • jQuery
    UI:以
    jQuery 为底蕴的开源 JavaScript 网页用户界面代码库。
  • jQuery
    Mobile:jQuery
    框架的一个零部件,提供整机统一的移动 UI 框架。
  • Underscore.js:提供了一整套函数式编程的实用功用,不过尚未扩展任何
    JavaScript 内置对象。
  • Moment.js:一个JavaScript
    日期处理类库,用于解析、检验、操作、以及展示日期。
  • Lodash:一个颇具同样接口、模块化、高质量等特点的
    JavaScript 工具库。

MaxCDN

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

亚洲城888 1

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

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

  • 引进10款分外精美的 HTML5 开发工具
  • 二零一二年最经典的10款 HTML5 游戏集锦
  • 35款尤其了不起的按照 HTML5 网页游戏
  • 20个惊艳的 HTML5 Canvas 应用试验
  • 8个惊艳的 HTML5 和 JavaScript 特效

前者框架

  • Bootstrap:闻明的全速支付响应式
    Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于营造基于其余设施上的
    Web 应用。
  • Semantic
    UI:全语义化的前端界面开发框架。
  • Web开发的各种性能工具,开发资源。uikit:一款轻量级开源的前端框架。

前者框架

  • Bootstrap:盛名的高速支付响应式
    Web 应用程序的前端工具包。
  • Foundation:一个易用、强大而且灵活的前端框架,用于营造基于其余设施上的
    Web 应用。
  • Semantic
    UI:全语义化的前端界面开发框架。
  • uikit:一款轻量级开源的前端框架。

CloudFront

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

亚马逊(亚马逊(Amazon)) CloudFront
是一个内容分发互连网服务。它能够无缝融合入其余的亚马逊(亚马逊(Amazon))网络服务产品,为开发者和商号分发内容到最后用户手中提供了一种简单的艺术,整个经过都具备低顺延、高转换速度的风味,也没有最小使用量的威逼要求。

 

数据库

  • MySQL:最盛行的关系型数据库管理序列。
  • MariaDB:由 MySQL
    早期员工支付,属于 MySQL 的一个分段。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、辅助互连网、基于内存、键值对存储数据库。
  • PostgreSQL:开源的靶子 –
    关系型数据库管理体系,Uber 早期就是用得这一个。

数据库

  • MySQL:最盛行的关系型数据库管理体系。
  • MariaDB:由
    MySQL 早期员工付出,属于 – MySQL 的一个拨出。
  • MongoDB:基于分布式文件存储的数据库。
  • Redis:一个开源、襄助互联网、基于内存、键值对存储数据库。
  • PostgreSQL:开源的靶子 –
    关系型数据库管理连串,Uber 早期就是用得这么些。

Task Runners / Package Managers

  • Grunt:JavaScript
    世界的营造工具。
  • Gulp:基于流的自动化打造工具。
  • Bower:Web
    包管理器,包罗 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node
    包管理器。

CDNperf

上述的 CDNs
并无法托管你随便的资源,它们往往只是托管最频仍用到的文书。即使对于线上产品的话将资源和服务器托管到村办的
CDN 上并不是最好的艺术,但这种方法对于分发资源来说依旧是高速和简易的。

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

亚洲城888 2

Initializr

亚洲城888 3

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

可以创立样板 HTML5 模板,响应式的 HTML5 模板或 推特(Twitter) Bootstrap HTML5
模板。

 

Task Runners / Package Managers

  • Grunt:JavaScript
    世界的营造工具。
  • Gulp:基于流的自动化创设工具。
  • Bower:Web
    包管理器,包含 HTML,CSS,JavaScript,字体、甚至图片资源。
  • NPM:Node
    包管理器。

CSS 预处理器

  • Sass:一个强硬、成熟、稳定的
    CSS 伸张。
  • Less:作为一个
    CSS 的伸张,其包容性万分好,学习花费很低。
  • Stylus:提供更有效、优雅的法门来生成
    CSS。

特性测试

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

HTML5 Demos

亚洲城888 4

此地汇集了一部分基于 HTML5
的美丽的试验演示,最初唯有5个示范,后来逐步增添。

 

CSS 预处理器

  • Sass:一个有力、成熟、稳定的
    CSS 增加。
  • Less:作为一个 CSS
    的壮大,其包容性格外好,学习开支很低。
  • Stylus:提供更有效、优雅的艺术来生成
    CSS。

Markdown 编辑器

  • StackEdit:一个开放源码免费应用的
    马克Down 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并匡助HTML5,PDF 等两种导出格式。
  • Mou:Mac
    OS X 上一款不错的 马克down 编辑器。
  • Texts:同时协理Windows 和 Mac OS X。

WebPagetest

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

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

亚洲城888 5

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

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

HTML5 visual cheat sheet

亚洲城888 6

那是一个利于的 HTML5 速查,可避防费下载。它列出了 HTML5 所有的最主要品质。

 

Markdown 编辑器

  • StackEdit:一个开放源码免费应用的
    马克Down 编辑器, 基于 PageDown。
  • Dillinger:也是在线编辑器,提供云存储,并辅助HTML5,PDF 等各类导出格式。
  • Mou:Mac OS X
    上一款可以的 马克down 编辑器。
  • Texts:同时帮忙Windows 和 Mac OS X。

Icon 资源

  • Font
    Awesome
  • IconMonster
  • IconFinder
  • Fontello

Yslow

Yslow 基于 Yahoo
的高品质网页教条,分析网页的特性并交由响应缓慢的因由。

HTML5 Test

亚洲城888 7

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

 

Icon 资源

  • Font Awesome
  • IconMonster
  • IconFinder
  • Fontello

Git Clients / Services

  • SourceTree:一款免费并且很酷的
    Git 客户端,帮助 Windows 和 Mac。
  • GitKraken
    (Beta):一款免费、直观、雅观的跨平台 Git 客户端。
  • Tower
    2:APP
    很漂亮,需付费。
  • GitHub
    Client:官方客户端。
  • Gogs:一个极易搭建的自助
    Git 服务。
  • GitLab:对个人项目也免费。

Google PageSpeed

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

亚洲城888 8

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

在打造进程中,能够应用 PSI
测试移动端和桌面端的性质,最后得到可读性优异的测试结果。

亚洲城888 9

HTML5 Canvas Cheat Sheet

亚洲城888 10

即使你不可以记住所有 Canvas
的指令和抉择,那么那么些小抄是纯属适合你。可用作一个图片或 PDF
免费下载。

Git Clients / Services

  • SourceTree:一款免费并且很酷的
    Git 客户端,协理 Windows 和 Mac。
  • GitKraken
    (Beta):一款免费、直观、美丽的跨平台
    Git 客户端。
  • Tower
    2:APP
    很漂亮,需付费。
  • GitHub
    Client:官方客户端。
  • Gogs:一个极易搭建的自助
    Git 服务。
  • GitLab:对私有项目也免费。

本土开发环境

  • XAMPP:完全免费,简单安装的
    Apache 分布式环境。包涵:MariaDB,PHP,Perl。
  • MAMP:Apache +
    MySQL + PHP + Python + Perl。
  • WampServer:Windows
    下的 Web 开发环境,可以成立基于 Apache 2,PHP 和 MySQL 的 Web 应用。
  • Vagrant:安装和配置简单、轻量级。
  • Laragon:飞快、容易搭建的
    Windows 本地开发条件。包罗:MySQL,PHP,Redis,Apache。

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

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

亚洲城888 11

Lime JS

亚洲城888 12

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

 

地点开发条件

  • XAMPP:完全免费,容易安装的
    Apache 分布式环境。包含:玛丽亚DB,PHP,Perl。
  • MAMP:Apache +
    MySQL + PHP + Python + Perl。
  • WampServer:Windows
    下的 Web 开发条件,可以创制基于 Apache 2,PHP 和 MySQL 的 Web 应用。
  • Vagrant:安装和安顿不难、轻量级。
  • Laragon:快捷、简单搭建的
    Windows 本地开发条件。包罗:MySQL,PHP,Redis,Apache。

文本比对

  • Diffchecker:文件比对的在线网站。
  • Beyond
    Compare:老牌软件,能快捷相比文件和文书夹,功效强大。

Pingdom 网站速度测试

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

亚洲城888 13

HTML5 Reset

亚洲城888 14

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

 

文本比对

  • Diffchecker:文件比对的在线网站。
  • Beyond
    Compare:老牌软件,能很快相比较文件和文书夹,功效强大。

Code Sharing / Experimenting

  • codeshare:能和其余开发者实时共享代码。
  • JS
    Bin:可以将编辑后的代码保存到本地,或将
    URL 地址发给其余人,让其扶持调试代码。支持HTML,CSS,JavaScript,马克down,Jade 和 Sass。
  • JSfiddle:能自定义环境来测试你的
    HTML,CSS,JavaScript 代码。
  • Dabblet:Web
    playground,交互成效不错。

发表评论

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

网站地图xml地图