More Related Content Similar to 面向开发的前端性能优化 (20) 3. 0.前端优化的意义
慢500ms = 20% 将放弃访问(Google)
慢400ms = 5-9% 将放弃访问(Yahoo!)
慢100ms = 1% 将放弃交易(Amazon)
我们？
pcauto 2.97 s
autohome 1.67 s
(2010.2.1--2010.3.1）
慢1300ms = ??% 将放弃访问
5. 0.前端优化的意义
0.16 s 后端20%
（jsp、Apache、hibernate、
Nginx、Memcached....... ）
6. 0.前端优化的意义
∞ s 前端80%
（js、css、images、
<script></script>、
jQuery.... ）
11. 1.重新认识浏览器
主流浏览器的两大引擎：
浏览器 渲染引擎 JS引擎
IE Trident jscript.dll
Firefox Gecko Spider-Monkey
Chrome WebCore V8
Safari WebCore JavaScriptCore
13. 1.重新认识浏览器
页面的解析过程：
1 2 3 4 5
从服务器 解析html 解析CSS
为渲染树 绘制
端接收到 构建 构建
生成布局 渲染树
html DOM树 渲染树
2.1
遇到JS调
用JS引擎
执行
21. 2.重新认识用户
首屏时间
网站用户体验的一个重要指标。
指一个网站被浏览器如IE窗口上部800*600的
区域被充满所需时间。
页面打开时，总加载时间要比首屏时间要长很
多，但是对亍用户体验来说，首屏时间是用户对一
个网站的重要体验因素。当页面充满800*600的
区域时，对用户来说就可以看到内容并可以点击了。
--基调网络
23. 2.重新认识用户
对亍用户来说
感觉快了就是快了
http://zzsvn.pcauto.com.cn/svn/liqiang/speed/example/js-top_vs_bottom/
24. 2.重新认识用户
不保证首屏
页面渲染
用户感受
0 1 2 3 4 5 6
无输出
保证首屏 渲染首屏
页面渲染 渲染其他屏
等待中
用户感受
接收信息
0 1 2 3 4 5 6
33. 3.更高效的JS
以前
var form=document.forms[0];
if(form.txtName.length==0){
alert("用户名不能为空");
return false;
}
38. 3.更高效的JS
JS的请求阻塞其后的请求
JS阻塞
JS的执行阻塞页面的渲染
39. 3.更高效的JS
外链JS阻塞请求
<script src=“http://js.3conline.com/js/min_contentslider.js”></script>
<img src=“”/>
HTML
JS
IMG
40. 3.更高效的JS
外链JS不阻塞请求
<script>
var script1 = document.createElement('script');
script1.src = " http://js.3conline.com/js/min_contentslider.js ";
document.getElementsByTagName('head')[0].appendChild(script1);
</script>
<img src=“”/>
HTML
JS
IMG
47. 3.更高效的JS
3.2更有效率的js Ecmascript
作用域链 原型链
var globalValue; Object.name.name
function test(){
var localValue;
alert(globalValue)
}
52. 3.更高效的JS
3.2更有效率的js Ecmascript
元素集合
var listA=document.getElementsByTagName(“a”);
for(var i=0;i<listA.length;i++){
func(listA[i]);
}
53. 3.更高效的JS
3.2更有效率的js Ecmascript
元素集合
var listA=document.getElementsByTagName(“a”);
for(var i=0,len=listA.length;i<len;i++){
func(listA[i]);
}
54. 3.更高效的JS
3.2更有效率的js jQuery
选择符从id开始
jQuery选择符本质：
$(“#id”)：document.getElementById(“id”); //快
$(“div”)：document.getElementsByTagName(“div”); //较慢
$(“.class”)：????? //很慢很慢
ie没有getElementsByClassName
so…
var all=document.getElementsByTagName(“*”);
for(var i=0;i<all.length;i++){
if(all[i].className=“class”){
return all[i];
}}
$(“.class”,$(“#id”)) or $(“#id .class”)//好一些
55. 3.更高效的JS
3.2更有效率的js jQuery
选择符从id开始
eg：
http://zzsvn.pcauto.com.cn/svn/%cd%f8%d2%b3%cb%d9%b6%c8%d3%c5%bb%
af/speed_edu/example/testjquery.html
56. 3.更高效的JS
3.2更有效率的js jQuery
缓存jQuery对象
$(„#traffic_light input.on).bind(‟click„, function(){…});
$(‟#traffic_light input.on).css(„border‟, „3px dashed yellow‟);
$(„#traffic_light input.on).css(‟background-color„, „orange„);
$(‟#traffic_light input.on).fadeIn(‟slow‟);
var $active_light = $(„#traffic_light input.on‟);
$active_light.bind(„click‟, function(){…});
$active_light.css(„border‟, „3px dashed yellow‟);
$active_light.css(„background-color‟, „orange‟);
$active_light.fadeIn(‟slow‟);
OR
$(„#traffic_light input.on‟).bind(„click‟,
function(){…}).css(„border‟, „3px dashed
yellow‟).css(„background-color‟, „orange‟).fadeIn(‟slow‟);
59. 3.更高效的JS
3.2更有效率的js DOM
http://zzb.pcauto.com.cn/power/js/jsProblem/dom.html
http://zzb.pcauto.com.cn/power/js/jsProblem/dom2.html
60. 3.更高效的JS
3.2更有效率的js DOM
documentFragment
var list = document.getElementById(“list”);
for (var i=0; i<10 ;i++ ){
var item = document.createElement(“li”);
list.appendChild(item);
}
reflow
61. 3.更高效的JS
3.2更有效率的js DOM
documentFragment
var list = document.getElementById(“list”);
var fragment = document.createDocumentFragment();
for (var i=0; i<10 ;i++ ){
var item = document.createElement(“li”);
fragment.appendChild(item);
} Not
list.appendChild(fragment); reflow
reflow
62. 3.更高效的JS
3.2更有效率的js DOM
className
Element.style.color = “red”;
Element.style.height = “100px”;
Element.style.fontSize = “25px”;
Element.style.backgroundColor = “white”;
63. 3.更高效的JS
3.2更有效率的js DOM
className
.active{
color:red;
height:100px;
width:25px;
background-color:white;
}
element.className=“active”;
68. 4.我们的解决方案
4.2 JsBank
<script src=“/www1/js/pc.jquery1.4.js”></script>
<script>$(“#id”).html(“jquery”)</script>
<script src=“JsBank.js”></script>
<script>
JsBank.store(function(){
$(“#id”).html(“jquery”)
},” /www1/js/pc.jquery1.4.js”)
</script>
<script>JsBank.fetch()</script>
74. 4.我们的解决方案
4.5 图片延迟加载 && 切换块按需加载
图片延迟加载
http://zzsvn.pcauto.com.cn/svn/doc/javascript/%cd%bc%c6%ac%b0%b4
%d0%e8%bc%d3%d4%d8/doc.html
切换块按需加载
http://zzsvn.pcauto.com.cn/svn/doc/javascript/ContentSlider%28%c9%e
0%c7%a9%c2%d6%bb%bb%29%be%ab%bc%f2%b0%e6/
81. 5.其他的解决方案
5.2controlJS
让页面中的js片段对浏览器不可识别
•异步加载 用Image戒Object元素异步加载
页面渲染初期用不到的js延迟执行
•延迟执行
•重写document.write 防止延迟的脚本中的write冲掉页面
存在问题
82. 5.其他的解决方案
5.2controlJS
<script type="text/javascript" src="main.js"><script>
<script type="text/javascript">sth...<script>
<script type="text/cjs" src="main.js"><script>
<script type="text/cjs">sth...<script>
Editor's Notes http://zzsvn.pcauto.com.cn/svn/liqiang/speed/example/jsbank/test/simpleTest.html
