高效JavaScript学习（1）--- Script 的加载和执行

来源：互联网发布：安卓换字体软件编辑：程序博客网时间：2024/05/17 23:07

Javascript的阻塞特性

javascript的性能很大程度影响前段的工作效率，主要是因为浏览器执行javascript代码的时候，不能做其他的任何事情。用户页面UI的更新与javascript代码的执行和下载公用一个进程，所以同一时刻只能去做一件事情。

这样导致的原因是<script>标签每次出现后，页面就会停止加载去等待他的下载、解析、执行。

JS的脚本位置

如何对脚本进行组织

Script标签在初始下载过程中会组织页面的渲染，因此较少script的标签有助于较少http请求所带来的消耗，从而有助于脚本的开发。YUI，dojo等都提供了专门的工具进行脚本的压缩和合并。

无阻塞脚本

当页面js文件过多时，将所有js代码压缩到同一js文件是不可行的，所以推荐使用无阻塞的脚本；

无阻塞脚本生成方法就是在页面加载完成以后去加载Javascript代码，也就是$(function(){ …. })中进行代码的加载。

无阻塞脚本主要有以下的解决方案：

1）使用延迟脚本，当<script>标签中不含有DOM操作的时候，<script>标签可以安全的进行延迟执行，故我们可以使用defer属性即<script type=’text/javascript’ src=’….’ Defer/>

2）动态创建脚本元素，可以通过

$(“<script src=’…’ type=’text/javascript’></script>”).appendTo(“head”)来动态的创建script标签，从而可以自己确定script加载运行的位置，同时阻塞其他的进程信息。

3）通过ajax请求进行标签的注入，在页面加载到必须的js文件后，可以使用ajax请求来对页面中的外部js文件进行请求，从而避免了<script>标签在下载时的阻塞特性。$.load(“****.js”)