移动网络开发基础知识

Chrome 开发者峰会 2014 上,我们讨论了很多主题和品牌,对新 API 进行了介绍,但并不是所有新 API 都闪亮登场。

无论您是新手 Web 开发者,还是即将开始探索新 API 的经验丰富的开发者,都可以遵循以下三个步骤:学习、构建和迭代。

Matt Gaunt 介绍了 Chrome 开发者平台团队为解决这些问题而持续付出的努力。

了解

HTML5Rocks 上的 WebFundamentals

网站开发基础是一组以应用场景为导向的文档,涵盖一系列主题。核心目标是让对所知甚少或一无所知的开发者尽快实施最佳实践。

“网站开发基础”的一个主要目标就是,确保您对某个主题不熟悉,该指南能够尽可能减少“选择瘫痪”。Addy OsmaniPastry Box 中完美解决了这个问题。

如果您发现网站或其内容存在任何问题,或者您希望“Web 基本法则”中涵盖某个特定主题,请在 GitHub 上提交反馈告诉我们。

构建

适用于各种设备的 Web Starter Kit

为了帮助您启动一个新的网络项目,我们制作了 Web Starter Kit。它具备您所需的一切:

  • 可靠的构建流程
  • 样板 HTML
  • 风格指南

构建流程

如果您是刚接触构建流程的人,最简单的构建流程就是将其视作一个程序,这个程序接受一组文件,对这些文件执行某些任务,然后在不同位置输出新版本。这些任务会优化文件以缩短加载时间、检查可能的错误或处理可以自动执行的任务。

在 Web Starter Kit 中,我们有以下流程:

Web Starter Kit 构建流程示意图

我们会缩减 CSS 与 JavaScript 的大小并将其串联起来,以便浏览器快速提取文件,同时通过 JSHint 运行 JavaScript 以检查 JavaScript 最佳实践和常见编码错误。您可以使用 imagemin 来缩减图片大小,而且可以用这种方式大幅缩减文件大小。我们还有一个创建样式指南 CSS 的流程。

适用于多设备 HTML 的样板

您为新页面编写的第一组 HTML 属于非常复杂的标准,您或许能通过某种方式快速获取适用于多种设备和屏幕尺寸的库存 HTML 文件。

在 Web Starter Kit 中,我们希望添加对任何会导致平台与网站之间界限模糊的功能的支持,因此添加了对 Android、Windows Phone、iOS 和 Opera Coast 的添加到主屏幕和启动画面的支持。

示例:“将 Web Starter Kit 添加到主屏幕”。

风格指南

Chromebook Pixel 上的 Web 新手工具包风格指南。

Web Starter Kit 最后一部分是 Styleguide。

这为任何新项目提供了一组出色的默认样式和组件,有助于鼓励样式驱动开发。您可以将现有样式更改为元素,并添加自己的样式。

在下一版 WSK(将于明年年初发布)中,我们正在努力简化样式指南的整合方式,并改用 Material Design 的外观和风格。Matt展示了Chrome 开发者峰会早期的模拟场景,您可以查看以下示例。

Web Starter Kit 的 Material Design 样式指南模拟。

迭代

开始将新知识付诸实践后,您需要使用开发者工具来调试、改进和维护工作。

开发者工具中引入了一些巨大的新功能,Matt 介绍了以下新功能。

设备模式

“设备模式”是开发者工具中的一个新部分,可让您快速了解网站在不同移动设备上的运行情况,同时在 CSS 中查看媒体查询。

Chrome 开发者工具中设备模式功能的屏幕截图。

Device Mode 的一个强大功能是能够限制网速,从而让您模拟使用 GPRS、EDGE、3G、DSL 或 Wi-Fi 连接的用户体验。

Chrome 开发者工具中的网络节流功能的屏幕截图。

绘制性能分析器

如果您打开时间轴标签页并点击“录制”按钮,可能会看到广告瀑布流中发生了一些绘制事件。通常,这是一个黑盒子,您无法了解浏览器执行相应操作的原因或执行的操作。

绘制性能分析器可让您详细了解浏览器在绘制期间具体执行的操作。

Chrome 开发者工具中绘制分析器的屏幕截图。

失效跟踪

现在,开发者工具会给出任何可能发生绘制或布局的原因,这对了解时间轴和浏览器行为的任何人都很有用,并且可让您优化代码以防止性能问题。

Chrome Devtools 中的失效跟踪的屏幕截图。

火焰图视图

与查看时间轴中提供的信息的方式截然不同。这样,您就可以更轻松地查看任务的重叠情况以及因其他任务而导致的浏览器行为。

Chrome 开发者工具中火焰图视图的屏幕截图。

帧查看器

在火焰图视图中,您可以选择特定框架,并在其中查看页面中的哪些元素已提升为复合层以及它们被提升的原因。

Chrome 开发者工具中的 Frame Viewer 的屏幕截图

学习、构建. 迭代

这些是 Chrome 团队为了帮助开发者掌握 Web 开发技术而做出的一些努力,因此,请务必查看 Web 基础知识Web Starter Kit 以及 Chrome 开发者工具中的新功能。