星空网 > 软件开发 > Java

读《高性能javascript》笔记(一)

第一章
加载与执行:
1,js脚本会阻塞页面渲染,<script>尽可能放到<body>标签的底部
2, 合并脚本,页面中的<script>标签越少;HTTP请求带来的额外开销方面,减少页面外链脚本文件的数量将会改善性能
3,css文件是并行下载,不会阻塞页面的其他进程

无阻塞脚本:
1,延迟脚本:使用<script>的defer属性(仅适用于IE4+和Firefox3.5以上版本)
2,动态创建<script>来下载并执行代码
3,适用XHR对象下载js代码并注入页面

无阻塞脚本工具:YUI3,LazyLoad , LABjs

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
第三章:DOM编程
浏览器把DOM和javascript 独立实现,两个相互独立的功能只要通过接口彼此连接,就会产生消耗。
性能优化

(1),最小化DOM访问次数,尽可能在javascript端处理
E.g:

function innerHTMLLoop(){ for(var count=0;count<15000;count++){   document.getElementById('here').innerHTML += 'a'; }}


优化后:

function innerHTMLLoop(){ var content = ''; for(var count=0;count<15000;count++){   content += 'a'; }  document.getElementById('here').innerHTML = countent;}

 




(2) , HMTL集合优化
 HTML集合包含了DOM节点引用的类数组对象,处于一种“实时状态”实时存在,
 当底层文档对象更新时,它也会自动更新
 HTML集合有:document.getElementsByName() , document.images , document.links等

//一个意外的死循环
//alldivs.length每次迭代都会增加,反映出的是底层文档的当前状态

var alldivs = document.getElementsByTagName('div');for(var i=0;i<alldivs.length;i++){  document.body.appendChild(document.createElement('div'));}


优化方法: 1,2运行速度差不多
1,把集合长度缓存到一个变量中,,并在迭代中使用

var alldivs = document.getElementsByTagName('div');var len = alldivs.lengthfor(var i=0;i<len;i++){ /* 处理代码 */}


2,如果需要经常操作集合,建议把集合拷贝到一个数组中

var alldivs = document.getElementsByTagName('div');var arr = toArray(alldivs);  //toArray 自定义的集合到数组的函数for(var i=0;i<arr.length;i++){ /* 处理代码 */}


3,对于任何类型的DOM访问,当同一个DOM属性或方法需要多次访问时,最好使用一个局部变量缓存此变量

function collentionNodesLocal(){  var coll = document.getElementsByTagName('div');    len = coll.length;    name = '';    el = null;  for(var count=0;count<len;count++){   el = coll[count];   name = el.nodeName;   name = el.nodeType;   name = el.tagName;  }  return name;}

 

                                                                                                                                                         (未完待续.......)




原标题:读《高性能javascript》笔记(一)

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

ExportHub:https://www.ikjzd.com/w/1626
Amanbo,非洲创新电商平台:https://www.ikjzd.com/w/1627
国际著名商业机构Kompass康帕斯:https://www.ikjzd.com/w/1628
商品条形码EAN:https://www.ikjzd.com/w/163
trade key:https://www.ikjzd.com/w/1630
ecplaza:https://www.ikjzd.com/w/1631
夹江千佛岩景区门票(夹江千佛岩景区门票价格):https://www.vstour.cn/a/411232.html
武陵山大裂谷周围景点 武陵山大裂谷周围景点图片:https://www.vstour.cn/a/411233.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流