1.每个<script>加载时都会阻塞其他文件(图片、音乐等)的同时加载,同时浏览器会在js代码执行时停止渲染Dom.所以为了减少界面加载的卡顿和空白发生,应尽力将js代码或者文件放在</body>前,防止js代码影响Dom渲染。

2.js文件现在浏览器内部已经实现并行加载。提高浏览器加载js性能:a.减小js大小 b.减少内链代码个数 3.http请求会带来额外开销,所以1个100K的js加载时间短语4个25k的。

3.页面无阻塞:考虑在页面框架加载渲染完之后再触发对脚本的下载

window.onload()

可以在<script>标签内加入defer:

 <script src=”index.js” defer></script>

,向浏览器提前说明:本js文件无对dom操作,可以延迟加载执行。目前所有浏览器都已实现.

4.script标签也是Dom对象,所以可以动态添加js脚本。

var script=document.cresteElement(“script”);
script.type = “text/javascript”;
script.scr= ”123.js”;
document.getElementByTagName(“head”)[0].appendChild(script);

可以添加加载完成时的状态:

script.onload = function(){  //除IE外,支持
alert(‘动态js加载完成’);
};
script.onreadystatechange = function(){//IE
//其中readyState 为识别值,有5种取值结果:
// unintialized初始状态 loading下载中 loaded下载完成 interactive 数据完、、 //成下载但不可用 complete 所有数据已经准备完成 if(script.readyState ==”loaded” || script.readyState ==”complete”){
//…………
}
}
}

但是,如何将两种浏览器加载识别模式融合在一起?

