移动网络开发基础知识

2014 年 Chrome 开发者大会上,我们涵盖了一系列主题和全新的 API,但并非所有内容都与新奇事物有关。

如果您是刚刚开始探索新 API 的 Web 开发新手,甚至是经验丰富的开发者,那么您很可能会遵循以下三个步骤:学习、构建和迭代。

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

学习

HTML5Rocks 上的 WebFundamentals

网站开发基础是一组以用例为导向的文档,涵盖了一系列主题。核心目标是让开发者从一无所知到尽快实现最佳实践。

Web 基础知识的主要目标之一是确保,如果您刚开始接触某个主题,这些指南可以尽可能减少“选择困难症”。Addy OsmaniPastry Box 中对此进行了完美阐述。

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

构建

在 Range 设备上使用 Web 入门套件

为了帮助您着手创建新的 Web 项目,我们制作了 Web 入门套件。它包含您所需的一切:

  • 完善的构建流程
  • HTML 样板
  • 风格指南

构建流程

对于刚接触构建流程的用户,最简单的构建流程理解方法是将其视为一个程序,该程序会获取一组文件并对其执行特定任务,然后在其他位置输出新版本。这些任务会优化文件以缩短加载时间、检查可能存在的错误或处理可自动执行的任务。

在 Web 入门套件中,我们有以下流程:

Web 入门套件构建流程示意图

我们会对 CSS 和 JavaScript 进行压缩和串联,以便浏览器能够快速提取文件,同时还会通过 JSHint 运行 JavaScript 以检查是否遵循了 JavaScript 最佳实践和是否存在常见的编码错误。图片会使用 imagemin 进行缩减,这样可以大幅缩减文件大小。我们还制定了创建样式指南 CSS 的过程。

多设备 HTML 的样板

您为新网页编写的第一组 HTML 非常标准,而且您很可能有某种方法可以快速获取适用于多种设备和屏幕尺寸的标准 HTML 文件。

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

Web 入门套件“添加到主屏幕”示例。

风格指南

Chromebook Pixel 上的 Web 入门套件样式指南。

Web 入门套件的最后一部分是其样式指南。

这样,任何新项目都可以获得一组出色的默认样式和组件,从而鼓励以样式为导向的开发。您可以更改元素的现有样式,也可以添加自己的样式。

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

Web 入门套件的 Material Design 样式指南模拟。

迭代

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

开发者工具中推出了一些重大的新功能,Matt 将介绍以下新功能。

设备模式

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

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

设备模式的一项出色功能是能够节流网络速度,让您能够模拟用户在 GPRS、EDGE、3G、DSL 或 Wi-Fi 连接中的体验。

Chrome DevTools 中网络节流的屏幕截图。

绘制性能分析器

如果您曾打开时间轴标签页并点击“记录”按钮,可能已经在瀑布流中看到了一些绘制事件。通常,这是一个黑盒,您无法得知浏览器为何这样做或它在做什么。

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

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

失效跟踪

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

Chrome 开发者工具中无效化跟踪的屏幕截图。

火焰图视图

这是一种非常不同的方式来查看时间轴中提供的信息。这样,您就可以更轻松地了解任务如何重叠,以及其他任务导致了哪些浏览器行为。

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

帧查看器

在火焰图视图中,您可以选择特定帧,然后在其中探索页面中的哪些元素已提升为复合图层,以及提升的原因。

Chrome 开发者工具中 Frame 查看器的屏幕截图

学习。构建. 迭代

这些是 Chrome 团队为帮助开发者快速上手 Web 开发而做出的一些努力,因此请务必查看Web 基础知识Web 入门套件以及 Chrome DevTools 中的新功能。