文档中心 >Google PageSpeed

延迟解析JavasSript

概览

为了加载一个页面,浏览器必须分析所有的<script>标记,这增加了额外的时间来加载页面内容。通过最小化渲染页面所需的JavaScript数量,并推迟不必要的JavaScript解析,直到需要它时才执行,这可以减少你的页面初始加载时间。

说明及方法

这有几种可用于延迟JavaScript解析的技术。

  • 最简单的和优选的方法是延迟加载JavaScript,直到它需要的时候。
  • 第二种技术是在适当情况下使用<script async>属性,延迟到浏览器的UI线程不是忙着做别的时候,以防止因解析堵塞初始页面的加载。

如果没有这些合适的技术,这有一些在移动应用中附加的通常使用的技术,描述如下:

  • 在构建移动应用程序时,它能加载前面应用程序需要的所有JavaScript,所以应用程序可以在用户处于离线状态的时候继续工作。在这种情况下,一些应用中,如移动Gmail,找出对它有用的JavaScript加载在注释里和后面在需要的时候eval() 这些JavaScript。这种方法可以保证所有的JavaScript是在初始页面加载时加载,而不要求解析JavaScript。
  • 另一种在注释存储代码的方法是在JavaScript字符串中存储代码。当使用这种技术,JavaScript是在需要的时候才解析,再需要时通过在字符串中调用eval()函数。这种技术也允许应用程序在早期加载JavaScript,但是延迟解析,直到它被需要的时候。
  • 简单地来说,就是先加载所有JavaScript,然后哪个地方需要就在哪个地方解析。如果你对这个说明还不够明白或者对这项技术还不太了解的话,请看看这里的例子合并外部JavaScript,里面使用了eval(),其实就是“先加载后解析”的意思。

必要性

请注意,移动<script>标记到页面底部是次要的,因为浏览器还会继续显示忙碌的指示,直到页面完成解析这个JavaScript为止。用户可能需要等待到页面加载指示器显示页面加载已经完成,才可以与页面进行交互,所以把加载JavaScript所花费的用以浏览器指示加载网页完毕的时间最小化是重要的。

在测试中,我们发现,在现代移动设备,JavaScript每增加一千字节将使整体页面加载增加1ms解析时间。因此,在初始页面中包含加载100KB的JavaScript将为您的用户增加100ms的加载时间。因为JavaScript必须在每访问一个页面时都要解析,这个增加的加载时间将是每一个页面加载的一部分,无论是从网络加载,还是通过浏览器缓存或HTML5离线模式加载。