Use HTML 5 for performance improvements

Use HTML 5 for performance improvements @ 元彦

缩减 HTML 文档

<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/D TD/xhtml1-strict.dtd">
<!DOCTYPE html> 使用 HTML5 Doctype

更简洁的标签方式 http://www.google.com/intl/en/policies/privacy/ <p>Tencent</p> <ul> <li>QQ</li> <li>Q+</li> <li>weixin</li> </ul> <label for=“test”>test</label>
<input id=“test” value=“yes”> <p>Tencent <ul> <li>QQ <li>Q+ <li>weixin </ul> <label for=test>test</label> <input id=test value=yes>

减少5%-20%

关于图片

1.Sprites 2.Optimization size (Smush.it) 3.Data URI (data:image/png;base64,iV..) 图片优化方法

抛弃图片，拥抱 CSS3 1. border-radius: 20px; 2. box-shadow: inset 0 0
15px #900; 3. background-image: -webkit- gradient(linear,left top,left bottom,color- stop(0, rgb(202, 0, 0)),color-stop(1, rgb(151, 0, 0))); 4. @font-face:{font-family: Icons; src: url(icons.ttf);}

prefetching http://madscript.com/demo/prefetching/

资源预加载 1.只在浏览器空闲的时候预加载资源，但并不保证预加载 2.Chrome不支持HTTPS的预加载 3.document.webkitVisibilityState!=="prerender"

2012/10/20 var openInBackgroundTabFlag = 0x1000; // Create a new IE
automation object var objIE = new ActiveXObject("InternetExplorer.Application"); // Navigate to a URL for the main tab objIE.Navigate2("http://www.bing.com"); // Load other tabs in the background objIE.Navigate2("http://www.yahoo.com", openInBackgroundTabFlag); objIE.Navigate2("http://www.google.com", openInBackgroundTabFlag); // Show the browser window objIE.Visible = true; IE

DNS 预解析 <link rel=dns-prefetch href=//example.com>

Storage

Storage接口 2012/10/20

But be carefully also

ApplicationCache

Manifest 文件 2012/10/20

2012/10/20 <html manifest=vm.appcache> • Manifest同源限制 • MIME类型必须为text/cache-manifest • Chrome下在chrome://appcache-internals中查看 Manifest
设置 http://madscript.com/demo/appcache/

2012/10/20 如何触发缓存更新: • 用户手动清除浏览器的cache • 修改Manifest的任何内容（包括注释） • 程序执行 window.applicationCache.update() 更新应用缓存

Web Workers

• OS级别的线程 • 有限的对象访问能力 • 适合Cpu密集型的计算操作多线程 http://madscript.com/demo/worker/

Device API

navigator.connection http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/index.html

navigator.battery http://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html

canvas

性能 Tips 2012/10/20 1. Multi-canvas 2. context.drawImage不要scale图片 3. 使用requestAnimationFrame

performance.timing

performanceTiming 接口 http://madscript.com/demo/navigationtiming/

Thanks…

Use HTML 5 for performance improvements

Use HTML 5 for performance improvements

元彦

Other Decks in Technology

Featured

Transcript