1.2 上手准备

性能问题通常表明前端架构中存在问题。尽管某些问题可能源于配置欠佳的应用程序后端，但这些问题通常存在于某些特定应用平台（例如PHP或者．NET），不在本书讨论范围之内。本节将研究如何通过交互式练习解决常见的性能问题，从而提高客户的单页面网站的性能。

我们书中假定了一个客户是美国中西部的科伊尔电器维修公司。其负责人联系了你，向你咨询能否让他们的网站变得更快。在本章结束时，你将能够运用技术手段，帮助他们将网站加载时间减少70%。

本节中，你需要在计算机上运行客户的网站，为此需要用到Node.js和Git。你还会使用Google Chrome来模拟到远程服务器的网络连接，这样就可以用一种有意义的方式来衡量工作成果。

1.2.1 安装Node.js和Git

Node.js（可以非正式地称为Node）是一个JavaScript运行时，可以让JavaScript在浏览器之外运行。Node用途广泛，但在这个例子中，你将使用一个小型Node程序，这个程序可以作为本地Web服务器运行客户的网站。你还将通过几个Node模块实现一些优化目标。

为简单起见，此处使用Node代替了传统Web服务器（例如Apache）。你可以使用Node快速启动本地Web服务器，这样无须安装或配置Web服务器，就能够实现本书的练习内容。只需几分钟，你就可以使用Node重现并运行本书中的示例网站——即便没有任何Node经验。

要安装Node，请访问Node.js官网，在下载专区找到你的操作系统对应的安装程序。运行安装程序时，记得选择标准安装选项，以确保Node包管理器（npm）能够被安装。npm提供了http://npmjs.com的权限，让你可以访问广阔的Node软件包生态系统，客户网站的练习也需要用到它。

你还需要安装Git来拉取本章中的客户网站，以及本书后续出现的示例网站。可以通过使用Git，在需要的时候从一个中心位置获取本书代码。如果你熟悉Git操作，那就太好了，但是跟随本书练习并不需要你有Git经验。要下载Git，请访问Git官网，选择你的系统对应的安装程序并运行。安装好Node和Git之后，就可以继续下一步了。

1.2.2 下载并运行客户的网站

可以从GitHub下载本章的客户网站。从命令行将代码仓库下载到一个由你选择的目录中：

        git clone https://github.com/malchata/ch1-coyle.git
        cd ch1-coyle

以上命令会将练习文件从GitHub代码仓库下载到命令行所在的当前工作目录。如果没有安装Git，或者不想复制存储库，可以在https://github.com/webopt/ch1-coyle以zip文件的形式下载这个练习，并在需要的位置解压。

下载练习后，需要使用npm下载Web服务器所需的软件包。在同一文件夹下，运行以下命令下载并安装所需的软件包：

        npm install express

这条命令会将Express框架安装到当前目录。可以使用它创建一个简单的Web服务器，为本例和其他示例提供静态文件，这些示例将在你的计算机上本地运行。无须熟悉Express或者其工作原理，即可继续执行后续步骤。除了从计算机上提供静态文件外，本书所有示例都无须用到该框架的其他特性。

根据网络连接速度的不同，安装可能需要10秒或者更长时间。安装完成后，运行以下命令，启动本地Web服务器：

        node http.js

运行该命令会启动一个本地Web服务器，可以通过在计算机上打开http://localhost:8080/访问客户的网站，如图1-5所示。

如果在8080端口已经运行了另一个服务，那么可以在文本编辑器中打开http.js文件，修改第8行的端口号。要停止运行服务器，请按Ctrl+C。

1.2.3 模拟网络连接

由于是在本地计算机上运行客户网站的，所以向本地主机发出请求不会出现延迟。但没有延迟就很难衡量任何性能提升，因为这种场景下不会存在网络瓶颈。

一种解决办法是，执行这些步骤时，将网站部署到远程的Web服务器。但是对我们的目标来说，这种办法可能过于麻烦。另一种更简单的办法是使用Google Chrome开发者工具。

首先打开Chrome，启用开发者工具。在Windows下需要按F12，在Mac下则要按Command +Alt + I。此时开发者工具应该会出现在Chrome窗口中。另一种办法是选择View ➤ Developer ➤Developer Tools（视图→开发者→开发者工具）菜单。出现Tools菜单时，点击窗口顶部的Network选项卡，如图1-6所示。

在顶部附近，Disable cache的右侧，有一个标记为No throttling的下拉菜单。这是网络节流菜单，单击它将显示选项列表。这些选项可以模拟各种环境，而这些环境有助于性能测试。现在，选择Regular 3G配置，它会模拟一个较慢的移动网络连接。

运行客户网站并设置网络节流之后，可以检查客户的网站，并使用Chrome的开发者工具创建瀑布图。