[读书笔记]高性能JS-加载执行

for web browser have only one thread.while loading or execute js, the UI update will be blocked.some way to improve

1.put js before </body> tag.so js will be loaded and run after page have been fully loaded.

2.orangize script.combine some script to one to reduce HTTP request.

3 no blocked js. loading js after window.onload run or DOMContentedloaded run.

4 ***dynamic script

use async script

some tip http://stackoverflow.com/questions/33470619/why-script-dom-element-can-be-async-loading/33471838#33471838

var script=document.createElement(‘script‘);

script.src=‘aa.js‘;

document.getElementByTagName(‘head‘)[0].appendChild(script);

this way, js will run as soon as loaded.if js need other api,we need to make sure api is run before this js code. so sequence of script is important.

for w3c.we use one of attribute of script,onload to test if script has fully loaded.

script.onload=function(){

  alert(‘loaded‘);

}

but for IE, we use readystatechange event;

it has 4 state, state loaded and state4 complete important.

but not sure which will happen first.if one of two happened,means script fully loaded.one of state run ,we cancel the event;we use

script.onreadystatechange=function(){

if(script.readyState===‘complete‘ || script.readyState===‘loaded‘){

  script.onreadystatechange=null;

  alert(‘loaded‘);

}

}

and combine two to one can make cross browser version.

时间: 2024-10-12 04:20:29

[读书笔记]高性能JS-加载执行的相关文章

js和css的顺序关系及js加载执行优化探索

1. head里的顺序如下,考虑会对请求有何影响: a. 外部js在css前面 <script src="1.js"></script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <linkrel="stylesheet" type="text/css" href=

Clr Via C#读书笔记---程序集的加载和反射

#1 加载程序集 Assembly.Load: public class Assembly { public static Assembly Load(AssemblyName assemblyRef); public static Assembly Load(String assemblyString); } 在内部,Load导致CLR向应用程序集应用一个版本绑定重定向策略,并在GAC中查找程序集.如果传递的是一个弱命名程序集,不会应用版本绑定重定向策略,也不会去GAC中查找程序集. AppD

js便签笔记(8)——js加载XML字符串或文件

1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); xhr.open("GET", "data.xml", false); xhr.send(null); var xmlDoc = xhr.responseXML; console.log(xmlDoc

YUI笔记 1 模块加载

我们通常开发js程序就是使用<script>标签把脚本引入到页面中进行开发,如果是简单的逻辑还好,但是如果是比较庞大的大规模js开发,可能会出现下面的问题: 1.  <script>标签载入脚本和执行脚本是在一起处理的,所以开发人员需要自己控制这个过程 2. <script>标签是阻塞型下载的,所以对用户体验可能会产生影响,所以通常推荐把脚本放在页面底部,一些async和defer属性也部分解决了这个问题 3. <script>的全局变量是共享的,也就是说所

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

【随笔】js加载

有时候,当发现js操作一个dom的时候,发现dom没有找到,这是由于html没有加载完就开始操作该dom的缘故,所以需要在html文档加载完后再加载js,于是我们可以这么做: js方法:window.onload 当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行.这种情况对编写功能性代码非常有利,因为无需考虑加载的次序. window.onload=function(){ alert

(转)JS加载顺序

原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)--第一篇 Javascript加载执行问题探索 楼主做前端开发一年多了,对前端的见解还是多多少少有一点的,今天特拿出来跟大家分享分享. 做前端开发少不了各种利器.比如我习惯用的还是Google浏览器和重型武器Fiddller. 一: 原始情况 首先大家看看如下的代码: 1 <%@ Page Language="C#&qu

js加载xml文件xin

js加载xml文件 作为刚进入软件开发大军的我,以一个水军的资格开始做梦,以一个画者的资格在'一张白纸'上开始涂抹.工作在哪里??工作在哪里呢??? 今天发现一道面试题: 附件中有一个城市列表的city.xml文件,现在需要您通过Javascript脚本对该文件进行解析,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息(界面布局请参考test1.html文件,也可以自行定义). 上网查了一天的资料,绞尽脑汁的试着网上前辈的各种方法,为什么一个个别人成功的案例,

使用async属性异步加载执行JavaScript

HTML5让我兴奋的一个最大的原因是,它里面实现的新功能和新特征都是我们长久以来一直期待的.比如,我以前一直在使用placeholders,但以前必须要用JavaScript实现.而HTML5里给JavaScript标记提供的async属性,使JavaScript能异步加载执行.之前我需要各种的JavaScript插件来实现这种功能,但现在这个新属性能让我们轻松的实现异步加载. async – HTML代码 真的非常简单,就像下面这样: <script async src="siteScr

js加载完全

如何确定一个js是否加载完全或者页面中的所有js加载完全,具体办法如下: function loadScript(url , callback){ var script = document.createElement("script"); script.type="text/javascript"; if(script.readyState){ script.onreadystatechange = function(){ if(script.readyState