学习javascript文件加载优化

关于JavaScript文件加载优化的深入

在Web开发中，JavaScript文件的加载优化是一个重要的课题。为了提高页面加载速度和用户体验，我们需要对JavaScript文件的加载进行优化。本文将介绍三种实现JavaScript文件加载优化的方式，感兴趣的小伙伴们可以了解一下。

一、将脚本放置在BODY底部

为了让浏览器能够尽快渲染页面，我们应该将脚本放置在HTML文档的底部。这样可以避免在浏览器HTML文档时阻塞页面的渲染。通过将脚本放在底部，我们可以提早触发DOMContentLoaded事件，提高页面的加载速度。在某些情况下，如IOS Safari、Android browser以及IOS webview中，简单的将脚本放在底部可能无法达到预期的效果，因此我们需要采取其他措施来进行优化。

二、使用DEFER属性加载脚本

在HTML4中，我们可以使用DEFER属性来加载外部脚本。当浏览器遇到带有DEFER属性的script标签时，它会暂时挂起脚本的加载，并继续HTML文档。当HTML文档完成时，浏览器会按照顺序执行带有DEFER属性的脚本。这种方式的优点是可以在页面的同时加载脚本，提高了页面的加载速度。DEFER属性的兼容性较差，仅在IE9及以上的版本中支持。为了解决这个问题，我们可以在需要执行的脚本之间添加一个空的script标签作为hack。

三、使用ASYNC属性加载脚本

ASYNC是HTML5中定义的一个script属性，它是一种新的JavaScript加载模式。当浏览器遇到带有ASYNC属性的script标签时，它会并行加载脚本的外部资源，并在脚本加载完成后执行脚本。这种方式的优点是可以异步加载脚本，避免了阻塞加载的问题。ASYNC属性的执行是异步的，执行文件的顺序可能会不一致。对于依赖文件的加载，我们一般使用DEFER属性而不是ASYNC属性。

四、脚本异步加载

除了上述两种方式外，我们还可以使用一些异步加载库（如require）来实现脚本的异步加载。这种方式的原理是通过动态创建script标签来实现异步加载脚本。这种方式不会造成阻塞的效果，但是加载的js文件是无序的，无法直接加载依赖文件。

对函数进行优化是我们此刻的必经之路。这里有一个特定的异步加载脚本的函数，让我们深入一下。

设想一个名为 `asyncAdd` 的函数，它接受一个参数 `src` ，这个参数指定了要加载的脚本文件的路径。该函数会创建一个新的 `