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