当<script>标签位于html文档流中的时候,位于<script>后面的html会被阻止渲染,必须等到该script加载完以后才会后面的html才会渲染,通过javascript动态的生成一个script标签,可以避免上面你的这个问题,因为这个会是外部加载的script的文件位于html文档流以外。因此动态的加载外部的javascript文件可以提高页面的渲染速度,提高用户体验。
最佳实践
steve souders关于外部的javascript文件不阻碍html文档的渲染这个问题,在他的书中和博客中公布了集中方法,通过我的思考和实验,我得出了一下三点结论:
1. 创建两个javascript文件。第一个javascript文件包含动态加载外部javascript文件的代码;第二个javascript文件包含所有的外部javascript代码.
2. 把第一个javascript文件放在页面的地步,</body>结束标签的前面。
3. 创建第二个javascript标签通过调用函数来加载外部javascript文件。
下面可以具体的如何实现:
第一个javascript文件要足够的小,一般包含如下的代码:first.js
<code></code>