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》读书笔记的更多相关文章
-
高性能JavaScript读书笔记
零.组织结构 根据引言,作者将全书划分为四个部分: 一.页面加载js的最佳方式(开发前准备) 二.改善js代码的编程技巧(开发中) 三.构建与部署(发布) 四.发布后性能检测与问题追踪(线上问题优化) ...
-
高性能javascript学习笔记系列(1) -js的加载和执行
这篇笔记的内容主要涉及js的脚本位置,如何加载js脚本和脚本文件执行的问题,按照自己的理解结合高性能JavaScript整理出来的 javascript是解释性代码,解释性代码需要经历转化成计算机指令 ...
-
高性能javascript学习笔记系列(6) -ajax
参考 高性能javascript javascript高级程序设计 ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读 ...
-
高性能javascript学习笔记系列(5) -快速响应的用户界面和编程实践
参考高性能javascript 理解浏览器UI线程 用于执行javascript和更新用户界面的进程通常被称为浏览器UI线程 UI线程的工作机制可以理解为一个简单的队列系统,队列中的任务按顺序执行 ...
-
高性能javascript学习笔记系列(4) -算法和流程控制
参考高性能javascript for in 循环 使用它可以遍历对象的属性名,但是每次的操作都会搜索实例或者原型的属性 导致使用for in 进行遍历会产生更多的开销 书中提到不要使用for in ...
-
高性能javascript学习笔记系列(3) -DOM编程
参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
-
高性能javascript学习笔记系列(2)-数据存取
参考 高性能javascript Tom大叔深入理解javascript系列 相关概念 1.执行上下文 当控制器转到ecmascript可执行代码的时候,就会进入一个执行上下文,执行上下文是以堆栈 ...
-
数据结构与算法JavaScript 读书笔记
由于自己在对数组操作这块比较薄弱,然后经高人指点,需要好好的攻读一下这本书籍,原本想这个书名就比较高深,这下不好玩了.不过看着看着突然觉得讲的东西都比较基础.不过很多东西,平时还是没有注意到,故写出读 ...
-
高性能的JavaScript -- 读书笔记
高性能的JavaScript 一. 加载和运行 将脚本放在底部 脚本下载解析执行时,页面已经加载完成并显示在用户面前 成组脚本 减少外部脚本文件数量,整合成一个文件 延迟脚本 动态脚本元素 ...
-
你不知道的javascript读书笔记3
概述 这是我看<你不知道的JavaScript(中卷)>中关于类型检查的笔记,供以后开发时参考,相信对其他人也有用. typeof 我们知道js中有七种内置类型:undefined, nu ...
随机推荐
-
android studio 集成微信登录
参考: 1.http://blog.csdn.net/suma_sun/article/details/50752528 2.这个更全面一点 : http://www.jb51.net/article ...
-
FusionCharts或其它flash的div图层总是浮在最上层的问题
div的图层由div的style中的z-index来决定,z-index是层垂直屏幕的坐标,0最小,越大的话位置越靠上. 由于FusionCharts的图表都放在div中,如果页面还有其他的div,将 ...
-
R(五): R常用函数
工作笔记记录,会持续更新.... 目录: apply tapply lapply sapply merge substr.substring.strsplit.unlist.paste.paste0. ...
-
Android学习笔记——Activity的启动和创建
http://www.cnblogs.com/bastard/archive/2012/04/07/2436262.html Android Activity学习笔记——Activity的启动和创建 ...
-
调整系统的inode数量
inode节点中,记录了文件的类型.大小.权限.所有者.文件连接的数目.创建时间与更新时间等重要的信息,还有一个比较重要的内容就是指向数据块的指针. 一般情况不需要特殊配置,如果存放文件很多,需要配置 ...
-
Win10系统下安装Ubuntu16.04.3教程与设置
在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...
-
Spring+SpringMVC+Mybatis框架整合流程
一:基本步骤 新建Maven项目,导入相关依赖.(推荐) ————–Mybatis配置 —————- 新建entity包,并根据数据库(表)新建相关实体类. 新建dao包,并根据业务创建必要的mapp ...
-
parquet 简介
原文 Parquet 列式存储格式 面向分析型业务的列式存储格式 由 Twitter 和 Cloudera 合作开发,2015 年 5 月从 Apache 的孵化器里毕业成为 Apache *项目 ...
-
Js组件的一些写法
首先看下Prototype里的写法: var Class = { create: function() { return function() { this.init.apply(this, argu ...
-
全局 SqlConnection
class SqlHelper { public static SqlConnection conn; public static SqlConnection Open(string connStr) ...