一、速度的需求

在这一章中,我们将学习更快地执行 JavaScript 的需求,讨论为什么 JavaScript 代码通常很慢,并看看什么样的代码编辑器可以让我们在不改变编码风格的情况下更快地编写 JavaScript。

网站不是一直都很快吗?

似乎不久以前,网站的性能是重要的,但不是真正要求大多数网站。 即使在网络发展的早期,网站速度慢的情况也并不少见——不是因为连接速度或服务器位置,也不是因为使用的浏览器。 在很多情况下,这是因为用于渲染或创建页面功能的 JavaScript 很慢,非常慢。 大多数情况下,这是因为缺乏 JavaScript 的缩小工具和调试器,以及缺乏当今常用 JavaScript 实践的知识。

页面内容总是很慢,这对用户来说是可以接受的,主要是因为大多数用户使用 56k 调制解调器拨号到他们的互联网服务提供商(ISP)。 刺耳的哔哔声提醒用户连接过程。 然后,突然间,用户在桌面上收到连接通知,然后立即打开默认的网络浏览器,这取决于是 Windows 95 上的 Internet Explorer 4 还是 NeXTStep 机器上的 Netscape Navigator。 整个过程是一样的,就像制作一个三明治需要 2 分 42 秒,等待 HotBot 加载一样。

随着时间的推移,用户体验到谷歌,然后突然间,页面速度和加载时间似乎吸引了更多用户的注意力,尽管,即使在今天,谷歌主搜索站点上简单的谷歌主题允许快速下载整个站点的代码。 这是在不考虑网络连接的情况下,总共 1.36 秒,如下图所示,这让我们清楚地知道哪些资源下载得最快,哪些资源下载得最慢。

部分原因是现代浏览器中使用的工具并不存在于 Internet Explorer 或 Netscape Navigator 中。 在调试的早期,JavaScript 结果是通过 JavaScript 警报来调试的,因为当时现代工具还没有出现,所以给开发人员提供了反馈。 而且,今天的开发人员工具集比简单的文本编辑器先进得多。

在下面的截图中,我们展示了一个网站的下载速度使用 Safari 的 Web Inspector:

Weren't websites always fast?

越来越快

JavaScript 本质上是一种非常容易构建的语言。 JavaScript 的一个优势是,JavaScript 是一种解释语言,这意味着开发的代码仍然可以根据项目的规范部署,甚至工作。

非编译代码有好有坏。 不需要编译,开发者可以在很短的时间内在一个完整的 web 应用上快速构建一个网页。 此外,对于新手或中级开发人员来说,它通常是非常平易近人的,这使 web 项目的人员配备变得更容易一些。

现在,不使用编译语言的糟糕之处在于,JavaScript 无法编译,相关开发人员往往会忽略常见错误; 即使代码看起来在工作,它也可能没有有效地工作。 在过去的日子里,开发工具大多是 Windows 上的记事本和网页浏览器,任何错误对用户来说都是显而易见的,忽略了代码性能方面的问题。

如今,我们拥有各种工具集,并基于 JavaScript 技能构建系统。 重要的是要理解,深 JavaScript 知识可以帮助你更好地编写和审查 JavaScript 代码,但在许多情况下,我们作为开发人员也是人,和我们常见的错误,影响我们的 JavaScript 代码添加空格开始在一个函数的括号或忘记分号结束时,我们的代码语句, 为例。

为给定的项目选择一个适当的编辑器,其中包括在编写一行 JavaScript 之前进行基本的错误检查,可以显著提高代码库的性能和质量,而无需学习 JavaScript 的内部工作原理。

选择一个有效的编辑器

选择一个好的编辑器可以极大地影响你的代码质量,以及你的项目编码速度的生产力。 如上一节所述,我们开发人员都是人,我们也会犯错误,无论开发人员的技能水平如何,我们都很容易编写糟糕的 JavaScript。 因此,了解何时使用一种编辑器而不是另一种编辑器是很重要的。 为了涵盖这一点,我将把不同的 JavaScript 代码编辑器分为以下四类:

  • 集成开发环境
  • 中档的编辑
  • 轻量级的编辑
  • 基于云计算的编辑

每种类型的编辑器都有自己的优点和缺点,我们将从最大的编辑器开始,讨论什么时候应该使用其中的一种。 这样做的目的是为了说明在 JavaScript 开发中,什么时候从较大的代码编辑器移到较小的编辑器是合适的。

集成开发环境

集成开发环境(ide)非常高端的软件工具,不仅提供代码编辑,而且代码组织工具,内置的测试工具,代码优化脚本,通常源代码控制集成和代码提示,完成的支持。

