js文件加载优化
在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里面的脚本。
<script src="outside.js" defer></script>
他的支持度是<=IE9的.
并且,他的执行顺序,是严格依赖的,即:
<script src="outside1.js" defer></script>
<script src="outside2.js" defer></script>
当页面解析完后,他便会开始按照顺序执行 outside1 和 outside2文件。
如果你在IE9以下使用defer的话,可能会遇到 它们两个不是顺序执行的,这里需要一个hack进行处理,即在两个中间加上一个空的script标签
<script src="outside1.js" defer></script>
<script></script> //hack
<script src="outside2.js" defer></script>
ASYNC加载
async是H5新定义的一个script 属性。 他是另外一种js的加载模式。
渲染引擎解析文件,如果遇到script(with async)
继续解析剩下的文件,同时并行加载script的外部资源
当script加载完成之后,则浏览器暂停解析文档,将权限交给JS引擎,指定加载的脚本。
执行完后,则恢复浏览器解析脚本
可以看出async也可以解决 阻塞加载 这个问题。不过,async执行的时候是异步执行,造成的是,执行文件的顺序不一致。即:
<script src="outside1.js" async></script>
<script src="outside2.js" async></script>
这时,谁先加载完,就先执行谁。所以,一般依赖文件就不应该使用async而应该使用defer.
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)=>{async(src);});
但是,使用脚本一步加载的话,需要等待css文件加载完后,才开始进行加载,不能充分利用浏览器的并发加载优势。而使用静态文本加载async或者defer则不会出现这个问题。
使用脚本异步加载时,只能等待css加载完后才会加载
使用静态的async加载时,css和js会并发一起加载
关于这三种如何取舍,那就主要看leader给我们目标是什么,是兼容IE8,9还是手机端,还是桌面浏览器,或者两两组合。
但是对于单独使用某一个技能的场景,使用时需要注意一些tips。
js文件放置位置应该放置到body末尾
如果使用async的话,最后加上defer以求向下兼容
<script src="test.js" async defer></script> //如果两者都支持,async会默认覆盖掉defer
//如果只支持一个,则执行对应的即可
通常,我们使用的加载都是defer加载(因为很强的依赖关系).
js文件加载优化的更多相关文章
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- js资源加载优化
互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...
- js文件加载太慢,JavaScript文件加载加速
原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...
- JS文件加载:比较async和DOM Script
async与script动态加载都能使文件异步加载,本文叙述它们对页面渲染和load加载的影响方面. 目前我用demo.js作为执行文件操作.代码: var now = function() { re ...
- 【转】html、css、js文件加载顺序及执行情况
原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然 ...
- html、css、js文件加载顺序及执行情况
HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...
- js文件加载执行顺序
转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...
- js模块加载详解
看着java中各种import加载,在回过头来看看javascript还在自己造轮子,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...
- 实现简单的 JS 模块加载器
实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...
随机推荐
- JAVA基础1——字节&位运算
占用字节数 & 取值范围 Java一共有8种基本数据类型(原始数据类型): 类型 存储要求 范围(包含) 默认值 包装类 int 4字节(32位) -2^31~ 2^31-1 0 Intege ...
- JS构造函数模式
构造函数是可以创建特定类型对象的函数,可以接受参数定义函数成员.如果之前做过java比较好理解,举个例子: function exampleFunction(arg1, arg2, arg3){ th ...
- 《Linux命令行与shell脚本编程大全》第十七章 创建函数
可以将shell脚本代码放进函数中封装起来,这样就能在脚本中的任何地方多次使用它了. 17.1 基本的脚本函数 函数:是一个脚本代码块,可以为其命名并在代码中任何位置重用. 17.1.1 创建函数 有 ...
- Android 异步消息处理机制前篇(二):深入理解Message消息池
版权声明:本文出自汪磊的博客,转载请务必注明出处. 上一篇中共同探讨了ThreadLocal,这篇我们一起看下常提到的Message消息池到底是怎么回事,废话少说吧,进入正题. 对于稍有经验的开发人员 ...
- windows配置git
每次要使用git指令的时候都要去打开git bash 操作,太麻烦,要想直接在dos窗口下使用git指令需要再进行如下环境变量配置. 1.系统环境变量path添加:D://programFiles/g ...
- python 生成html文件(表格)
import pandas as pd def convert_to_html(result,title): d = {} index = 0 for t in title: d[] = result ...
- linux 安装 cenos7 和 jdk
安装一个虚拟机安装cenos7 版本的 安装完虚拟机后必备工具 第一步. 配置网路 设置桥接网路设置静态网络参考 下面博文 http://www.cnblogs.com/Jerry1104/p/758 ...
- js 数组去重复的方法
数组去重复是js中常用的方法,归纳了四种如下: 1. for + indexOf 去重复 var arr = [3,5,5,4,1,1,2,3,7,2,5]; var target = []; fo ...
- django1.11如何实时访问mysql数据库
前几天,一直在研究django框架,发现它自身封装了很多有用的API,很有意思.比如,数据库操作基本的创表,查询,插值,更新,删除都有,很方便,再加上json库可以直接将数据json化,通过服务器传给 ...
- Cs Round#54 E Late Edges
题意:给定一个无向图,你从结点1开始走,每经过一条边需要1的时间,每条边都有一个开放时间,只有当目前所用的时间大于等于开放时间时,这条边才可以被经过.每一单位时间你都必须经过一条边,问最快什么时候可以 ...