加载和执行Javascript优化主题的加载和运行

浏览器中的Javascript的性能被认为是开发商面临的最重要的可用性问题。这个问题是复杂的拦截功能的Javascript,即Javascript运行时,其他的东西不能被浏览器处理。事实上,大多数浏览器使用一个单一的处理多个任务,如UI更新和Javascript运行,只有一个任务可以同时执行。

Javascript运行多长时间,浏览器空闲之前要等待多长时间才能响应用户的输入。

在基本的水平,这意味着标签的外观为脚本解析和运行使得整个页面等待。不论实际的Javascript代码是内联或包含在一个不相关的外部文件,页面下载过程和解析必须停止并等待脚本之前继续完成加工。这是页面生命周期的一个重要组成部分,因为脚本可以修改网页的内容,在操作过程中。

一个典型的例子是document.write()函数,如:






脚本示例









document.write(日期+(New Date()),ToDateString()));












当浏览器遇到一个标签,如上面的HTML页面,它是无法预测是否Javascript添加内容的标签。因此,浏览器停止运行的Javascript代码,然后继续解析和翻译网页。同样的事情发生在使用src属性加载Javascript的过程。浏览器必须先下载外部文件的代码,这需要一些时间,然后解析并运行代码。在这个过程中,页面解析和用户交互完全堵塞。

HTML 4文件显示,标签可以被放置在一个标签或一个HTML文件,它可以出现在很多次。传统上,标签是用来加载外部Javascript文件。除了这类代码,它还包含用于加载外部CSS文件和其他网页标签是中间件。说,最好把风格和行为的部分,和第一次加载,使页面能够得到正确的外观和行为。例如:






脚本示例















你好世界!








虽然这些代码看起来无害,但它们确实存在性能问题:部分加载了三个Javascript文件,因为每个标记阻塞了页面的解析过程,直到它完全下载并运行外部Javascript代码,页面处理才能继续进行。

记住,浏览器在显示标签之前不会显示页面的任何部分。以这种方式将脚本放在页面的顶部会引起明显的延迟,通常表示为:当页面打开时,它首先显示为一个空白页,在那个时候它不能读取或与页面交互。

Internet Explorer 8、Firefox 3.5、Safari 4和Chrome 2允许Javascript文件并行下载。好消息表明,当标签下载外部资源时,不需要阻止其他标记。不幸的是,Javascript下载仍然需要阻止其他资源的下载过程。即使两个脚本之间的下载过程没有被阻塞,页面仍然要等到所有Javascript代码被下载和执行,因此,当浏览器允许并行下载以提高性能时,这个问题还没有完全解决,脚本阻塞仍然是个问题。

由于脚本阻止其他页面资源的下载过程,建议的方法是将标签的所有标签尽可能地靠近,以尽量减少对整个页面下载的影响:






脚本示例







你好世界!
















这段代码显示了HTML文件中推荐标签的位置。虽然脚本下载彼此阻塞,但页面已经下载并显示在用户面前,并且进入页面的速度似乎并不太慢。

以上是关于javascript优化内容的加载和执行的加载和操作的介绍,希望能对大家有所帮助。