Contenu connexe
Similaire à 【第一季第四期】JavaScript Optimization (20)
【第一季第四期】JavaScript Optimization
- 18. 尽可能的减少 HTTP 的请求数 2. 使用 CDN(Content Delivery Network) 3. 添加 Expires 头(或者 Cache-control ) 4. Gzip组件 将 CSS 样式放在页面的上方 6. 将脚本移动到底部(包括内联的) 7. 避免使用 CSS 中的 Expressions 8. 将 JavaScript 和 CSS 独立成外部文件 9. 减少 DNS 查询 10. 压缩 JavaScript 和 CSS (包括内联的) 11. 避免重定向 12. 移除重复的脚本 13. 配置实体标签(ETags) 14. 使 AJAX 缓存 --《高性能网站建设指南》
- 21. 常见情况 1. 用户感觉慢 2. js、css阻塞问题 3. DOM操作 4. Js代码优化 5. web2.0 之痛
- 32. 2.Js阻塞 Js无阻塞下载的几种方式 1.XHR Eval 2.XHR 注入 3.Script in Iframe 4.Script DOM Element 5.Script Defer 6.Document write Script Tag 异步请求代码段,然后eval方法执行 异步请求代码段,然后var s = document.createElement(‘script’); s.text = xhrObj.responseText; 在iframe中存放js,来实现页面资源并行下载 通过创建script标签,然后设置src属性,异步请求数据, 同getScript原理一样 利用标签的defer属性实现资源后续加载 在HTML页面内使用document.write <script src=""> . 仅在IE有效.
- 40. 2.Css阻塞 <head > <title > js test </title > <link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css"/> </head > <body > <imgsrc ="http://www.blogjava.net/images/logo.gif" /><br/> <imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /> </body >
- 41. 2.Css阻塞 <head > <title > js test </title > <link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css"/> <script type ="text/javascript"> function a(){} </script> </head > <body > <imgsrc ="http://www.blogjava.net/images/logo.gif" /><br/> <imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /> </body >
- 45. 3. DOM操作 GetElementByIdgetElementsByClassName
- 46. 3. DOM操作 我并没有错,错的是整个社会! 其实作为代码本生, GetElementById和getElementsByClassName 并没有错
- 47. 3. DOM操作 GetElementById和getElementsByClassName滥用导致dom操作过多,导致页面变慢。
- 51. 3. DOM操作 使用getElemntsBy方法将所需要的节点一次性找出来放在一个引用中,只对dom进行一次遍历 var refers = {}; (Function(){ varbtn = refers.btn = {}; function getButton(node){ switch (true) { case DOM.hasClass(node,’add’): btn.addBtn = node; break; case DOM.hasClass(tg,’delete’): btn.deleteBtn = node; break; } } DOM.getElementsBy(getButton,’input’,’’); })();
- 53. 3. DOM操作 reflow 对于DOM结构中的各个元素都有自己的盒子(模型), 这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等) 来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。 repaint 当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后, 浏览器于是便把这些元素都按照各自的特性绘制了一遍, 于是页面的内容出现了,这个过程称之为repaint。
- 54. 3. DOM操作 导致reflow和repaint的因素 1. 改变窗囗大小 2. 改变文字大小 3. 添加/删除样式表 4. 内容的改变,如用户在输入框中敲字 5. 激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活) 6. 操作class属性 7. 脚本操作DOM 8. 计算offsetWidth和offsetHeight 9. 设置style属性
- 55. 3. DOM操作 reflow和repaint是不可避免的,只能将reflow对性能的影响减到最小。
- 56. 3. DOM操作 避免reflow和repaint的方法 1. 尽可能限制reflow的影响范围。 以上面的代码为例,要改变p的样式,class不要加在div上,通过父级元素影响子元素不好。 最好直接加在p上。2 通过设置class方式改变样式 通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。3 实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。 4 权衡速度的平滑。 比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁, CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。5 不要使用tables布局 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table 里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed, 这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。6 不要使用css表达式 如果css里有expression,每次都会重新计算一遍。
- 60. 4. Js代码优化 开胃菜: function firstExample(){ var a = ‘test1’; var b = ‘test2’; var c = ‘test3’; return b; } alert(firstExample());
- 61. 4. Js代码优化 开胃菜: function firstExample(){ var a = ‘test1’; var b = ‘test2’; var c = ‘test3’; return b; } alert(firstExample());
- 62. 4. Js代码优化 开胃菜: function firstExample(){ var a = ‘test1’, b = ‘test2’, c = ‘test3’; return b; } alert(firstExample());
- 66. 4. Js代码优化 例1: var people = { man : [‘李雷’,‘tom’], woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’] }; function getWomanName(){var names = ‘’; for(var I = 0;I < people.woman.length;I++){ names += people.woman[i]; } return names; } getWomanName();
- 67. 4. Js代码优化 例1: var people = { man : [‘李雷’,‘tom’], woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’] }; function getWomanName(){var names = ‘’; for(var I = 0;I < people.woman.length;I++){ names += people.woman[i]; } return names; } getWomanName();
- 68. 4. Js代码优化 例1: var people = { man : [‘李雷’,‘tom’], woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’] }; function getWomanName(){var names = ‘’, woman = people.woman; for(var I = 0,len = woman.length;I < len;I++){ names += woman[i]; } return names; } getWomanName();
- 69. 4. Js代码优化 例1: 利用减少作用域链查找等js自身语言特性,优化js速度。
- 70. 4. Js代码优化 例2: function getUrl(index){ var url1 = ‘XXXXX’, url2 = ‘XXXXX’, url3 = ‘XXXXX’, url = ‘’; if(index == 1){ url = url1; }else if(index == 2){ url = url2; }else if(index == 3){ url = url3; } location.href = url; }
- 71. 4. Js代码优化 例2: function getUrl(index){ var url1 = ‘XXXXX’, url2 = ‘XXXXX’, url3 = ‘XXXXX’, url = ‘’; if(index == 1){ url = url1; }else if(index == 2){ url = url2; }else if(index == 3){ url = url3; } location.href = url; }
- 72. 4. Js代码优化 例2: function getUrl(index){ varurl = [‘XXXXX’, ‘XXXXX’, ‘XXXXX’]; location.href = url[index]; }
- 74. 4. Js代码优化 例3: <ul> <li class = 'J_List'>a</li> <li class = 'J_List'>b</li> <li class = 'J_List'>c</li> </ul> <script> var list = DOM.getElementsByClassName('J_List','li'); Event.on(list,'click',function(e){ varobj = Event.getTarget(e); alert(obj.innerHTML); }) </script>
- 75. 4. Js代码优化 例3: <ul> <li class = 'J_List'>a</li> <li class = 'J_List'>b</li> <li class = 'J_List'>c</li> </ul> <script> var list = DOM.getElementsByClassName('J_List','li'); Event.on(list,'click',function(e){ varobj = Event.getTarget(e); alert(obj.innerHTML); }) </script>
- 76. 4. Js代码优化 例3: <ul id=‘J_List’> <li>a</li> <li>b</li> <li>c</li> </ul> <script> var list = DOM.getElementById(‘J_List’); Event.on(list,'click',function(e){ varobj = Event.getTarget(e); if(obj.tagName == ‘li’) alert(obj.innerHTML); }) </script>