JavaScript文件加载优化

在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行。 所以,在这里,我们可以对其进行很多优化工作。放置在BODY底部

为了让渲染引擎能够及早的将DOM树给渲染出来,我们需要将script放在body的底部,让页面尽早脱离白屏的现象,即会提早触发DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js脚本放到body尾部,结果还是一样。 所以这里需要另外的操作来对js文件加载进行优化.

DEFER加载

这是HTML4中定义的一个script属性,它用来表示的是,当渲染引擎遇到script的时候,如果script引用的是外部资源,则会暂时挂起,并进行加载。 渲染引擎继续解析下面的HTML文档,解析完时,则会执行script里面的脚本。

他的支持度是

并且,他的执行顺序,是严格依赖的,即:

当页面解析完后,他便会开始按照顺序执行 outside1 和 outside2文件。

如果你在IE9以下使用defer的话,可能会遇到 它们两个不是顺序执行的,这里需要一个hack进行处理,即在两个中间加上一个空的script标签

//hackASYNC加载

async是H5新定义的一个script 属性。 他是另外一种js的加载模式。

渲染引擎解析文件,如果遇到script(with async)

继续解析剩下的文件,同时并行加载script的外部资源

当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。

执行完后,则恢复浏览器解析脚本

可以看出async也可以解决 阻塞加载 这个问题。不过,async执行的时候是异步执行,造成的是,执行文件的顺序不一致。即:

defer的兼容性比较差,为IE9+,不过一般是在移动端使用,也就不存在这个problem了。

脚本异步

脚本异步是一些异步加载库(比如require)使用的基本加载原理. 直接上代码:

function asyncAdd(src){ var script = document.createElement('script'); script.src = src; document.head.appendChild(script);}//加载js文件asyncAdd("test.js");

这时候,可以异步加载文件,不会造成阻塞的效果.

但是,这样加载的js文件是无序的,无法正常加载依赖文件。

这时候,我们需要对上述函数进行优化.

var asyncAdd = (function(){ var head = document.head, script; return function(src){ script = document.createElement('script'); script.src= src; script.async=false; document.head.appendChild(script); }})();//加载文件asyncAdd("first.js");asyncAdd("second.js");//或者简便一点["first.js","second.js"].forEach((src)=>);

但是,使用脚本一步加载的话,需要等待css文件加载完后,才开始进行加载,不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。

使用脚本异步加载时,只能等待css加载完后才会加载

使用静态的async加载时,css和js会并发一起加载

关于这三种如何取舍,那就主要看leader给我们目标是什么,是兼容IE8,9还是手机端,还是桌面浏览器,或者两两组合。

但是对于单独使用某一个技能的场景,使用时需要注意一些tips。

js文件放置位置应该放置到body末尾

如果使用async的话,最后加上defer以求向下兼容

//如果两者都支持,async会默认覆盖掉defer//如果只支持一个,则执行对应的即可

通常,我们使用的加载都是defer加载(因为很强的依赖关系).

好了,js文件加载优化就总结到这,希望对你有帮助。

资源分享

本文来自企鹅号 - 程序猿崛起媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

JavaScript 性能优化技巧分享

1246
来自专栏腾讯IVWEB团队的专栏

React 同构思想

React比较吸引我的地方在于其客户端-服务端同构特性,服务端-客户端可复用组件,本文来简单介绍下这一架构思想。

5480
来自专栏前端人人

React第三方组件5(状态管理之Redux的使用④TodoList下)

本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件5(状态管理之Redux的使用①简...

3525
来自专栏一“技”之长

iOS中使用本地通知为你的APP添加提示用户功能

首先,我们先要明白一个概念,这里的本地通知是UILocalNotification类,和系统的NSNotificationCenter通知中心是完全不同的概念。

511
来自专栏偏前端工程师的驿站

JS魔法堂之实战:纯前端的图片预览

一、前言                                   图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了。在这...

1806
来自专栏java一日一条

一个简单粗暴的前后端分离方案

刚刚参加完一个项目,背景:后端是用java,后端服务已经开发的差不多了,现在要通过web的方式对外提供服务,也就是B/S架构。后端专注做业务逻辑,不想...

351
来自专栏前端说吧

flag - 4-5月份预整理总结的文章目录

923
来自专栏carven

koa+socket.io尝试简单的web动作同步

尝试用过browser-sync辅助开发的前端同学,大概都会感到神奇:在多个端打开网页,网页的动作却是完全同步的。

470
来自专栏IMWeb前端团队

WebWorker简介

本文作者:IMWeb rakuluo 原文出处:IMWeb社区 未经同意,禁止转载 为 JavaScript引入线程技术 不必再用 setTime...

1928
来自专栏我爱编程

Day22psutil&图形界面

psutil 用Python来编写脚本简化日常的运维工作是Python的一个重要用途。 在Python中获取系统信息的一个好办法是使用psutil这个第三方模...

2595

扫码关注云+社区