Ⅰ 了解主流的前端开发编辑工具至少3种 ,写出其各自优缺点
vscode：
微软出厂的高颜值编辑器
加载大文件几乎秒开，运行速度很快
跨平台的文本编辑器，内置了对许多主流语言的支持
非常方便的管理插件，可以快速找到适合自己的前端插件
完全免费（非常推荐）
webstorm
集成了许多强大的功能
快速查找文件，快速搜索
对js的开发全面支持，对主流行语言的支持
集成了多版本版本控制工具
HBuilder X（免费）
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [
HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。
它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。
Ⅱ Web前端性能优化的实用技巧汇总
今天小编要跟大家分享的文章是关于Web前端性能优化的实用技巧汇总。javascript在浏览器中运行的性能，可以认为是开发者所面临的最严重的可用性问题。这个问题因为javascript的阻塞性而变得复杂，事实上，多数浏览器使用单一进程来处理用户界面和js脚本执行，所以同一时刻只能做一件事。js执行过程耗时越久，浏览器等待响应的时间越长。
一.提高加载性能
1.IE8,FF,3.5,Safari4和Chrome都允许并行下载js文件，当script下载资源时不会阻塞其他script的下载。但是js下载仍然会阻塞其他资源的下载，如图片。尽管脚本下载不会互相影响，但页面仍然必须等待所有塌尘岩js代码下载并执行完才能继续。因兄雹此仍然存在脚本阻塞问题.推荐将所有js文件放在body标签底部以减少对整个页面的影响。
2.减少页面外链脚本文件的数量将会提高页面性能：
http请求会带来额外的开销，因此下载单个300k的文件将比下载10个30k的文件效率更高。
3.动态脚本加载技术：
无论何时启动下载，文件的下载和执行都不会阻塞页面其他进程。
functionlaodScript(url,callback){
varscript=document.createElement('script');_
_cript.type='text/javascript'__f(script.readyState){//ie
____cript.onreadystatechange=function(){_____
if(script.readyState=='loaded'||script.readyState=='complete'){_______
_cript.onreadystatechange=null;_______
callback()_____
____
__
}else{//其他浏览器___
script.onload=function(){_____
_allback()
___}_
}_
script.src=url;_
document.getElementsByTagName('head')[0].appendChild(script);
}
//使用
loadScript('./a.js',function(){_
loadScript('./b.js',function(){___
loadScript('./c.js',function(){_____
console.log('加载完成')___
})_
})
})
4.无阻塞加载类库——LABjs,使用方法如下：
//链式调用时文件逐个下载，.wait()用来指定文件下载并执行完毕后所调用的函数
$LAB.script('./a.js')_
.script('./b.js')_
.wait(function(){__
_pp.init();
})
//为了保证执行顺序，可以这么做,此时a必定在b前执行
$LAB.script('./a.js').wait()_
.script('./b.js')_
.wait(function(){___
_pp.init();
})
二.数据存取与JS性能
1.在js中，数据存储的位置会对代码整体性能产生重大影响。数据存储共有4种方式：字面量，变量，数组项，对象成员。他们有着各自的性能特点。
2.访问字面量和局部变量的速度最快，相反，访问数组和对象相对较慢
3.由于局部变量存在于作用域链的起始位置，因此访问局部变量的比访问跨域作用变量更快
4.嵌套的对象成员会明显影响性能，应尽量避免
5.属性和方法在原型链位置越深，访问他的速度越慢
6.通常我们可以把需要多次使用的对象成员，数组元素，跨域变量保存在局部变量中来改善js性能
三.DOM编程
1.访问DOM会影响浏览器性能，修改DOM则更耗费性能，因为他会导致浏览器重新计算页面的几何变化。<通常的做法是减少访问DOM的次数，把运算尽量留在JS这一端。
注团御：如过在一个对性能要求比较高的操作中更新一段HTML，推荐使用innerHTML，因为它在绝大多数浏览器中运行的都很快。但对于大多数日常操作而言，并没有太大区别，所以你更应该根据可读性，稳定性，团队习惯，代码风格来综合决定使用innerHTML还是createElement()
2.HTML集合优化
HTML集合包含了DOM节点引用的类数组对象，一直与文档保持连接，每次你需要最新的信息时，都会重复执行查询操作，哪怕只是获取集合里元素的个数。
①_优化一——集合转数组collToArr
functioncollToArr(coll){_
for(vari=0,a=[],len=coll.length;i
a._ush(coll[i]);
__
returna
}
②缓存集合length
③访问集合元素时使用局部变量（即将重复的集合访问缓存到局部变量中，用局部变量来操作）
3.遍历DOM
①使用只返回元素节点的API遍历DOM,因为这些API的执行效率比自己实现的效率更高：
td{border:1pxsolid#ccc;padding:5px;margin:auto;}
td>p{text-align:left;}
td>pspan{text-align:center;display:block;}
属性名
被替代属性
children
childNodes
childElementCount
childNodes.length
firstElementChild
firstChild
lastElementChild
lastChild
nextElementSibling
nextSibling
previousElementSibling
previousSibling
_谘≡衿_PI——querySelectorAll()
querySelectorAll()方法使用css选择器作为参数并返回一个NodeList——包含着匹配节点的类数组对象，该方法不会返回HTML集合，因此返回的节点不会对应实时文档结构，着也避免了HTML集合引起的性能问题。
let_rr=_ocument.querySelectorAll('div.warning,_iv.notice>_')
4.重绘和重排
浏览器在下载完页面的所有组件——html,js,css,图片等之后，会解析并生成两个内部数据结构——_OM树，渲染树.一旦DOM树和渲染树构建完成，浏览器就开始绘制页面元素（paint）.
①重排发生的条件：
添加或删除可见的DOM元素位置变化元素尺寸改变内容改变页面渲染器初始化浏览器窗口尺寸变化出现滚动条时会触发整个页面的重排_嘏疟囟ㄖ鼗
5.渲染树变化的排列和刷新
大多数浏览器通过队列化修改并批量执行来优化重排过程，然而获取布局信息的操作会导致队列强制刷新。
offsetTop,offsetWidth...
scrollTop,scrollHeight...
clientTop,clientHeight...
getComputedStyle()
一些优化建议：将设置样式的操作和获取样式的操作分开：
//设置样式
body.style.color='red'
body.style.fontSize=པpx'
//读取样式
letcolor=body.style.color
let_ontSize=_ody.style.fontSize
另外，获取计算属性的兼容写法：
functiongetComputedStyle(el){_
varcomputed=(document.body.currentStyle?el.currentStyle:document.defaultView.getComputedStyle(el,'');_
returncomputed
}
6.最小化重绘和重排
①.批量改变样式
/*使用cssText
*/el.style.cssText='border-left:1px;_order-right:2px;_adding:20px'
②.批量修改dom的优化方案——使元素脱离文档流-对其应用多重改变-把元素带回文档
functionappendDataToEl(option){
vartargetEl=option.target||document.body,___
createEl,___
data=option.data||[];_//让容器脱离文档流，减少重绘重排_
vartargetEl_display=targetEl.style.display;_
targetEl.style.display='none'
_
//*****创建文档片段来优化Dom操作****_
varfragment=document.createDocumentFragment();_//给元素填充数据_
for(vari=0,max=data.length;i
createEl=
document.createElement(option.createEl);___
for(varitemindata[i]){_____
if(item.toString()==='text'){_______
createEl.appendChild(document.createTextNode(data[i][item]));________ontinue;___________
_f(item.toString()==='html'){_______
createEl.innerHTML=item,data[i][item];_______
continue;_____
}_____
_reateEl.setAttribute(item,data[i][item]);_______
//****将填充好的node插入文档片段****___
fragment.appendChild(createEl);___
//****将文档片段统一插入目标容器****_
targetEl.appendChild(fragment);_
//显示容器，完成数据填充_
targetEl.style.display=
targetEl_display;
}
//使用
varwrap=document.querySelectorAll('.wrap')[0];
vardata=[_
_name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'},_
{name:'xujaing',text:'选景',title:'xuanfij'}];
appendDataToEl({_
target:wrap,_
createEl:'div',
_ata:data
});
上面的优化方法使用了文档片段:_蔽颐前盐牡灯尾迦氲浇诘阒惺保导噬媳惶砑拥闹皇歉闷蔚淖咏诘悖皇瞧伪旧怼？梢允沟_om操作更有效率。
②.缓存布局信息
//缓存布局信息
letcurrent=el.offsetLeft;
current++;
el.style.left=current+'px'
if(current>300){_
stop();
}
④.慎用:hover
如果有大量元素使用:hover,那么会降低相应速度，CPU升高
⑤.使用事件委托（通过事件冒泡实现）来减少事件处理器的数量，减少内存和处理时间
functiondelegation(e,selector,callback){_
e=e||window.event;_
vartarget=e.target||e.srcElement;
_if(target.nodeName!==selector||
target.className!==selector||target.id!==selector){___
return;
_}_
if(typeofe.preventDefault==='function'){__
_.preventDefault();___
e.stopPropagation();
}else{___
e.returnValue=false;
e.cancelBubble=true;_
}
__allback()}
四.算法和流程控制
1.循环中减少属性查找并反转(可以提升50%-60%的性能)
//for循环
for(vari=item.length;i--){_
process(item[i]);
}
//while循环
varj=item.length;
while(j--){_
process(item[i]);
}
2.使用Duff装置来优化循环（该方法在后面的文章中会详细介绍）
3.基于函数的迭代（比基于循环的迭代慢）
items.forEach(function(value,index,array){__rocess(value);})
4.通常情况下switch总比if-else快，但是不是最佳方案
五.字符串和正则表达式
1.除了IE外，其他浏览器会尝试为表达式左侧的字符串分配更多的内存，然后简单的将第二个字符串拷贝到他的末尾，如果在一个循环中，基础字符串位于最左侧，就可以避免重复拷贝一个逐渐变大的基础字符串。2.使用[sS]来匹配任意字符串3.去除尾部空白的常用做法：
if(!String.prototype.trim){_
String.prototype.trim=function(){___
returnthis.replace(/^s+/,'').replace(/ss*$/,'')_
}
}
六.快速响应的用户界面
1.浏览器的UI线程：用于执行javascript和更新用户界面的进程。
2.在windows系统中定时器分辨率为15毫秒，因此设置小于15毫秒将会使IE锁定，延时的最小值建议为25ms.
3.用延时数组分割耗时任务：
functionmultistep(steps,args,callback){_
vartasks=steps.concat();
__etTimeout(function(){___
vartask=tasks.shift();___
task.apply(null,args||[]);_//调用Apply参数必须是数组
___
if(tasks.length>0){_____
setTimeout(arguments.callee,25);
___else{_____
_allback();___
__
},25);
}
4.记录代码运行时间批处理任务：
functiontimeProcessArray(items,process,callback){_
vartodo=item.concat();__etTimeout(function(){___
varstart=+newDate();
__o{_____
_rocess(todo.shift());___
}while(todo.length>0&&(+newDate()-start<50));
____f(todo.length>0){_____
_etTimeout(arguments.callee,25);
___else{____
_allback(items);_
}_
_,25)
}
5.使用WebWorker：它引入了一个接口，能使代码运行且不占用浏览器UI线程的时间。一个Worker由如下部分组成：
①一个navigator对象，包括app
Ⅲ 从“等等”到“秒开”再到“直开”，是什么让闲鱼社区相见恨晚
闲鱼前端页面的性能常常被人念叨，凡跳转、必跳鱼的印象深入人心，部分页面甚至需要跳四五下才能打开，最近我们对闲鱼前端页面系统性的做了些优化，由于闲鱼前端技术栈相对多元，不同栈技术原理各不相同，优化方案也陪隐嫌有所差异，本文主要介绍目前闲鱼占比较重的 Weex 页面的优化过程。
闲鱼 Weex 页面多以前端渲染为主，其打开过程与 Web 页面略微相近，大致分为以下几个阶段：
我们将“从开始加载（navigationStart）到屏幕首次 paint（绘制）像素内容”的这段时间称为白屏时间（FP） ，将“从开始加载（navigationStart）到首屏内容全部渲染完成”的这段时间称为 首屏时间（FSP） ，受限于统计口径，目前 Weex 下的首屏时间是不包含图片下载及后续过程的。
我们拿闲鱼的直播频道页和玩家频道页作为参考，通过录屏的方式看下优化前后的对比：
通过录屏分帧的方式我们统计了下这两个频道页在不同系统不同机型下的首携族屏时长：
可以看到，优化前 iOS、Android 主流机型上的首屏时间都要超过 2s，低端机甚至要 3-5s，优化后各机型的首屏时间均大幅下降，低端机首屏时长控制到了 2s 内，中高端机近乎直开。
确定优化方案前我们对现有的 Weex 页面做了拆解分析，从结果来看，以下几个因素对首屏时间的影响较大：
基于上面的分析调研，我们初步把优化方案定为芦手四层：
按照预期优化效果，Weex 页面的打开过程是这样的：
体现在上述的四层结构中，主要包含以下几个优化点：
具体实现是将 Weex Bundle 以资源包为单位、以 URL 前缀为索引，通过一定的更新策略离线到客户端本地，之前的更新策略主要有访问后安装、启动安装 两种，对应的更新时机如下：
这套机制在容器层有统一的方案支撑，但是包命中率一直不高（25% - 55%），导致最终效果差强人意，分析后发现默认的更新策略（访问后安装）与页面回访率强相关，闲鱼的前端页面大都是频道导购型的页面，回访率天然不高，所以包命中率相对应也不会高。
本次优化主要是对更新策略进行了扩展，增加了 “ 闲时安装 ” 的更新策略：会在定时更新期间主动安装，如果安装后未使用，则会在一周之后淘汰；如果一周内使用过，则进入常规的更新淘汰机制（一个月未使用淘汰）。
在 “闲时安装” 的更新策略上线后，包命中率大幅提升（稳定后 90% 左右），页面性能也得到了显着提升：
不依赖首屏接口渲染的页面甚至可以达到“直开”：
传统的首屏数据请求都是在 Bundle 解析完以后发起的，首屏数据返回后渲染页面，是个典型的串行过程。
本次优化中我们把这个串行的过程并行化了：
时序图如下：
特殊情况下的时序图：
具体的技术细节本文不再赘述，数据预取的优化策略上线后，首屏时间也得到了一定程度的提升，如下（iOS 侧由于各优化策略并行上线，没能做到单一变量采集性能数据，暂以 Android 侧为参考）：
Bundle 离线、数据预取的优化策略上线后，部分页面在中高端机型上逼近“直开”：
渐进式首屏
渐进式首屏解决的是“最后一公里”的问题，因为在上了“离线包”和“数据预取”的方案后，我们发现： 页面首屏时间一定程度上还是受限于首屏接口请求耗时 ，该方案就是为了降低用户侧的白屏等待时长，具体从以下三个方面着手：
以接口请求配置生成的索引对接口数据进行缓存
低端机降级方案
为了用户体验能够更好，在此我们尝试了低端机降级优化方案。以直播频道为例：
图片渲染效果优化
渐进式首屏带来的一个问题是界面更新时的闪动（特别是图片占大篇幅的时候），为了优化此问题，我们将图片从加载到出现的过程改为了渐显过渡，一定程度上消除了图片闪动的生硬感。
渲染页面作为首屏链路中的一环，不同技术栈、不同设备环境下，在页面首屏时间中也会有不同的占比。类Weex、RN 通过前端脚本映射原生组件的技术方案，渲染路径总结起来是：渲染前端 Virtual DOM -> 映射为 Native 指令 -> 将指令传输到 Native 侧 -> Native 执行指令完成渲染。在前三个步骤上，较重的业务逻辑或不合理的代码通常会带来较长的 计算 、 通信 耗时，中低端机器上尤为明显。通过按需渲染可以有效解决这一问题。
按需渲染主要思路是通过只渲染首屏可见视图来最小化首屏渲染耗时。本次优化中，主要针对以下几个场景做了按需渲染：
优化上线后，鱼塘广场页中低端机型的首屏性能有了部分数据上的提升：
低端机上优化前端渲染阶段对比：
Bundle 体积一方面直接影响 Bundle 下载时间，另一方面也会影响 Android 端的渲染性能（耗时随 Bundle 体积增加 1-2ms/KB），我们在 Bundle 体积上的优化方案较为常规，包括：
闲鱼前端的性能优化暂时告一段落，优化过程中沉淀了较多的通用能力，像 Bundle 离线、数据预取、渐进式首屏等等，这些能力在后续会有更大的发挥空间，一些能力也会变得更加智能，譬如目前的数据预取是在 navigationStart 的时候发起的，这个时机已经比传统的页面加载时的时机提前了许多，但其实还可以更加提前，譬如可以在闲鱼客户端中常驻个 TaskSchele，专门用来处理数据预取的 Task，同时可以结合用户的访问习惯做智能数据预取。
在前端性能要求越来越高的背景下，传统的 Web 加载流程已无法再满足性能优化的需要，所以出现了各种新兴容器 + 配套能力，所以下一代容器的标准形态应该是什么样的？
Ⅳ 前端总线频率5.0GT/s换算成多少MHz
1.
数据传输最大带宽取决于所有同时传输的数据的宽度和传输频率，即数据带宽＝（总线频率×数据位宽）÷8。目前PC机上所能达到的
前端总线频率
有266MHz、333MHz、400MHz、533MHz、800MHz、1333MHz几种，前端总线频率越大凯核，代表着CPU与
北桥芯片
之间的数据传输能力越大，更能充分发挥出CPU的功能。
2.
1GT/S就是每秒传输十的
九次方
次数据，如果一次传输
8bit
的数据，
数据传输速率
是6.4GT/s，那么带宽就是51.2Gb/s
。1333MHz
FSB，其禅兄数据传输速盯袭掘率则是
1333MT/s，或者说1.333GT/s
Ⅳ 如何提高前端工作效率
1. 保证界面及用户体验的前提下，写代码的速度是第一要务
不要拘泥于什么技术可用，什么技术不可用。让它在最短的时间内跑起来，在用户体验的过程中完成迭代升级。利用高速的开发流程，为项目创造竞争优势。有些可以用CSS实现的东西，没必要挂JS。然后还跑过来问“我不想用CSS，这段JS为啥不能隐藏滚动条?”这种开发者，不仅是自虐，还是在虐待访客的电脑。
针对某些要求1小时上线的变态项目，大可以用PS直接生成html，什么是标准?什么是规则?这些都是辅助我们制作网站的建议，当我们有实际需求的时候，大可以打破这种标准。标准是人制定的，前端开发者的追求目标，应该是去做制定标准的人，而不要被标准所束缚。当我们有实际需求的时候，当服务器被拖慢速度的时候，不用谁来指挥，自然会去想如何降低带宽压力。让你的团队自发思考，胜过于你拿各种标准来压迫执行。
负面影响：招聘的难度会大大增加，除非每个员工都有股份、或者是你亲自教出来的。不然，拿同样多的薪水，很少有人会自发思考公司的业务。另外，迭代的开发成本也会很高，纯静态展示页还好，加载程序的页面进行结构调整，会增大员工的工作压力。注意仅在合适的项目上玩速度。
2. 开发人员和业务人员尽可能天天都在一起工作
在团队内部，最具有效果并富有效率的沟通方式，就是面对面交谈。
QQ或者MSN，没有任何的语气语调，无法更直接的表述业务的着重点在哪里。容易产生误会。
开发过程中，要避免晦涩的文档及专业术语。每次沟通带上纸笔，说不明白就画，画不明白就抓一个业务坐你身边，让他看着做。领导层要给他们提供所需的环境和支持，有可能的话，抓一个领导坐在身边。减少交接的流程，简化开发文档。一个好的文档，是让开发人员明白每一步的要求是什么。而不在于文档字数的多少。没有文档更好，只要你能给团队讲清楚。
3. 即时响应，高效开发
在某些领域，为什么一些很小的网站可以战胜大的公司?
他们不遵循守则，他们无需层层审批，他们发现什么好的技术可以直接应用到自己的网站上。说服经理，即使很顺利，也需要一个说服的过程。况且有很多计划会夭折在领导层的审批上。用人不疑，如果你有一个不大的项目，如果你有一个可以信任的人，放手让他去做。这个有执行力的人，一定要选好。做正确的事情比做错误的事情要困难很多。
Ⅵ 前端如何提升开发效率
来具体聊一聊提高前端工程师开发效率的那些方法！
当然除了以上5点，对于前端来说需要提高开发效率的地方还有很多，可谓任重而道远。希望以上几点能够给初识前端的同学带来启发并能够亲自实践。
Ⅶ 如何提升前端开发速度和效率
时间管理
不同的时间段做不同的事。头脑清醒的时候，做一些难的事情；状态欠佳的时候，做一些简单的事，或干脆出去走走，休息休息。
做事时要专注。在我们专注做事时，要减少外界的干扰，比如带上耳机，将手机开静音。如果此时有人来打扰，稍后来处理他的事情；如果事情比较紧急，则记录下当前的状态，方便切换回来的时候，能迅速进入状态。我们可以尝试使用番茄工作法：在一段时间内（一般是25分钟），只做一件事情，结束后，休息一会，继续做事，以此循环。
实现不靠谱的需求。拒绝不靠谱的需求。
理解需求出现偏差。对于不理解的需求，要及时和 PM 沟通，不要自己揣测。
做与整个项目风格不一致的页面。如果设计师的设计的和当前项目的风格不一致，与其沟通，看是否能用项目中统一的风格（样式）。
想清楚实现思路后，再开始编码。有时候一个好的算法比一个差的，会简单很多。
重复造轮子。
一拿到项目就开始编码。应该熟悉当前项目所用的技术。避免重复实现项目已经实现过的功能。
重复的事情让程序来做。
项目脚手架生成器。基于此快速搭建一个项目。主流的框架都有 xx-cli 项目。也可以用 Yo 自己搭建一个。
自动添加浏览器前缀。可以用 AutoPrefix。
自动生成图片精灵。可以用 Compass。
一键切图。可以用 Cutterman。
代码改变时，浏览器自动刷新。
代码发布前做的一些事情。代码压缩，合并等。
选用合适的框架和第三方库。
用好软件。
安装一些代码补全插件。如 Emmet， Bootstrap Snippents 等
设置一些命令的简写。如，git 可以配置一些简写。
快速定位到项目中的某文件；某方法。
全局搜索，替换。
等等。
熟悉常用快捷键。
敲更少的代码。
能快速启动常用软件。
减少查找的时间。
保持工作环境的整洁。丢掉不用的东西，删除不用的文件。
常用链接的导航。
常用第三方组件整理。我积累了一些，见这里。
自己写的代码参考示例。
文档聚合网站。devdocs。
其他
两个显示屏。
保持身体健康。
做事时，保持一个积极的心态。
不做不必要做的事
优化做事的方式
Ⅷ 如何正确衡量前端开发工程师的工作效率
1、一般的公司前后端完全分工明确，前端只需修改js、css、html，在本地静态页面上调试，然后提交代码即可。
2、在前后端分工不明确的情况下，前端虽然仍然只需关注css、js、html的修改，但是却必须在项目可运行的服务器环境中调试，相对麻烦且效率低下，特别是一些需要部署编译执行的项目，如不在项目中开发，则会出现两份甚至多份代码的问题，会导致多份代码同步难的问题产生。
Ⅸ 前端总线速率MT/s和前端总线频率MHZ的换算
2000MT/S就是－每秒钟传输2000兆次数据；
但是这个HT1.0的频率好像没有这么快吧。
HT总线技术在AMD的K8时代颤和备引入的当时是HT1.0频率是800MHZ；
HT总线只是一个通道负责CPU到主板的数据传输，
带宽的算法是棚行：
16bit/8*2*2*800MHz(总线频率）=带宽
从K8时代AMD已经把内存控制器集成到CPU当中去了，CPU可以直接访问内存；茄毁
在个人电脑中HT总线的传输带宽一般不会成为系统性能的瓶颈没必要太纠结。
:)
Ⅹ 前端如何计算网页的打开时间
1. Web performance APIs ，可以得到各种时间比如dns解析时间、连接时间、跳转时间、加载时间等指标，具体请自行查资料，不赘述。
2. 浏览器的私有API，比如 chrome.loadTimes()。
3. DOM ready/load 事件。
4. 白屏时间（first paint time）。
5. 首屏时间（Above-the-fold time）。
4和5尚无公认的确定方法和对应api。特别是5，怎么定义首屏没有统一的标准。因此需要自行确定，并用一些相对hack的方式获取。前一段时间网络和腾讯都有人分享过他们的做法，可以参考，具体链接等回头找到了再补。
如果只是要大致了解网站的性能，最简单的办法是使用Google Analytics，它包含了性能统计。如果要非常细致的数据（比如web performance api上的数据），可以自己写，也可用我写的这个库：http://github.com/hax/WebPerf （有基本的兼容处理，但优化不够，所以我们自己只取样5%~10%的用户加载这个脚本。下个月我还会抽时间改进）。