使用 IDE 的缺点是,IDE 被设计为在编写代码时不断检查文件更新时的代码。 这导致编辑器有时行动迟缓,反应迟钝,在较慢的系统上使用很痛苦。 通常,JavaScript 开发人员往往不喜欢这些 ide 的迟缓,转而使用其他更快的编辑器。

当大型项目开始时,用户使用的编辑器不适合以适当的方式构造 JavaScript 时,这可能会导致问题。 通常建议您从 IDE 开始,当项目只需要很小的调整时就开始工作。

接下来的部分将讨论一些流行的 JavaScript ide。

Microsoft Visual Studio IDE

如果有任何软件与术语“IDE”直接关联,那么 Visual Studio 就是其中之一。 Microsoft Visual Studio IDE 可以在下面的截图中看到:

The Microsoft Visual Studio IDE

它可以处理多种语言,包括 HTML、CSS 和 JavaScript,同时可以处理其他语言,如 c#、Visual Basic、Python 等。 在 JavaScript 方面,Visual Studio 将深入检查项目的 JavaScript 代码流,并寻找许多轻量级编辑器无法发现的小错误。

对于 JavaScript 开发人员来说,Visual Studio Express Edition For Web 应该足够强大,可以用于任何 JavaScript 项目。

JetBrain 的 WebStorm IDE

对于 JavaScript 开发人员不喜欢 ASP。 NET 和寻找专用的 JavaScript IDE,和/或需要 Mac 或 Linux 解决方案,看看任何比 JetBrain 的 WebStorm IDE 显示如下截图:

JetBrain's WebStorm IDE

这个 IDE 是针对 JavaScript 开发的,它可以处理任何你可以扔给它的JavaScript 技术:node, AngularJS, jQuery… 它也有完整的代码提示和错误检查支持,类似于 Visual Studio,并且它有非常强大的源代码控制支持,包括 Git、SVN,甚至微软的 Team Foundation Server。

现在在 JetBrains 的侧边栏,WebStorm 是一个较低层次的 IDE 与 IntelliJ IDEA 相比,IntelliJ IDEA 是 JetBrain 的旗舰编辑器每一种语言。 IntelliJ IDEA 编辑器的用户界面见下图:

JetBrain's WebStorm IDE

通常,IDEA 最出名的地方是它是一个以 java 为中心的 IDE,但它包含的工具与 WebStorm 一样,而且还有更多。 与 Visual Studio 一样,它可以处理多种语言,但这是以性能为代价的。 例如,如果我们开始在一个较慢的系统上工作,我们可能会注意到 IDEA 比 WebStorm 在 JavaScript 项目上更滞后。

再次,这是由于 ide 需要大量的特性在后台运行,以使我们的代码更好,这在 IDEA 上更明显; 所以,再次强调,从 IDE 开始构建一个结构良好的代码库是很好的,但随着时间的推移,我们在一个缓慢的编辑器中反复工作,我们需要一些更快的东西,已经建立了良好的基础。

考虑到这一点,许多没有发现 IDE 性能问题的开发人员倾向于坚持使用他们选择的 IDE; 然而,其他开发人员将继续使用下一节中的编辑器。

中档编辑器

中档编辑器非常适合已经经过早期开发阶段的项目,或者非常小的项目。 早期使用 IDE 的一个例外是小项目。 这些站点通常是基于内容管理系统的站点,如 WordPress、Joomla、Drupal 等,在这些站点上,大多数 JavaScript 都是为开发人员编写的,并且已经进行了测试。

它们对于简单的代码提示也很有用,有些可以连接到源代码存储库或 FTP 来推送代码。 它们和 IDE 之间的真正区别在于编辑器的速度和缺乏代码质量特性。 许多编辑器只查找代码中明显的错误,比如 JavaScript 中缺少分号。 然而,他们是非常有用的全方位编辑。

Panic’s Coda 编辑器

Coda 是一个 mac only 编辑器,但它支持 HTML, CSS 和 JavaScript 编码。 下面的截图显示了 Coda 的用户界面:

Panic's Coda editor

它也有一些对 Python 和 PHP 的支持,但它不是专门用于运行非 web 代码自己。 它还提供了一个手动的 JavaScript 验证检查器,而不是一个连续的,所以,再次强调,有一些支持来改善你的 JavaScript 和 web 代码,但它并不总是检查错误的时候,你的代码。

微软 WebMatrix 编辑器

WebMatrix 是微软的轻量级网站编辑器。 它支持 Git 和 Team Foundation Server 以及对 ASP 的支持。 NET 项目、PHP 和 NodeJS。 WebMatrix 的用户界面如下截图:

The Microsoft WebMatrix editor

WebMatrix 是一个中档编辑器的例子,当你选择你想要为你的项目使用的编辑器时,你可能想考虑编辑器的特性。