function loadScript (url,callback){//url为文件位置,callback为回调函数
var script = document.createElement(“script”);
script.type=”text/javascript”;
script.src=”index.js”;
if(script.readyState){ //ie
script.onreadystatechange = function(){
if(script.readyState ==”loaded” || script.readyState ==”complete”){
callback();
}
}
else{ //其他浏览器
script.onload = function(){
callback();
}
}
script.scr= url;
document.getElementByTagName(“head”)[0].appendChild(script);
}

上面这种是书上给出的只能加载js的函数,怎么用这个函数同样能css动态加载?  自己改良了一下:

    

function afterload(){
alert("已加载");
} function loadScript(url,type,callback){
if("js"==type){
var script = document.createElement("script");
script.type = "text/javascript";
if(script.readyState){ //ie
script.onreadystatechange = function(){
if(script.readyState ==”loaded” || script.readyState ==”complete”){
callback();
}
}
}
else{ //其他浏览器
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
else if("css"==type){
var css = document.createElement("link");
css.setAttribute("rel","stylesheet");//增加属性函数,css.rel()不存在,所以只能setA...出来
css.setAttribute("type","text/css");
if(css.readyState){ //ie
css.onreadystatechange = function(){
if(css.readyState ==”loaded” || css.readyState ==”complete”){
callback();
}
}
}
else{ //其他浏览器
css.onload = function(){
callback();
}
} css.setAttribute("href",url);
document.getElementsByTagName("head")[0].appendChild(css);
}
}

5.可以尝试使用YUI或者Lazyload来做无阻塞加载

6.js的事件冒泡

event事件作为对象存在于widow内或者每一个element节点内部,需要通过传参数(或者直接调用IE中:window.event 全局变量)来对event进行操作

event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

常用的event句柄有onclick,onblur,onfocus等等,常用的属性有ScreenX,ScreenY,button等

当页面为页面内某元素节点绑定句柄并为其句柄绑定函数时,因为元素间包含关系,会导致元素不仅触发自身定义的事件,还触发了其外部元素定义的事件

<div id="wrapper" class=“wrapper” style="background-color:red;">
<button>按钮同志</button>
</div>
<script type="text/javascript">
var _wrap = document.getElementById("wrapper");
_wrap.onclick=function(){
console.log("层点击");
}
var _btn = document.getElementsByTagName("button")[0];
_btn.onclick=function(e){
console.log("按钮点击");
e =window.element || e;
e.cancelBubble = true;
}
</script>

上面点击按钮的时候,先触发了按钮自身的点击事件,后又触发了包裹在button外部的div元素的层点击事件。    这样会导致函数莫名被调用或者传参错误

这就是js事件的冒泡

可以通过event的cancelBubble属性(ie和Chrome) 或者调用  stopPropagation()函数  (FF浏览器)  来执行

document.all属性可以用于区分IE 与 FF ,

if(document.all){

  //这是IE

}

else{

  //火狐

}

为了方便以后调用或者团队开发,可以封装stopPropagation()函数

function stopPropagation(e){
e = window.event || e;
if(document.all){
e.cancelBubble = true;
}
else{
e.stopPropagation();
}
}

button.onclick = function(e){

  stopPropagation(e);

  console.log("按钮点击");

}

《高性能javascript》读书笔记的更多相关文章

  1. csapp读书笔记-并发编程

    这是基础,理解不能有偏差 如果线程/进程的逻辑控制流在时间上重叠,那么就是并发的.我们可以将并发看成是一种os内核用来运行多个应用程序的实例,但是并发不仅在内核,在应用程序中的角色也很重要. 在应用级 ...

  2. CSAPP 读书笔记 - 2.31练习题

    根据等式(2-14) 假如w = 4 数值范围在-8 ~ 7之间 2^w = 16 x = 5, y = 4的情况下面 x + y = 9 >=2 ^(w-1)  属于第一种情况 sum = x ...

  3. CSAPP读书笔记--第八章 异常控制流

    第八章 异常控制流 2017-11-14 概述 控制转移序列叫做控制流.目前为止,我们学过两种改变控制流的方式: 1)跳转和分支: 2)调用和返回. 但是上面的方法只能控制程序本身,发生以下系统状态的 ...

  4. CSAPP 并发编程读书笔记

    CSAPP 并发编程笔记 并发和并行 并发:Concurrency,只要时间上重叠就算并发,可以是单处理器交替处理 并行:Parallel,属于并发的一种特殊情况(真子集),多核/多 CPU 同时处理 ...

  5. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  6. 读书笔记--SQL必知必会18--视图

    读书笔记--SQL必知必会18--视图 18.1 视图 视图是虚拟的表,只包含使用时动态检索数据的查询. 也就是说作为视图,它不包含任何列和数据,包含的是一个查询. 18.1.1 为什么使用视图 重用 ...

  7. 《C#本质论》读书笔记(18)多线程处理

    .NET Framework 4.0 看(本质论第3版) .NET Framework 4.5 看(本质论第4版) .NET 4.0为多线程引入了两组新API:TPL(Task Parallel Li ...

  8. C#温故知新:《C#图解教程》读书笔记系列

    一.此书到底何方神圣? 本书是广受赞誉C#图解教程的最新版本.作者在本书中创造了一种全新的可视化叙述方式,以图文并茂的形式.朴实简洁的文字,并辅之以大量表格和代码示例,全面.直观地阐述了C#语言的各种 ...

  9. C#刨根究底:《你必须知道的.NET》读书笔记系列

    一.此书到底何方神圣? <你必须知道的.NET>来自于微软MVP—王涛(网名:AnyTao,博客园大牛之一,其博客地址为:http://anytao.cnblogs.com/)的最新技术心 ...

  10. Web高级征程:《大型网站技术架构》读书笔记系列

    一.此书到底何方神圣? <大型网站技术架构:核心原理与案例分析>通过梳理大型网站技术发展历程,剖析大型网站技术架构模式,深入讲述大型互联网架构设计的核心原理,并通过一组典型网站技术架构设计 ...

随机推荐

  1. 洛谷P1211 [USACO1.3]牛式 Prime Cryptarithm

    P1211 [USACO1.3]牛式 Prime Cryptarithm 187通过 234提交 题目提供者该用户不存在 标签USACO 难度普及- 提交  讨论  题解 最新讨论 题面错误 题目描述 ...

  2. 如何初始化一个iOS原生地图

    /** 初始化一个mapView  需导入 #import <MapKit/MapKit.h> - returns: 返回一个mapView对象 */ mapView = [[MKMapV ...

  3. Puppet安装与配置简介(附视频教程)

    Puppet是一种Linux平台的集中配置管理系统,他可管理配置文件.用户.cron任务.软件包.系统服务等.puppet把这些系统实体称之为资源,puppet采用C/S星状的结构,所有的客户端和一个 ...

  4. CLRS:max_heap and min_heap operation (pseudocode)

    //max_heap heap_maximum:return A[1]    O(1); Extract_Heap_maximum:swap(A[1],A[heap.size])    adjust ...

  5. openstack openrpc

  6. centos atomic host第一次启动

    centos atomic host安装完成会,第一次启动时会调用cloud-init等服务.这是个什么东东? cloud-init用于在创建虚拟机时通过元数据服务对虚拟机基本配置,包括常见的主机名, ...

  7. EFDC_EE如何设置自适应时间步长

    下图是EFDC_EE的运行时间参数的设置界面,在时间步长的设置中,如果“Safety Factor”参数,设置为非0,即可实现自适应时间步长的设置,但要注意如下几点: 1.“Safety Factor ...

  8. 如何添加localizable.strings本地化

    1.在Supporting Files文件夹右键,NewFile… -> iOS -> Resources -> String Files,命名为Localizable.string ...

  9. PO、BO、VO、DTO、POJO、DAO的区别

    PO: 基本上就是Entity了 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录. 好处是可以把一条记录作为一个对象处理,可以方便的转为其它对象. ---- ...

  10. jquery.form.js实现将form提交转为ajax方式提交的使用方法

    本文实例讲述了jquery.form.js实现将form提交转为ajax方式提交的方法.分享给大家供大家参考.具体分析如下: 这个框架集合form提交.验证.上传的功能. 这个框架必须和jquery完 ...