《高性能javascript》读书笔记
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("按钮点击");
}
最新文章
- 推荐15款创建漂亮幻灯片的 jQuery 插件
- Robot Framework：RF中对时间操作的datetime库常用关键字
- 将一个正整数分解为m个2的n次方的和
- java多线程学习-ThreadLocal
- SQL Server 【CTE + FOR XML PATH】使用笔记~
- 奇怪吸引子---TreeScrollUnifiedChaoticSystem
- 【故障处理】CRS-1153错误处理
- phpstorm 8 license key
- oracle系列--第三篇 Oracle的安装
- STL 源码分析《2》----nth_element() 使用与源码分析
- 【Android Developers Training】 15. 启动一个Activity
- 机器学习 GBDT+xgboost 决策树提升
- QT中资源文件的使用
- c++ 快速读入输出
- Luogu P2597 [ZJOI2012]灾难
- learning scala output to console
- LeetCode题解之Copy List with Random Pointer
- python webdriver 显示等待判断元素是可以被点击的，但是执行脚本时，却提示元素不能点击的解决办法？
- 7.11 cookie 失效后 ，重新登陆 页面 可能跳出 框架 ，只剩主题 部分 ，
- 【Go入门教程9】并发（goroutine，channels，Buffered Channels，Range和Close，Select，超时，runtime goroutine）