例如,如果你需要 Python 的 Mac 支持,那么 Coda 是一个很好的选择,而 WebMatrix 提供了一组不同的特性,包括 ASP。 网的支持。 这在中等编辑器中是一个常见的主题,其中许多编辑器都是为了做特定的事情而设计的,在保持编辑器尽可能快的同时,只提供对代码库的最低支持。

使用这种类型的任何编辑器,我们可以看到,它们允许我们轻松地连接到现有的项目,并在相当快的编辑器上工作时执行一些代码检查。

轻量级编辑器

有些时候,我们作为 JavaScript 开发者并不关心项目使用的后端平台,只需要一个简单的文本编辑器来编写一些 JavaScript 代码或更新 HTML 文件。 这就是轻量级编辑器的用处。

崇高的文本编辑器

Sublime Text 是一个非常流行的、跨平台的轻量级编辑器。 其用户界面如下截图:

The Sublime Text editor

它以其启动和使用速度以及一些基本的功能而闻名,如语言颜色提示和支持多种语言的基本代码提示。

它也有自己的包管理器,称为包控制,它允许您增强 Sublime Text 来自动化一些常见的代码编辑和编译过程。 不过,它是刚下载的,非常轻量级,允许开发人员添加开发工作流程所需的通用插件。

notepad++编辑器

notepad++编辑器的用户界面如下截图:

The Notepad++ editor

在 Windows 上,一个 JavaScript 编辑器是专属于 Windows 平台,这实际上是一个编辑器,而不是一个 IDE 是 notepad++。 与 Sublime Text 类似,notepad++主要用作文本编辑器,并且有插件支持,但不使用像 Sublime Text 这样的包管理器,所以即使有插件支持,应用也运行得非常快。 它还支持一些项目文件的代码提示,包括 JavaScript。

对于这两种编辑器,或者任何其他轻量级编辑器,由于它们通常不包含代码验证,它们通过在后台运行的验证轻松快速地进行代码更新,但存在编写缓慢或出错代码的风险。

云编辑器

最后,云或网络编辑器是网络开发人员的新工具。 它们允许开发者在浏览器内的代码基础上工作,可以是网页浏览器插件,也可以是纯粹的在线浏览器,它允许开发者在任何操作系统平台上工作,Chrome OS, iPad 或 Android 操作系统,你可能不会考虑在其中编写 JavaScript !

在浏览器中编写代码的优势在于,项目代码是在线托管的,可以是在 Git 中,也可以是在编辑器的托管服务中。 有些插件编辑器允许你像其他编辑器一样在电脑硬盘上工作,但它是用 HTML 和 JavaScript 编写的,并像其他网站一样有后台(如 Python、PHP 或 ASP.NET)。

通常,这些编辑器在功能方面适合于中等编辑器空间。 然而,除了在电脑上不安装编辑器就能在线之外,其中一些网站提供的功能非常少,这就是它们属于这一类的原因。 接下来的小节将给出一些流行的云编辑器示例。

Cloud9 编辑器

Cloud9 编辑器,可用在http://c9.io/,是一个通用的 web 应用 IDE,但是一个云应用,支持 HTML5, PHP, Node.js, Rails, Python/Django 和 WordPress。 以下截图显示了 Cloud9 编辑器的用户界面:

The Cloud9 editor

它还允许你从 Git URL 或 GitHub 项目克隆,所以你可以选择将你的代码托管在 Cloud9 或同步到你自己的 Git 存储库。

Cloud9 的另一个特性是浏览器对 iOS 模拟器测试的虚拟机支持,以及对 Node.js 的控制台支持——同样是在浏览器中。

Codenvy 编辑

另一种在线 ide - codenvy -是可用在http://codenvy.com/。 用户界面如下图所示:

The Codenvy editor

这个编辑器是非常类似于 Cloud9,但它托管云服务项目,如谷歌的 App Engine。 它还可以为 Android 构建应用,同时对 AngularJS 或 jQuery 中流行的库提供完整的 JavaScript 支持。

云编辑器的一个问题是,当项目中涉及 JavaScript 库时,在线编辑器可能无法识别所使用的特定于库的 JavaScript 或 HTML 标记约定,因此在选择云编辑器时考虑特性是很重要的。

对于云编辑器,您可以看到它们遵循一个中型编辑器特性集,但允许对现有项目进行快速连接和更新。

小结

在本章中,我们回顾了 JavaScript 的性能历史,了解了它是如何成为开发人员和企业关注的焦点。 我们还回顾了四种类型的 JavaScript 代码编辑器,现在我们了解了如何为全新的项目从大型 ide 转移到轻量级编辑器,以便进行小的更新和更改。

在下一章中,我们将讨论如何在使用轻量级编辑器时保持代码的高性能。