【第一季第四期】JavaScript Optimization

俺们开发了一个新系统，杠杠滴~~ PM

他的功能就像瑞士军刀一样，应有尽有！

这么好的系统，我们先用用！

需求方这样的系统我才不想用呢

开发A 为什么！我们熬了整整3个月啊~

慢可能的几个原因 1.前端慢？ 2.后台响应时间过长？ 3.网络速度慢？ 4.用户机器太烂!

搞个破系统还赖在我们身上，我呸！我们没有错，责任全在你们ued。开发前端

只能在ie内核下用，火狐下要加fiddlerHook

我承认，这个慢的问题全在前端~~~

尽可能的减少 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 缓存 --《高性能网站建设指南》

这些很实用，但是对于淘宝，对于运营支撑，还不够！

运营支撑页面特点 1.页面偏向web2.0，大部前分都是web app应用，要求页面既炫又快。 2.页面js量大，dom操作频繁。 3.开发和前端同时都参与端代码编写，没有一个良好的规范。

常见情况 1. 用户感觉慢 2. js、css阻塞问题 3. DOM操作 4. Js代码优化 5. web2.0 之痛

1.用户感觉慢？什么是慢，多少才算慢

1.用户感觉慢一个页面从请求到能看见在2s以内。所见即所得

1.用户感觉慢真的是系统慢？

1.用户感觉慢可能是感官上慢！

总结 1.在页面加载完成后尽量保证用户所看见的是最终页面效果。 2.不要对页面进行用户意料之外的操作

2.Js阻塞 1.浏览器在下载js的时候发生了什么事？脚本会阻塞下载位于它之后的资源，包括图片，css，iframe 2.内联js，外联js，头部js有什么区别？内联js和head部分js会阻塞整个页面渲染外联js会阻塞位于它之后的元素渲染

2.Js阻塞莫非我一代天骄命丧于此？！

2.Js阻塞放心我们有js无阻塞下载技术！

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有效.

2.Js阻塞如果js太多执行需要很长时间，怎么办？让执行的块切成很多小块并使用setTimeout(function(){},0)

2.Css阻塞狄卿，你有什么见解。

2.Css阻塞以我多年断案经验来看，这桩命案应该是js引起的！

2.Css阻塞我命你为钦差，专办此案，登基大典前必须破案。

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 >

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 >

2.Css阻塞因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。而嵌入的JS会阻塞后面的资源加载，所以就会出现上面CSS阻塞下载的情况。所以如果需要页面先行请将js放在head部分请放在css之前

总结 1.尽量不要使用内嵌js 2.根据情况将js放在页面底部，或者使用无阻塞加载js 3.如果js需要放在head部分，请放在css前

3. DOM操作 GetElementByIdgetElementsByClassName

3. DOM操作我并没有错，错的是整个社会！其实作为代码本生， GetElementById和getElementsByClassName 并没有错

3. DOM操作 GetElementById和getElementsByClassName滥用导致dom操作过多，导致页面变慢。

3. DOM操作 GetElementById核心代码

3. DOM操作 GetElementsByClass核心代码

3. DOM操作 GetElementsBy核心代码

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’,’’); })();

3. DOM操作 reflow和repaint

3. DOM操作 reflow 对于DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式（浏览器的、开发人员定义的等）来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。 repaint 当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制了一遍，于是页面的内容出现了，这个过程称之为repaint。

3. DOM操作导致reflow和repaint的因素 1. 改变窗囗大小 2. 改变文字大小 3. 添加/删除样式表 4. 内容的改变，如用户在输入框中敲字 5. 激活伪类，如:hover (IE里是一个兄弟结点的伪类被激活) 6. 操作class属性 7. 脚本操作DOM 8. 计算offsetWidth和offsetHeight 9. 设置style属性

3. DOM操作 reflow和repaint是不可避免的，只能将reflow对性能的影响减到最小。

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，每次都会重新计算一遍。

总结在环境允许的情况下尽可能地想办法减少dom节点的操作，尽量避免页面reflow和repaint。

4. Js代码优化大家一起来找茬

4. Js代码优化开胃菜： function firstExample(){ var a = ‘test1’; var b = ‘test2’; var c = ‘test3’; return b; } alert(firstExample());

4. Js代码优化开胃菜： function firstExample(){ var a = ‘test1’, b = ‘test2’, c = ‘test3’; return b; } alert(firstExample());

4. Js代码优化开胃菜：精简代码，更少的代码往往更快。

4. Js代码优化咦？这样也行？！

4. Js代码优化没错！咱们完的就是极限！

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();

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();

4. Js代码优化例1：利用减少作用域链查找等js自身语言特性，优化js速度。

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; }

4. Js代码优化例2： function getUrl(index){ varurl = [‘XXXXX’, ‘XXXXX’, ‘XXXXX’]; location.href = url[index]; }

4. Js代码优化例2：在算法上提高js性能

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>

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>

4. Js代码优化例3：利用事件冒泡等浏览器特性减少DOM操作。

4. Js代码优化 Js代码优化顺序

5.Web 2.0之痛 Web2.0的广泛使用让很多开发人员对开始沉迷于页面效果，迷信前端技术，将很多解析，渲染任务未加考虑放到前端处理，导致页面越来越慢。

5.Web 2.0之痛 1.是否非用web2.0不可？ 2.是否每个页面都需要页面先行？

5.Web 2.0之痛优化大部分是以个权衡的过程。针对场景合理运用技术才能整体上让页面速度有个提升。

祝大家早日修得正果…

【第一季第四期】JavaScript Optimization

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (6)

Similar a 【第一季第四期】JavaScript Optimization

Similar a 【第一季第四期】JavaScript Optimization (20)

【第一季第四期】JavaScript Optimization