让我们的页面跑得更快

慢 500ms = 20% 将放弃访问 (Google) 慢 400ms = 5-9% 将放弃访问 (Yahoo!) 慢 100ms = 1% 将放弃交易 (Amazon) we 2.97 s they 1.67 s (2010.2.1--2010.3.1 ）慢 1300 ms = ??% 将放弃访问 http://www.slideshare.net/stubbornella/after-yslow-a 我们？

20/80 法则 0.16 s 后端 20% （ jsp 、 Apache 、 hibernate 、 Nginx....... ）

20/80 法则 ∞ s 前端 80% （ js 、 css 、 images 、 <script></script> 、 jQuery.... ）

我们关注的指标 #1 首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数 JS CSS 广告解释、渲染

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数用户第一感受

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数未来关注的方向页面复杂程度真正的标准

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数波动不可避免南北有差异用户有差异

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数页面的原代码的体积 Pconline 375.6k/63.3k Pcauto 273.4k/49.6k Zol 349.8k/85.7k Autohome 320.0k/50.3k xxx 10.5k/4.4k

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数 document.getElementsByTagName("*").length Pconline 7951 Pcauto 4975 Pclady 3474 Zol 2867 Autohome 4649 瑞丽 2860 VS 内容为王？页面复杂程度 Reflow

首屏阻塞元素首屏时间总下载时间下载速度基础页下载字节数 DOM 元素个数首屏对象数决定首屏显示速度

全面的监控体系 #2 基调网络中国最大的第三网网络访问性能测试机构监测点遍布全国各地模拟用户真实感受丰富的监控功能

基调能做的也是我们关注的

柱状图，看出与对手差距

历史曲线图，优化前后的对比

即时监测帮助了解个别页面的情况

Httpwatch 概览、直观、易用

Dynatrace 深入、透彻、全面

浏览器会偷懒么？ http://stevesouders.com/cuzillion/?c0=bi1hfff0_0_f&c1=bb0hfff0_2_f&c2=bi1hfff0_0_f&t=1271640890625 Dynatrace httpwatch

计算普通的布局计算浮动的布局安排布局任务求 css 的值输出 Rendering

Fiddler 本地调试必备，监测映射两不误

Y-slow YUI 页面效率黄金准则 PS ：整合的图片优化功能很好用

Page speed Google 的页面效率准则

渲染 3 4 5 6 7 计算的样式 <style> body{...} .wrap{...} .xx{...} .header{...} .content{...} </style> 渲染块渲染块渲染块 <div class=“xx”></div> <style> .xx{......;background:url( logo.jpg )} </style> <style> .... </style> <html> <div class=“xx”></div> <script></script> .... .... <style> content{...} </style> <ul></ul> </html> 1 2 8

A. 样式精简合并新页面—— CSS 模块化：后期维护成本操作习惯的改变经验的总结归纳旧页面—— CSS 提取： Dust-Me DOM 操作、动态页使得提取存在风险 ? 更好的工具：更加细心

CSS 提取步骤： ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

注意事项： ,[object Object],[object Object],[object Object],[object Object]

B.Js 延迟 defineJS （）外链 js 用到时才请求抵制浪费各取所需

defineJS （） : 同步： XMLhttprequest 不能跨域默认 UTF-8 ，如 js 含有中文需改为 UTF-8 格式异步： getElementsByTagName("head")[0].appendChild(js); 可以跨域异步对页面不会阻塞如果有用到监听函数的返回值，则需要改为同步方式 eg ： jQuery defineJS(“ !$,!jQuery,!$.getScript = /www1/js/pc.jquery1.4.js ”);// 同步 defineJS(“ featuredcontentslider.init =1000: http://www1.pconline.com.cn/global/2008/js/contentslider.js ”); // 异步

defineJS 使用步骤 : ,[object Object],[object Object],[object Object],[object Object],[object Object]

defineJS （） : javascript:alert(defineJSlog) 记录每个请求 js 的函数

$.lazy() ： jQuery 插件的 defineJS var p='http://www1.pconline.com.cn/js/'; $. lazy ( { name:‘cluetip’, //jQuery 插件名 cache:true, // 是否缓存 src:p+‘jquery.cluetip.js’,// 插件地址 dependencies:// 插件依赖的资源 { js:[p+'jquery.hoverIntent.js'], css:[p+'jquery.cluetip.css'] } }); $. lazy ({name:'bt', cache:true, src:p+'jquery.bt.js'}); http://www.pconline.com.cn/www1/js/pc.jquery1.4.js

接口后出： var old_node=document.getElementById("old_node"); var s=document.getElementById("new_node").getElementsByTagName("script"); for(var i=0;i<s.length;i++){ s[0].parentNode.removeChild(s[0]);// 防止接口重复请求 } old_node .parentNode.replaceChild(document.getElementById(" new_node "), old_node ); <div id=" new_node "><script class=" defer" src="http://game.pcgames.com.cn/jsp/interface/item_piece_js.jsp?id="></script></div> <div id="topTxt"></div> <div id="topTxt"></div> <div id=" old_node "></div>

setTimeout ： <div id="topTxt"></div> <div id="topTxt"></div> if(window.ajaxLogon0906) ajaxLogon0906(); else setTimeout (function(){ var js=document.createElement("script"); js.src="http://www1.pconline.com.cn/global/2009/js/chalogon09.js"; document.getElementsByTagName("head")[0].appendChild(js); },1000) // 登陆 js 后出对于网速较慢的用户后出效果并不理想比如汽车网首页品牌下拉框，当鼠标移上去时才初始化。一些不是一开始就需要的效果，可在 body.onload 里加载，为避免代码冲突，可以用下面的代码： if(window.attachEvent) document.body.attachEvent("onload",fn); else document.body.addEventListener("load",fn);

普通调用事件化： <div id="topTxt"></div> <div id="topTxt"></div> if(window.attachEvent) document.body. attachEvent ("onload",fn); else document.body. addEventListener ("load",fn); 比如汽车网首页品牌下拉框，当鼠标移上去时才初始化。一些不是一开始就需要的效果，可在 body.onload 里加载，为避免代码冲突，可以用下面的代码：比如汽车网首页品牌下拉框，当鼠标移上去时才初始化。一些不是一开始就需要的效果，可在 body.onload 里加载，为避免代码冲突，可以用下面的代码： if(window.attachEvent) document.body.attachEvent("onload",fn); else document.body.addEventListener("load",fn);

广告处理前：请求多，且造成页面阻塞

广告处理后：首屏没有广告请求和阻塞元素

<c:set var="combineAD"> <body> ..... </body> </c:set> <cms: combineAD insertBefore ='<div class="screen" id="divScreen6">'>${combineAD}</cms:combineAD> ,[object Object],[object Object],[object Object]

js 是页面效率的噩梦！

var form=document.forms[0]; if(form.txtName.length==0){ alert(" 用户名不能为空 "); return false; } 以前

页面效率的问题 80% 由 js 引起

[object Object],[object Object],[object Object],[object Object],[object Object]

ECMAScript var divs=document.getElementsByTagName("div"); for(var i=0;i< divs.length;i++){ } 缓存节点集合的长度，效率更高（ ie 下快 60 倍） var divs=document.getElementsByTagName("div"); for(var i=0, len=divs.length ;i<len;i++){ } 提高循环效率

减少对象查找 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

字符串合并 var reselt=“aaa”+”bbb”; 下面的代码效率更高，但不易维护，如果字符串相加操作量不大可不用以下方式 var buf=new Array(); buf.push(“aaa”); buf.push(“bbb”); var result=buf.join(“”); a += 'x' + 'y'; 后者比前者快 20% ，而且消耗更少的内存： a += 'x'; a += 'y';

var min = Math.min(a,b); A.push(v); 下面代码实现相同功能，但效率更高： var min = a < b ? a : b; A[A.length] = v; 还有 ... 基本运算符比函数调用更快

var original = document.getElementById('container'); var cloned = original. cloneNode (true); // 克隆节点，处理完后再替换原节点 cloned.setAttribute('width','50%'); var elem, contents; for( var i = 0; i < textlist.length; i++ ) { elem = document.createElement('p'); contents = document.createTextNode(textlist[i]); elem.appendChild(contents); cloned.appendChild(elem); } original.parentNode. replaceChild (cloned,original); DOM 元素处理尽量脱离 DOM 树 if(window.ajaxLogon0906) ajaxLogon0906(); else setTimeout(function(){ var js=document.createElement("script"); js.src=“http://www1.pconline.com.cn/global/2009/js/chalogon09.js”;// 先设置 src ，再插入 document.getElementsByTagName("head")[0].appendChild(js); },1000)

var toChange = document.getElementById('mainelement'); toChange.style.background = '#333'; toChange.style.color = '#fff'; toChange.style.border = '1px solid #00f'; 通过修改元素 class 名使用新样式，效率更高， reflow 更少： div { background: #ddd; color: #000; border: 1px solid #000; } div.highlight { background: #333; color: #fff; border: 1px solid #00f; } ... document.getElementById('mainelement').className = 'highlight'; 修改元素 class 名

document.getElementById('test').property1 = 'value1'; document.getElementById('test').property2 = 'value2'; document.getElementById('test').property3 = 'value3'; document.getElementById('test').property4 = 'value4'; 下面的代码比上面的代码要快 5-10 倍： var sample = document.getElementById('test'); sample .property1 = 'value1'; sample .property2 = 'value2'; sample .property3 = 'value3'; sample .property4 = 'value4'; 用变量保存 DOM 值

jQuery 选择符本质： $(“#id”) ： document.getElementById(“id”); // 快 $(“div”) ： document.getElementsByTagName(“div”); // 较慢 $(“.class”) ： ????? // 很慢很慢 var all=document.getElementsByTagName(“ * ”); for(var i=0;i<all.length;i++){ if(all[i].className=“class”){ return all[i]; } } $(“.class”,$(“#id”)) // 好一些 jQuery 不要直接使用 class 作为选择符 http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ $(“#id”).addClass(“yyy”); $(“#id ul”).show(); $(“#id ul li”).addClass(“xxx”); // 慢 var div=$(“#id”); div.addClass(“yyy”); $(“ul”,div).show(); $(“li”,div).addClass(“xxx”);

$(‘#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’); 将 jquery 对象缓存起来 http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ 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’);

$(document).rady 在 DOM 载入时执行，有可能会延迟不够，影响到页面的渲染 $(window).load http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ $(window).load 在所有内容加载后触发，包括窗口，框架，对象和图像

不在首屏内使用 jQuery http://blog.dynatrace.com/2009/11/09/101-on-jquery-selector-performance/ 对于 jQuery 的优化会用到 defineJS 的延迟去加载，如果在首屏使用 jQuery ，会使 jQuery 的请求处在首屏，失去了延迟的意义所以：将 jQuery 的调用放到首屏后或者 NO jQuery

图片按需加载 http://price.pcauto.com.cn/serial.jsp?sid=4523 http://product.pconline.com.cn/mobile/

CSS sprite ,[object Object],[object Object],[object Object]

减少图片大小重置页面显示的大小 88x88 图片实际大小 232x232 ,[object Object],[object Object],http://www.chencheng.org/blog/2009/12/17/resized-image-checker/

CSS 选择符对页面的影响 1. 页面元素越多，渲染时间对页面速度的影响越明显。 2. 选择符从右至左匹配，最右边的选择符匹配效率最为关键。 http://stevesouders.com/efws/css-selectors/csscreate.php

不要使用 CSS Expression ,[object Object],[object Object],http://stevesouders.com/hpws/rule-expr.php ,[object Object]

浏览器还是服务器？ json vs innerHTML

<base target="_blank" /> ,[object Object],[object Object]

iframe 其中样式全内嵌 iframe 中的样式表引用同样会引起父页面假死和花屏！

并发 ie 中，同一个 script 中用 document.write 可以并发 // 并发 js 和 css <script> document.write(“a.css”); document.write(“b.js”); </script> // 并发 js 和 js <script> document.write(“a.js”); document.write(“b.js”); </script> 为保证模板在 DW 中的效果，样式表在 <head> 中写成 <c:set var="CSS"> <link href="...." rel="..."/> </c:set> 然后在 body 中 ivy.js 的地方，写成 <script> document.write('${CSS}'); if(!window.addIvyID)document..... //ivy.js document.write("<script src= 头部 js></script>"); </script>

IE6 下背景图加载顺序测试 <div style="background:url(bg.png)"></div><img src="img1.jpg"/> 很多图 <div style="background:url(bg.png)"><img src="img1.jpg"/><img src="img2.jpg"/></div> <div style="background:url(bg.png)"></div><img src="img1.jpg"/><script></script><img src="img2.jpg"/> 加载顺序 : img1.jpg > 很多图 > bg.png 加载顺序 : img1.jpg > bg.png > img2.jpg 加载顺序 : img1.jpg > bg.png > img2.jpg 初探 IE6 的内部机制

页面卡住不动了？ |------------| | 图 | |------------| | 外链 Js | |------------| | 内容 | |____________|

精简：舌签精简版兼容：伪下拉框

让我们的页面跑得更快

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (16)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie 让我们的页面跑得更快

Ähnlich wie 让我们的页面跑得更快 (20)

让我们的页面跑得更快

Hinweis der Redaktion