《高性能javascript》读书笔记

时间:2022-09-23 18:18:43

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. 高性能JavaScript读书笔记

    零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...

  2. 高性能javascript学习笔记系列&lpar;1&rpar; -js的加载和执行

    这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...

  3. 高性能javascript学习笔记系列&lpar;6&rpar; -ajax

    参考 高性能javascript javascript高级程序设计 ajax基础  ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...

  4. 高性能javascript学习笔记系列&lpar;5&rpar; -快速响应的用户界面和编程实践

    参考高性能javascript 理解浏览器UI线程  用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程  UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...

  5. 高性能javascript学习笔记系列&lpar;4&rpar; -算法和流程控制

    参考高性能javascript for in 循环  使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...

  6. 高性能javascript学习笔记系列&lpar;3&rpar; -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  7. 高性能javascript学习笔记系列&lpar;2&rpar;-数据存取

    参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文   当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...

  8. 数据结构与算法JavaScript 读书笔记

    由于自己在对数组操作这块比较薄弱,然后经高人指点,需要好好的攻读一下这本书籍,原本想这个书名就比较高深,这下不好玩了.不过看着看着突然觉得讲的东西都比较基础.不过很多东西,平时还是没有注意到,故写出读 ...

  9. 高性能的JavaScript -- 读书笔记

    高性能的JavaScript 一.      加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...

  10. 你不知道的javascript读书笔记3

    概述 这是我看<你不知道的JavaScript(中卷)>中关于类型检查的笔记,供以后开发时参考,相信对其他人也有用. typeof 我们知道js中有七种内置类型:undefined, nu ...

随机推荐

  1. android studio 集成微信登录

    参考: 1.http://blog.csdn.net/suma_sun/article/details/50752528 2.这个更全面一点 : http://www.jb51.net/article ...

  2. FusionCharts或其它flash的div图层总是浮在最上层的问题

    div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上. 由于FusionCharts的图表都放在div中,如果页面还有其他的div,将 ...

  3. R&lpar;五&rpar;&colon; R常用函数

    工作笔记记录,会持续更新.... 目录: apply tapply lapply sapply merge substr.substring.strsplit.unlist.paste.paste0. ...

  4. Android学习笔记——Activity的启动和创建

    http://www.cnblogs.com/bastard/archive/2012/04/07/2436262.html Android Activity学习笔记——Activity的启动和创建 ...

  5. 调整系统的inode数量

    inode节点中,记录了文件的类型.大小.权限.所有者.文件连接的数目.创建时间与更新时间等重要的信息,还有一个比较重要的内容就是指向数据块的指针. 一般情况不需要特殊配置,如果存放文件很多,需要配置 ...

  6. Win10系统下安装Ubuntu16&period;04&period;3教程与设置

    在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...

  7. Spring&plus;SpringMVC&plus;Mybatis框架整合流程

    一:基本步骤 新建Maven项目,导入相关依赖.(推荐) ————–Mybatis配置 —————- 新建entity包,并根据数据库(表)新建相关实体类. 新建dao包,并根据业务创建必要的mapp ...

  8. parquet 简介

    原文 Parquet 列式存储格式 面向分析型业务的列式存储格式 由 Twitter 和 Cloudera 合作开发,2015 年 5 月从 Apache 的孵化器里毕业成为 Apache *项目 ...

  9. Js组件的一些写法

    首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...

  10. 全局 SqlConnection

    class SqlHelper { public static SqlConnection conn; public static SqlConnection Open(string connStr) ...