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取内容

赞 (0)

相关推荐

  • 探析浏览器执行JavaScript脚本加载与代码执行顺序

    探析浏览器执行JavaScript脚本加载与代码执行顺序

    本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕①.这一点是没有争议的,并且在所有浏览器中的行为都是一致的,原因也不难理解:浏览器需要一个稳定的DOM结构,而JavaScript可能会修改DOM(改变DOM结构或修改某个

  • javascript封装addLoadEvent实现页面同时加载执行多个函数的方法

    本文实例讲述了javascript封装addLoadEvent实现页面同时加载执行多个函数的方法.分享给大家供大家参考,具体如下: 如果想同时执行多个函数,可以将这些函数放入一个数组中,然后在onload事件里循环数组并执行,或者使用另一个方便的函数addLoadEvent: function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.o

  • Javascript代码在页面加载时的执行顺序介绍

    一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q

  • 解决用jquery load加载页面到div时,不执行页面js的问题

    jquery代码: 复制代码 代码如下: $(function(){$("#test").load("${contextPath}/notepad/toCreate.do");} 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 复制代码 代码如下: <div id="test">    <i

  • 页面加载完后自动执行一个方法的js代码

    1.在body中用onload: <body onload="myfunction()"> 2.在脚本中用window.onload: <script type="text/javascript"> function myfun() { alert("this window.onload"); } /*用window.onload调用myfun()*/ window.onload=myfun;//不要括号 </scr

  • JavaScript实现当网页加载完成后执行指定函数的方法

    本文实例讲述了JavaScript实现当网页加载完成后执行指定函数的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码演示了如何在网页加载完成时调用指定的函数,并且可以通过第二段代码动态添加多个函数同时执行. 我们只需要给window.onload指定一个函数既可以在页面加载完成时自动执行MyCoolInitFunc函数 <script type="text/javascript" > window.onload = MyCoolInitFunc </scri

  • 解析页面加载与js函数的执行 onload or ready

    首先,页面加载顺序:解析HTML结构.加载外部脚本和样式表文件.解析并执行脚本代码.构造HTML DOM模型.加载图片等外部文件.页面加载完毕. 也就是:html → head → title → #text(网页标题) → style → 加载样式 → 解析样式 → link → 加载外部样式表文件 → 解析外部样式表 → script → 加载外部脚本文件 → 解析外部脚本文件 → 执行外部脚本 → body → div → script → 加载脚本 → 解析脚本 → 执行脚本 → img

  • 页面加载完成后再执行JS的jquery写法以及区别说明

    1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

  • javascript页面加载完执行事件代码

    复制代码 代码如下: <script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成                 document.onreadystatechange = function () {                    if(document.readyState=="complete") {                       

  • 如何让页面加载完成后执行js

    javascript 当页面dom模型加载完成后才执行javascript不能使用<body onload="">加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/x

  • 编写高性能的JavaScript 脚本的加载与执行

    脚本可以放在html页面的head里面,也可以放在body里面. 把脚本放在body中,当浏览器遇见<script>标签时, 浏览器不知道脚本会插入文本还是html标签,因此浏览器会停止分析html页面而去执行脚本.当使用src的方式添加脚本时,浏览器也会做同样的动作.在脚本处理的时候,页面呈现和用户交互将被完全阻止.脚本下载和执行阻塞了其他资源的下载,比如呈现页面使用的图片.(虽然很多浏览器实现了脚本并行下载的技术,但是这个问题依然没有解决) 脚本的位置 鉴于上面的理由,脚本应该始终放在页面

  • JS实现文档加载完成后执行代码

    在执行某些操作的时候,需要当文档完全加载完成之后再去执行,否则可能出现意向不到的情况,先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>我们</title> <style type="text/css"> div{ width:200px; height:200px; } </style

随机推荐