移动网络开发基础知识

2014 年 Chrome 开发者峰会上,我们涵盖了许多新 API 的主题和品牌,但并不完全关注全新的精彩 API。

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

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

学习

HTML5Rocks 上的 WebFundamentals

网站开发基础是一组以用例为导向的文档,涉及一系列主题。其核心目标是让开发者从一无所知甚至不知情,从而尽快实现最佳实践。

Web 基础知识的一个主要目标就是确保您不熟悉某个主题,该指南会尽可能减少“选择瘫痪”。Addy Osmani 介绍了糕点盒中的相关内容。

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

Build

系列设备上的 Web Starter Kit

为帮助您启动新的 Web 项目,我们创建了 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 Add to home screen。

风格指南

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

Web Starter Kit 的最后一部分是风格指南。

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

下一版 WSK(将于明年年初发布)中,正努力简化样式指南的整合方式,并改用 Material Design 外观和风格。Matt在 Chrome 开发者峰会上提前对该情形进行了模拟,您可以看到下面的示例。

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

迭代

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

开发者工具中有一些重要的新功能,Matt 介绍了以下新功能。

设备模式

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

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

Device Mode 的其中一项出色功能是能够限制网速,让您可以模拟用户在 GPRS、EDGE、3G、DSL 或 Wifi 连接时的体验。

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

绘制性能分析器

如果您曾打开时间轴标签页并点击记录按钮,那么您可能已经看到瀑布中发生了一些绘制事件。通常,这会显示为一个黑框,您无法了解浏览器为何或正在执行的操作。

绘制性能分析器不会为您提供有关浏览器在绘制期间具体执行什么操作的更多信息。

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

失效跟踪

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

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

火焰图视图

这是一种截然不同的方式查看时间轴中提供的信息。这样可以更轻松地了解任务的重叠情况以及其他任务导致的浏览器行为。

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

帧查看器

在“火焰图”视图中,您可以选择特定框架,在此框架内,您可以了解页面中的哪些元素已提升为复合层,以及这些元素提升的原因。

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

学习、构建. 迭代

以上是 Chrome 团队为帮助开发者加快 Web 开发速度而做的一些工作,请务必查看 Web 基本法则Web Starter KitChrome 开发者工具中的新功能。