JavaScript阻塞剖析与改善

Avatar
admin

一、阻塞特性

《高性能JavaScript》一书中,关于第一章“Loading and Execution”,提到了无阻塞加载JavaScript技术,目的是为了提高页面呈现速度。

说到无阻塞加载JavaScript要点,我们就有必要知道,为什么在html中不管是内联JavaScript还是外联,会影响到页面的性能?

原因是:JavaScript是单线程,在JavaScript运行时其他的事情不能被浏览器处理。事实上,大多数浏览器使用单线程处理UI更新和JavaScript运行等多个任务,而同一时间只能有一个任务被执行。所以在执行JavaScript时,会妨碍其他页面动作。这是JavaScript的特性,我们没法改变。

并且,html解析过程是至上而下的,当html解析器遇到诸如

需要注意的是,这两个属性对内联JavaScript是无效的,只针对外联JavaScript,如上所示。

加载流程:

当解析器遇到设置defer或者async属性的

Top