最佳实践,优化的JavaScript加载(Best practice to optimize jav

2019-09-16 12:08发布

我对优化Java脚本加载在线阅读几篇文章。 我有几个关键点是减少的脚本文件(http请求),缩小的数量和在服务器上启用gzip。 目前,是什么在我身边做的是,所有的JavaScript文件精缩,和gzip可以简单地使能的。

第1部分)

我的问题是,我有大约20 JavaScript文件,有一个拥有所有的核心功能之一common.js。 除此之外,每一页都将加载实现该页面的功能,至少一个其他文件。

解决方案1,是所有脚本在一个大的脚本文件相结合,并为每一个客户,这似乎是别人都在做得到加载一次。 我想YUI或JSMin可用于压缩,所以我应该手动将文件结合起来?

方案2,需要所需的功能时延迟加载,我真的不知道这是如何工作的,但它似乎是一个办法做到这一点,但仍需要更多的HTTP请求。 我很想听听这方面的任何投入。

第2部分)

我工作的Web应用程序将被部署到许多其他计算机,因为JavaScript的是非常小的,它是一个很好的做法,使一个脚本,从中央服务器动态加载最新的脚本,让每一位客户将运行最新的脚本?

Answer 1:

第1部分:就像你说的,有两种方法。

  • 方案1是有效的,并且有工具,有要做到这一点,包括谷歌的关闭编译器 。 问题是,在大多数情况下,它需要在您的网站的每一个脚本被列入才能正常工作,所以不管你的页面可能会使用的东西,它得到的一切
  • 方案2也是有效的,但就像你说的并没有真正阻止多个HTTP请求。 但是,这是很好的,因为它只会加载你需要什么,当你需要它,并且不产生在初始页面加载任何阻塞调用。 Head.js是被提及,以及Require.js和其他的选项。

第2部分:

  • 有办法强制浏览器总是下载最新的JavaScript文件,尽管这种否定浏览器缓存的好处。 一种常见的方式是一个GET变量添加到JavaScript网址的结尾,即“domain.com/index.js?timestamp=_123123123”。 这类似于当你关闭缓存为它的Ajax调用什么jQuery不会。


Answer 2:

一般最佳实践被认为是

  1. 合并后的文件尽可能

  2. 缩小

  3. 服务gzip压缩

  4. 服务尽可能晚(一些可能需要在头部,但优选通常之前或异步

这是一般性的建议,你需要做的是和测试,以确保它最适合你的情况。

尽量减少HTTP请求是很重要的,延迟是一个性能杀手...



Answer 3:

你必须打破优化成几个步骤

  1. 优化源代码:有良好做法写出具有较少的DOM开销JS代码,产生更少的变量和DOM元素在内存中,高效循环等,这些通常无法通过脚本编译器进行优化。
  2. 缩小:这有两个解决方案
    • 合并成一个文件,并缩小。(使用谷歌的关闭编译器, 丑化 )
    • 缩小每个文件,然后延迟加载。 我个人比较喜欢使用来定义我的模块AMD模块化模式。 您可以使用一个启动文件要么选择编译成一个文件或保持模块结构和延迟加载,但每个模块已经过压缩了。
  3. 服务器优化
    • 请问您的服务器成为压缩的javascript?
    • 尝试使用<script src='//...' async defer>如果可能,如果有脚本的依赖,使用asycn装载时要小心。 如果你使用AMD模块,这将确保您的相关模块被加载提前,而他们只有每个页面的刷新加载一次。
    • 使用CDN服务您的静态内容,存储内容分发网络上你的图片,文件,JavaScript


文章来源: Best practice to optimize javascript loading