钟志 第八期Web标准化交流会

1,544 views
1,455 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,544
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

钟志 第八期Web标准化交流会

  1. 1. Web 标准化交流会 网站性能优化
  2. 2. 导 读 <ul><li>无阻塞加载 Javascript </li></ul><ul><li>利用域名别名增加并行下载数量 </li></ul><ul><li>避免空路径元素 </li></ul><ul><li>编码心得 </li></ul>
  3. 3. 无阻塞加载 JavaScript <ul><li>JavaScript 加载时会阻碍其他资源的下载 </li></ul><ul><li>IE8 可并行下载 JS </li></ul><ul><li>目的: JS 与其他资源一起并行下载 </li></ul>
  4. 4. <ul><li>XHR Eval </li></ul><ul><li>XHR Injection </li></ul><ul><li>Script in Iframe </li></ul><ul><li>Script DOM Element </li></ul><ul><li>Script Defer </li></ul><ul><li>document.write Script Tag </li></ul><ul><li>worker </li></ul>无阻塞加载 JavaScript 常用的几种方法:
  5. 5. 无阻塞加载 JavaScript <ul><li>XHR Eval </li></ul>Ajax callback eval 应用: Prototype.js Ruby on rails
  6. 6. 无阻塞加载 JavaScript <ul><li>XHR Injection </li></ul>Ajax callback var xhrObj = getXHRObject(); // 上个例子中定义的对象 xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { var scriptElem = document.createElement('script'); document.getElementsByTagName('head')[0] .appendChild(scriptElem); scriptElem.text = xhrObj.responseText; } }; xhrObj.open('GET', 'A.js', true); // 必须同域 xhrObj.send(''); script 标签
  7. 7. 无阻塞加载 JavaScript <ul><li>Script in Iframe </li></ul>嵌入 iframe 获取 HTML <!--parent--> <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1> </iframe> 与父页面交互 //iframe // access the main page from within the iframe using &quot;parent&quot; function createNewDiv() { var newDiv = parent.document.createElement('div'); parent.document.body.appendChild(newDiv); } //parent document.getElementById('frame1').contentWindow.createNewDiv
  8. 8. 无阻塞加载 JavaScript <ul><li>Script DOM Element </li></ul>script 标签 设置 src var scriptElem = document.createElement('script'); scriptElem.src = 'http://anydomain.com/A.js'; var head = document.getElementsByTagName('head')[0]; head.appendChild(scriptElem); 可跨域 应用: JSONP
  9. 9. 无阻塞加载 JavaScript <ul><li>Script Defer </li></ul><script defer src='A.js'></script> IE Only <ul><li>限制条件 </li></ul><ul><li>脚本中不包含 document.write </li></ul><ul><li>脚本不依赖网页内容 </li></ul>
  10. 10. 无阻塞加载 JavaScript <ul><li>document.write Script Tag </li></ul>document.write(&quot;<script type='text/javascript' src='A.js'></script>&quot;); <ul><ul><li>应用: Google AdSence </li></ul></ul><ul><ul><li>JavaScript 能并行下载,但下载过程中会阻塞其他资源的下载 </li></ul></ul>
  11. 11. 无阻塞加载 JavaScript <ul><li>worker </li></ul>初始化 worker postMessage 后台运行脚本 var worker = new Worker(&quot;test.js&quot;); // Watch for messages from the worker worker.onmessage = function(e){ // The message from the client: alert(e.data); }; function start(params) { worker.postMessage(&quot;start &quot; + params); } start('world'); postMessage 返回结果 //test.js onmessage = function(e){ var data = e.data.split(' '); if ( data[0] === &quot;start&quot; ) { // Do some computation var ret = 'Hello ' + data[1]; done(ret) } }; function done(ret){ // Send back the results to the parent page postMessage(ret); } onmessage 接收结果 实验阶段
  12. 12. 多域名解决最大连接数限制 <ul><li>大量资源引起下载阻塞 </li></ul>IE6 瀑布图
  13. 13. <ul><li>根据浏览不同最大连接数不同 </li></ul>Firefox 瀑布图 最大 6 个连接 多域名解决最大连接数限制
  14. 14. 多域名解决最大连接数限制 <ul><li>资源类型包括 img 、 CSS 、 HTML </li></ul><ul><li>还与 HTTP 版本有关 </li></ul>
  15. 15. 多域名解决最大连接数限制 <ul><li>增加域名别名,实现并行下载 </li></ul>img.sina.com.cn img.sina.com.cn img1.sina.com.cn N 个连接数 N*2 个连接数
  16. 16. 多域名解决最大连接数限制 <ul><li>修改后的效果 </li></ul>完美的并行下载 8s  4s
  17. 17. 多域名解决最大连接数限制 <ul><li>几个域名别名 合适? </li></ul><ul><li>域名! =IP </li></ul><ul><li>域名越多越好? </li></ul><ul><ul><li>DNS Lookups </li></ul></ul><ul><ul><li>CPU 消耗 </li></ul></ul>Steve Souders On average, using two aliases is best.
  18. 18. 多域名解决最大连接数限制 多域名性能比较
  19. 19. 多域名解决最大连接数限制 <ul><li>浏览器对同一域名下的资源并发下载数量有限制 </li></ul><ul><li>最大连接数与浏览器类型、浏览器版本、 HTTP 版本有关 </li></ul><ul><li>添加域名别名能提高并发下载数量,一般来说, 2 个别名即可 </li></ul>
  20. 20. 避免空地址元素 <ul><li>What ? </li></ul>= Empty src 创建元素时指定一个空的资源地址 script input embed object iframe img 空地址 标签
  21. 21. <ul><li><img src = &quot;&quot; / > </li></ul><ul><li>var img = new Image (); img.src = &quot;&quot; ; </li></ul>} 空路径 图片 避免空路径 How?
  22. 22. 危害 <ul><li>增加页面的请求数 </li></ul>避免空路径 IE: http://www.sina.com.cn/test/ No IE: http://www.sina.com.cn/test/1.php 请求的目标地址不一样 http://www.sina.com.cn/test/1.php
  23. 23. <ul><li>增加服务器压力 </li></ul>危害 避免空路径 Web Server 1x 空路径元素 1x 压力成倍增加 2x +
  24. 24. 解决方法 避免空路径 <ul><li>使用默认值 </li></ul><ul><li>动态创建时不指定 src </li></ul><ul><li>服务器端判断 HTTP_REFERER 头信息 </li></ul>
  25. 25. 用 YSlow 检查 避免空路径 制定新规则 ( Avoid empty src or href ) 新规则检查结果 1 2
  26. 26. 相关 Web 标准 避免空路径 <ul><li>浏览器厂商支持度 </li></ul><ul><li>HTML5 制定官方标准 http://html5.org/tools/web-apps-tracker?from=4833&to=4834 </li></ul>√ Opera X Safari X Chrome √ Firefox X IE
  27. 27. 编码心得 <ul><li>缓存原生对象,避免全局查找 </li></ul><ul><li>(function() { </li></ul><ul><li>var documen= window.document ; </li></ul><ul><li>function $(id) { </li></ul><ul><li> return document.getElementById(id); </li></ul><ul><li>} </li></ul><ul><li>})(); </li></ul>
  28. 28. <ul><li>整合最新 web 技术,提高代码性能 </li></ul>编码心得 if ( !String.prototype.trim ) { String.prototype.trim = function() { return this.replace(/^s+/, '').replace(/s+$/, ''); } } 类似的有 … … setItem, getItem, removeItem localStorage parse, stringify JSON forEach, indexOf, lastIndexOf, filter, every, map, some Array
  29. 29. 编码心得 <ul><li>判断是否 undefined </li></ul>(function() { //const var UNDEFINED; var name; // 方法一 if ( typeof name === 'undefined') { //do something } // 方法二 if ( name === UNDEFINED ) { //do something } })();
  30. 30. <ul><li>toString VS + '‘ </li></ul><ul><li>parseInt VS + </li></ul><ul><li>regExp VS indexOf </li></ul><ul><li>append VS innerHTML </li></ul><ul><li>eval </li></ul><ul><li>with </li></ul><ul><li>Object.method VS method in Object </li></ul>编码心得
  31. 31. 广告时间 <ul><li>Web 前端工程师 </li></ul><ul><li>美工设计 </li></ul><ul><li>CSS </li></ul><ul><li>JavaScript </li></ul><ul><li>QQ 群: 41378087 , Joe </li></ul>Lady first
  32. 32. <ul><li>END </li></ul><ul><li>谢谢大家 </li></ul>

×