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

Web 标准化交流会网站性能优化

导读 ,[object Object],[object Object],[object Object],[object Object]

无阻塞加载 JavaScript ,[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],无阻塞加载 JavaScript 常用的几种方法：

无阻塞加载 JavaScript ,[object Object],Ajax callback eval 应用： Prototype.js Ruby on rails

无阻塞加载 JavaScript ,[object Object],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 标签

无阻塞加载 JavaScript ,[object Object],嵌入 iframe 获取 HTML  <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); } //parent document.getElementById('frame1').contentWindow.createNewDiv

无阻塞加载 JavaScript ,[object Object],script 标签设置 src var scriptElem = document.createElement('script'); scriptElem.src = 'http://anydomain.com/A.js'; var head = document.getElementsByTagName('head')[0]; head.appendChild(scriptElem); 可跨域应用： JSONP

无阻塞加载 JavaScript ,[object Object],<script defer src='A.js'></script> IE Only ,[object Object],[object Object],[object Object]

无阻塞加载 JavaScript ,[object Object],document.write("<script type='text/javascript' src='A.js'><script>"); ,[object Object],[object Object]

无阻塞加载 JavaScript ,[object Object],初始化 worker postMessage 后台运行脚本 var worker = new Worker("test.js"); // Watch for messages from the worker worker.onmessage = function(e){ // The message from the client: alert(e.data); }; function start(params) { worker.postMessage("start " + params); } start('world'); postMessage 返回结果 //test.js onmessage = 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 接收结果实验阶段

多域名解决最大连接数限制 ,[object Object],IE6 瀑布图

[object Object],Firefox 瀑布图最大 6 个连接多域名解决最大连接数限制

多域名解决最大连接数限制 ,[object Object],[object Object]

多域名解决最大连接数限制 ,[object Object],img.sina.com.cn img.sina.com.cn img1.sina.com.cn N 个连接数 N*2 个连接数

多域名解决最大连接数限制 ,[object Object],完美的并行下载 8s  4s

多域名解决最大连接数限制 ,[object Object],[object Object],[object Object],[object Object],[object Object],Steve Souders On average, using two aliases is best.

多域名解决最大连接数限制多域名性能比较

多域名解决最大连接数限制 ,[object Object],[object Object],[object Object]

避免空地址元素 ,[object Object],= Empty src 创建元素时指定一个空的资源地址 script input embed object iframe img 空地址标签

[object Object],[object Object],} 空路径图片避免空路径 How?

危害 ,[object Object],避免空路径 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

[object Object],危害避免空路径 Web Server 1x 空路径元素 1x 压力成倍增加 2x +

解决方法避免空路径 ,[object Object],[object Object],[object Object]

用 YSlow 检查避免空路径制定新规则 ( Avoid empty src or href ) 新规则检查结果 1 2

相关 Web 标准避免空路径 ,[object Object],[object Object],√ Opera X Safari X Chrome √ Firefox X IE

编码心得 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],编码心得 if ( !String.prototype.trim ) { String.prototype.trim = function() { return this.replace(/^+/, '').replace(/+$/, ''); } } 类似的有 … … setItem, getItem, removeItem localStorage parse, stringify JSON forEach, indexOf, lastIndexOf, filter, every, map, some Array

编码心得 ,[object Object],(function() { //const var UNDEFINED; var name; // 方法一 if ( typeof name === 'undefined') { //do something } // 方法二 if ( name === UNDEFINED ) { //do something } })();

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],编码心得

广告时间 ,[object Object],[object Object],[object Object],[object Object],[object Object],Lady first

[object Object],[object Object]

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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (16)

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

Semelhante a 钟志第八期Web标准化交流会 (20)