Javascript 加载和执行-性能提高篇_javascript技巧

Js的阻塞性
Javascript 在浏览器中的性能问题,可能是最重要的可用性问题
Js的阻塞性 浏览器用单一进程来处理UI进程和Js的执行
不管是内嵌的还是外链的,下载并立即执行 因为它有可能会修改页面

页面生存周期的概念
瀑布图中看到了下载时间和executing time
在head中加入script 和link body加载到前不会输出任何东西,因此会看到空白页面

复制代码 代码如下:

<script type="text/javascript">
document.write("The date is" + (new Date().toDateString()));
</script>

页面在到script时,不知道script里会做什么,所以必然阻塞,等它执行
Ie8 等浏览器能并行下载多个js等资源,但是还是对下载图片有影响
结论, 将脚本放在底部加载

组织脚本
目标 最小化迟延时间
问题
引用多个script文件 内嵌多个script标签
每个http请求都会带来性能上的开销
紧跟在link 后的script 是个错误 它会等待css的加载,以求获得最精准的描绘
结论:减少script标签的数量
将多个js文件合并成一个,打包工具
yahoo的合并处理器

无阻塞的脚本
js倾向于阻止浏览器的某些处理过程,如http请求处理和界面更新.这是最重要的性能问题。于是要减少js文件大小和限制http请求数
但是功能丰富与代码量之间的矛盾, 合并成单个文件却体积大会锁死浏览器一大段时间,于是我们需要逐步加载javascript文件
重点:在页面加载完成后加载javascript文件

1、延迟加载脚本
defer 属性
如果要下载的js文件不会进行dom操作,那么defer属性有很大的用处,它能让文件并行下载,并不会立即执行,而会在onload事件后再执行,适用于任何script标签
2、动态加载脚本
一个function

复制代码 代码如下:

function loadScript(url,callback){
var script = document.createElement('script');
script.type = 'text/javascript';
if(script.readyState) { //IE
script.onreadyStatechange = function(){
    if(script.readyState == 'loaded' || script.readyState == 'complete') {
script.onreadyStatechange = null;
     callback();
}
} else {
script.onload = function(){
callback();
}
}
}

这里要注意浏览器的兼容性,删除事件,
如果有多个文件需要这样加载,那么可以

复制代码 代码如下:

loadScript('file1.js', function(){
loadScript('file2.js',function(){
})
});

3、XHR脚本注入

复制代码 代码如下:

var xhr = new XMLHttpRequest();
xhr.open('get','file1.js',true);
xhr.onreadystatechange= function(){
  if(xhr.readyState == 4) {
    if(xhr.status >= 200 && xhr.status <=300 || xhr.status==304) {
var oScript = document.createElement('script');
     oScript.text = xhr.responseText;
     document.body.appendChild(oScript);
}
}
}

304表示从缓存取 text将ajax的内容放入text

它的优点
兼容性好,异步, 缺点:不能扩域 不能从cdn取内容

时间: 2016-12-28

Javascript 加载和执行-性能提高篇_javascript技巧的相关文章

JS判断图片是否加载完成方法汇总(最新版)_javascript技巧

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧. 一.load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 二.jquery方法 <script

高性能JavaScript:加载和执行

       在步入正题之前为大家介绍一本很好的书<高性能JavaScript>大家不妨看一下,在本文中我为大家分享我看这本书的一些收获. 阻塞特性:        JS 有个很无语的阻塞特性,就是当浏览器在执行JS 代码时,不能同时做其他任何事情,无论其代码是内嵌的还是外部的. 脚本位置:       浏览器在碰到一个引入外部JS 文件的<script>标签时会停下所有工作来下载并解析执行它,在这个过程中,页面渲染和用户交互完全被阻塞了,为了避免页面加载时的停顿甚至空白页的出现,

JavaScript 动态加载脚本和样式的方法_javascript技巧

一 动态脚本 当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能; 所以就出现了动态脚本的概念,在适时的时候加载相应的脚本; 1.动态引入js文件 var flag = true; if(flag){ loadScript('browserdetect.js'); // 调用函数,引入路径; } function loadScript(url){ var script = document.createElement('script'); // 创建script

JavaScript 学习 - 提高篇_javascript技巧

JavaScript 学习 - 提高篇 一. JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合, 有点类似于Java中的HashMap, 所有这些数据都是Object里的property. 通常情况下, JavaScript中建立一个对象用"new"加上constructor function来实现. 如new Date(), new Object()等. var book = new Object();book.name = &

in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案_javascript技巧

国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

Javascript 实现广告后加载 可加载百度谷歌联盟广告[原创]_javascript技巧

本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告.百度联盟广告和谷歌联盟广告.这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好. 我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的. 那么怎么解决这种问题呢?先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告. 下面我们看具体的

JavaScript怎么判断图片是否加载完成以便获取其尺寸_javascript技巧

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以,求方法? 一.load事件 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src=https://yunq

javascript firefox 自动加载iframe 自动调整高宽示例_javascript技巧

iframe 自动获取onload高宽 复制代码 代码如下: function AutoResize(iframe) { //firefox if(iframe.contentWindow) { iframe.height = iframe.contentWindow.document.documentElement.scrollHeight; iframe.width = iframe.contentWindow.document.documentElement.scrollWidth; }

微信小程序加载更多 点击查看更多_javascript技巧

本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子: index.wxml代码如下 <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> <view class="duanzi-vie