【第一季第四期】JavaScript Optimization

2,002 views

Published on

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
  • 这个。。。配图把我雷到了。
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,002
On SlideShare
0
From Embeds
0
Number of Embeds
106
Actions
Shares
0
Downloads
29
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

【第一季第四期】JavaScript Optimization

  1. 1. 页面性能优化<br />--博玉<br />
  2. 2. 俺们开发了一个新系统,杠杠滴~~<br />PM<br />
  3. 3. 他的功能就像瑞士军刀一样,<br />应有尽有!<br />
  4. 4. 这么好的系统,<br />我们先用用!<br />
  5. 5. 半个月后···<br />
  6. 6. 需求方<br /> 这样的系统我才不想用呢 <br />
  7. 7. 开发A<br /> 为什么!我们熬了整整3个月啊~ <br />
  8. 8. 因为它很 慢 !!!<br />
  9. 9. 慢?!<br />
  10. 10. 这是为什么呢?<br />
  11. 11. 慢可能的几个原因<br />1.前端慢?<br />2.后台响应时间过长?<br />3.网络速度慢?<br />4.用户机器太烂!<br />
  12. 12. 搞个破系统还赖在我们身上,我呸!<br />我们没有错,责任全在你们ued。<br />开发<br />前端<br />
  13. 13. 只能在ie内核下用,火狐下要加fiddlerHook<br />
  14. 14.
  15. 15.
  16. 16. 真相只有一个!<br />
  17. 17. 我承认,这个慢的问题全在前端~~~<br />
  18. 18. 尽可能的减少 HTTP 的请求数<br />2. 使用 CDN(Content Delivery Network) <br />3. 添加 Expires 头(或者 Cache-control ) <br />4. Gzip组件 <br />将 CSS 样式放在页面的上方 <br />6. 将脚本移动到底部(包括内联的) <br />7. 避免使用 CSS 中的 Expressions <br />8. 将 JavaScript 和 CSS 独立成外部文件 <br />9. 减少 DNS 查询 <br />10. 压缩 JavaScript 和 CSS (包括内联的) <br />11. 避免重定向 <br />12. 移除重复的脚本 <br />13. 配置实体标签(ETags) <br />14. 使 AJAX 缓存  <br />--《高性能网站建设指南》<br />
  19. 19. 这些很实用,但是对于淘宝,对于运营支撑,还不够!<br />
  20. 20. 运营支撑页面特点<br />1.页面偏向web2.0,大部前分都是web app应用,要求页面既炫又快。<br />2.页面js量大,dom操作频繁。<br />3.开发和前端同时都参与端代码编写,没有一个良好的规范。<br />
  21. 21. 常见情况<br />1. 用户感觉慢<br />2. js、css阻塞问题<br />3. DOM操作<br />4. Js代码优化<br />5. web2.0 之痛<br />
  22. 22. 1.用户感觉慢<br />
  23. 23. 1.用户感觉慢<br />?<br />什么是慢,多少才算慢<br />
  24. 24. 1.用户感觉慢<br />一个页面从请求到能看见在2s以内。<br />所见即所得<br />
  25. 25. 1.用户感觉慢<br />真的是系统慢?<br />
  26. 26. 1.用户感觉慢<br />可能是感官上慢!<br />
  27. 27. 总结<br />1.在页面加载完成后尽量保证用户所看见的是最终页面效果。<br />2.不要对页面进行用户意料之外的操作<br />
  28. 28. 2.Js css阻塞<br />
  29. 29. 2.Js阻塞<br />1.浏览器在下载js的时候发生了什么事?<br />脚本会阻塞下载位于它之后的资源,包括图片,css,iframe<br />2.内联js,外联js,头部js有什么区别?<br />内联js和head部分js会阻塞整个页面渲染<br />外联js会阻塞位于它之后的元素渲染<br />
  30. 30. 2.Js阻塞<br />莫非我一代天骄命丧于此?!<br />
  31. 31. 2.Js阻塞<br />放心我们有js无阻塞下载技术!<br />
  32. 32. 2.Js阻塞<br />Js无阻塞下载的几种方式<br />1.XHR Eval<br />2.XHR 注入<br />3.Script in Iframe<br />4.Script DOM Element<br />5.Script Defer<br />6.Document write Script Tag<br />异步请求代码段,然后eval方法执行<br />异步请求代码段,然后var s = document.createElement(‘script’);<br />s.text = xhrObj.responseText;<br />在iframe中存放js,来实现页面资源并行下载<br />通过创建script标签,然后设置src属性,异步请求数据,<br />同getScript原理一样<br />利用标签的defer属性实现资源后续加载<br />在HTML页面内使用document.write <script src=""> . <br />仅在IE有效.<br />
  33. 33. 2.Js阻塞<br />
  34. 34. 2.Js阻塞<br />
  35. 35. 2.Js阻塞<br />如果js太多执行需要很长时间,怎么办?<br />让执行的块切成很多小块并使用setTimeout(function(){},0)<br />
  36. 36. 2.Css阻塞<br />Css阻塞?!<br />
  37. 37. 2.Css阻塞<br />狄卿,你有什么见解。<br />
  38. 38. 2.Css阻塞<br />以我多年断案经验来看,这桩命案应该是js引起的!<br />
  39. 39. 2.Css阻塞<br />我命你为钦差,专办此案,登基大典前必须破案。<br />
  40. 40. 2.Css阻塞<br /><head > <br /> <title > js test </title > <br /> <link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css"/> <br /></head > <br /> <body > <br /> <imgsrc ="http://www.blogjava.net/images/logo.gif" /><br/> <br /> <imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /> <br /> </body > <br />
  41. 41. 2.Css阻塞<br /><head > <br /> <title > js test </title > <br /> <link type ="text/css" rel ="stylesheet" href ="http://69.64.92.205/Css/Home3.css"/> <br /><script type ="text/javascript"> <br /> function a(){}<br /></script><br /></head > <br /> <body > <br /> <imgsrc ="http://www.blogjava.net/images/logo.gif" /><br/> <br /> <imgsrc ="http://csdnimg.cn/www/images/csdnindex_piclogo.gif" /> <br /> </body > <br />
  42. 42. 2.Css阻塞<br />因为浏览器会维持html中css和js的顺序,样式表必须在嵌入的JS执行前先加载、解析完。<br />而嵌入的JS会阻塞后面的资源加载,所以就会出现上面CSS阻塞下载的情况。<br />所以如果需要页面先行请将js放在head部分请放在css之前<br />
  43. 43. 总结<br />1.尽量不要使用内嵌js<br />2.根据情况将js放在页面底部,或者使用无阻塞加载js<br />3.如果js需要放在head部分,请放在css前<br />
  44. 44. 3. DOM操作<br />
  45. 45. 3. DOM操作<br />GetElementByIdgetElementsByClassName<br />
  46. 46. 3. DOM操作<br />我并没有错,错的是整个社会!<br />其实作为代码本生,<br />GetElementById和getElementsByClassName<br />并没有错<br />
  47. 47. 3. DOM操作<br />GetElementById和getElementsByClassName滥用导致dom操作过多,导致页面变慢。<br />
  48. 48. 3. DOM操作<br />GetElementById核心代码<br />
  49. 49. 3. DOM操作<br />GetElementsByClass核心代码<br />
  50. 50. 3. DOM操作<br />GetElementsBy核心代码<br />
  51. 51. 3. DOM操作<br />使用getElemntsBy方法将所需要的节点一次性找出来放在一个引用中,只对dom进行一次遍历<br />var refers = {};<br />(Function(){ <br />varbtn = refers.btn = {};<br /> function getButton(node){<br /> switch (true) {<br /> case DOM.hasClass(node,’add’):<br />btn.addBtn = node; <br /> break;<br /> case DOM.hasClass(tg,’delete’):<br />btn.deleteBtn = node;<br /> break;<br /> }<br /> }<br />DOM.getElementsBy(getButton,’input’,’’);<br />})();<br />
  52. 52. 3. DOM操作<br />reflow和repaint<br />
  53. 53. 3. DOM操作<br />reflow<br />对于DOM结构中的各个元素都有自己的盒子(模型),<br />这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)<br />来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。<br />repaint<br />当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,<br />浏览器于是便把这些元素都按照各自的特性绘制了一遍,<br />于是页面的内容出现了,这个过程称之为repaint。<br />
  54. 54. 3. DOM操作<br />导致reflow和repaint的因素<br />1. 改变窗囗大小 <br />2. 改变文字大小 <br />3. 添加/删除样式表 <br />4. 内容的改变,如用户在输入框中敲字<br />5. 激活伪类,如:hover (IE里是一个兄弟结点的伪类被激活) <br />6. 操作class属性 <br />7. 脚本操作DOM <br />8. 计算offsetWidth和offsetHeight<br />9. 设置style属性 <br />
  55. 55. 3. DOM操作<br />reflow和repaint是不可避免的,只能将reflow对性能的影响减到最小。<br />
  56. 56. 3. DOM操作<br />避免reflow和repaint的方法<br />1.  尽可能限制reflow的影响范围。 以上面的代码为例,要改变p的样式,class不要加在div上,通过父级元素影响子元素不好。<br /> 最好直接加在p上。2 通过设置class方式改变样式  <br /> 通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。3  实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。<br />4  权衡速度的平滑。<br /> 比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,<br />CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。5 不要使用tables布局   <br /> 不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table<br /> 里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,<br /> 这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。6  不要使用css表达式<br /> 如果css里有expression,每次都会重新计算一遍。<br />
  57. 57. 总结<br />在环境允许的情况下尽可能地想办法减少dom节点的操作,<br />尽量避免页面reflow和repaint。<br />
  58. 58. 4. Js代码优化<br />
  59. 59. 4. Js代码优化<br />大家一起来找茬<br />
  60. 60. 4. Js代码优化<br />开胃菜:<br />function firstExample(){<br />var a = ‘test1’;<br />var b = ‘test2’;<br />var c = ‘test3’;<br /> return b;<br />}<br />alert(firstExample());<br />
  61. 61. 4. Js代码优化<br />开胃菜:<br />function firstExample(){<br />var a = ‘test1’;<br />var b = ‘test2’;<br />var c = ‘test3’;<br /> return b;<br />}<br />alert(firstExample());<br />
  62. 62. 4. Js代码优化<br />开胃菜:<br />function firstExample(){<br />var a = ‘test1’,<br /> b = ‘test2’,<br /> c = ‘test3’;<br /> return b;<br />}<br />alert(firstExample());<br />
  63. 63. 4. Js代码优化<br />开胃菜:<br />精简代码,更少的代码往往更快。<br />
  64. 64. 4. Js代码优化<br />咦?这样也行?!<br />
  65. 65. 4. Js代码优化<br />没错!咱们完的就是极限!<br />
  66. 66. 4. Js代码优化<br />例1:<br />var people = {<br /> man : [‘李雷’,‘tom’],<br /> woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’]<br />};<br />function getWomanName(){var names = ‘’;<br /> for(var I = 0;I < people.woman.length;I++){<br /> names += people.woman[i];<br /> } <br /> return names; <br />}<br />getWomanName();<br />
  67. 67. 4. Js代码优化<br />例1:<br />var people = {<br /> man : [‘李雷’,‘tom’],<br /> woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’]<br />};<br />function getWomanName(){var names = ‘’;<br /> for(var I = 0;I < people.woman.length;I++){<br /> names += people.woman[i];<br /> } <br /> return names; <br />}<br />getWomanName();<br />
  68. 68. 4. Js代码优化<br />例1:<br />var people = {<br /> man : [‘李雷’,‘tom’],<br /> woman : [woman1 : ‘韩梅梅’,woman2 : ‘lucy’]<br />};<br />function getWomanName(){var names = ‘’,<br /> woman = people.woman;<br /> for(var I = 0,len = woman.length;I < len;I++){<br /> names += woman[i];<br /> } <br /> return names; <br />}<br />getWomanName();<br />
  69. 69. 4. Js代码优化<br />例1:<br />利用减少作用域链查找等js自身语言特性,优化js速度。<br />
  70. 70. 4. Js代码优化<br />例2:<br />function getUrl(index){<br />var url1 = ‘XXXXX’,<br /> url2 = ‘XXXXX’,<br /> url3 = ‘XXXXX’,<br />url = ‘’;<br /> if(index == 1){<br />url = url1;<br /> }else if(index == 2){<br />url = url2;<br /> }else if(index == 3){<br />url = url3;<br /> }<br />location.href = url;<br />}<br />
  71. 71. 4. Js代码优化<br />例2:<br />function getUrl(index){<br />var url1 = ‘XXXXX’,<br /> url2 = ‘XXXXX’,<br /> url3 = ‘XXXXX’,<br />url = ‘’;<br /> if(index == 1){<br />url = url1;<br /> }else if(index == 2){<br />url = url2;<br /> }else if(index == 3){<br />url = url3;<br /> }<br />location.href = url;<br />}<br />
  72. 72. 4. Js代码优化<br />例2:<br />function getUrl(index){<br />varurl = [‘XXXXX’, ‘XXXXX’, ‘XXXXX’];<br />location.href = url[index];<br />}<br />
  73. 73. 4. Js代码优化<br />例2:<br />在算法上提高js性能<br />
  74. 74. 4. Js代码优化<br />例3:<br /> <ul><br /> <li class = 'J_List'>a</li><br /> <li class = 'J_List'>b</li><br /> <li class = 'J_List'>c</li><br /> </ul><br /> <script><br />var list = DOM.getElementsByClassName('J_List','li');<br />Event.on(list,'click',function(e){<br />varobj = Event.getTarget(e);<br /> alert(obj.innerHTML);<br /> })<br /> </script><br />
  75. 75. 4. Js代码优化<br />例3:<br /> <ul><br /> <li class = 'J_List'>a</li><br /> <li class = 'J_List'>b</li><br /> <li class = 'J_List'>c</li><br /> </ul><br /> <script><br />var list = DOM.getElementsByClassName('J_List','li');<br />Event.on(list,'click',function(e){<br />varobj = Event.getTarget(e);<br /> alert(obj.innerHTML);<br /> })<br /> </script><br />
  76. 76. 4. Js代码优化<br />例3:<br /> <ul id=‘J_List’><br /> <li>a</li><br /> <li>b</li><br /> <li>c</li><br /> </ul><br /> <script><br />var list = DOM.getElementById(‘J_List’);<br />Event.on(list,'click',function(e){<br />varobj = Event.getTarget(e);<br /> if(obj.tagName == ‘li’)<br /> alert(obj.innerHTML);<br /> })<br /> </script><br />
  77. 77. 4. Js代码优化<br />例3:<br />利用事件冒泡等浏览器特性减少DOM操作。<br />
  78. 78. 4. Js代码优化<br />Js代码优化顺序<br />
  79. 79. 5.Web 2.0之痛<br />
  80. 80. 5.Web 2.0之痛<br />Web2.0的广泛使用让很多开发人员对开始<br />沉迷于页面效果,迷信前端技术,将很多<br />解析,渲染任务未加考虑放到前端处理,导<br />致页面越来越慢。<br />
  81. 81. 5.Web 2.0之痛<br />1.是否非用web2.0不可?<br />2.是否每个页面都需要页面先行?<br />
  82. 82. 5.Web 2.0之痛<br />优化大部分是以个权衡的过程。<br />针对场景合理运用技术才能整体上让页面速度有个提升。<br />
  83. 83. 祝大家早日修得正果… <br />

×