前言
javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍:
当浏览器遇到<script>标签的时候,浏览器必须先话时间下载外链的文件然后并执行,在这过程中,页面渲染和用户交互是完全被阻塞的。
脚本放在哪里比较好?
这种情况无疑是存在严重的性能问题的,由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面渲染才会继续,下面的图就是代码的执行顺序
第一个js文件下载,要等到第一个js文件下载完全才会执行第二个js文件,不过现在IE8,Firefox3.5,Safari4和Chrome2都允许并行下载js文件,遗憾的是,js下载过程还是会阻塞其他资源的下载,例如:图片
所以提高性能的方法之一:将脚本放在body底部
组织脚本
由于每个<script>标签下载时都会阻塞页面的渲染,所以减少页面包含的<script>标签数量是必不可少的,解决方法:可以把多个js文件合并打包成一个js文件,这样子做的好处就是可以最小化延迟时间将会明显的改善页面的总体性能,除此之外,还可以减少HTTP的请求。
一般来说下载单个100KB的文件比下载4个25KB的文件快。
如果有多个外链的js文件,可以合并成一个js文件
无阻塞的脚本
尽管下载单个较大的js文件只产生一次HTTP的请求,但是会假死浏览器一大段时间,为了避免这种情况,你需要向页面中逐步加载js文件。
延迟的脚本
defer属性指明本元素所含的脚本可以延迟执行,但是只有IE4+和Firefox3.5+的浏览器支持