关键词：
经常会看些性能分析的书，但是实际在做优化的时候又无从下手。
因为没有数据，也不能确定实际用户到底在哪一环影响了他们的性能。
现在H5提供了一些很方便的Performance接口，可以让我们更方便的搜集到用户的数据，不过有几个方法的兼容性实在太差。
插件已经上传到Github中，可以在这里获取到，index.html中写的是一些示例，插件源码在“js/primus.js”中。
写的比较仓促，自己能力也有限，如有问题，欢迎指正。
一、请求时间统计
上图是performance.timing监测到的特定于用户的计时器，通过这些属性的组合搭配，可以获取到特定的时间数据。
1）performance
设置好插件中全局的performance对象，以及方法now，获取当前时间戳。
2）Document.readyState
上图中的“domComplete”、“domInteractive”和“domLoading”，就是Document。readyState的3种状态loading, interactive或complete发生的时间。
3）getTimes()
在这个方法中计算各个参数之间的值。
在网上参考了很多资料，再结合了一点自己的理解，有些参数的理解可能有误，具体的计算方式可以查看源码“primus.js”。
1. firstPaint：白屏时间，也就是开始解析DOM耗时，用户在没有滚动时候看到的内容渲染完成并且可以交互的时间
2. loadTime：加载总时间，这几乎代表了用户等待页面可用的时间
3. unloadEventTime：Unload事件耗时
4. loadEventTime：执行 onload 回调函数的时间
5. domReadyTime：用户可操作时间
6. firstScreen：首屏时间，用户在没有滚动时候看到的内容渲染完成并且可以交互的时间，记录载入时间最长的图片
7. parseDomTime：解析 DOM 树结构的时间，期间要加载内嵌资源
8. initDomTreeTime：请求完毕至DOM加载耗时
9. readyStart：准备新页面时间耗时
10. redirectTime：重定向的时间
11. appcacheTime：DNS缓存耗时
12. lookupDomainTime：DNS查询耗时
13. connectTime：TCP连接耗时
14. requestTime：内容加载完成的时间
15. requestDocumentTime：请求文档时间，开始请求文档到开始接收文档
16. responseDocumentTime：接收文档时间，开始接收文档到文档接收完成
17. TTFB（Time To First Byte）：读取页面第一个字节的时间
二、资源载入信息
performance对象中有个getEntries方法，通过此方法可以将页面中的资源载入情况记录下来。
可以绘制出像下图那样的瀑布图。
然而此方法兼容性非常差，我在红米手机中测试，UC不行，自带的浏览器倒是可以将信息打印出来。
在插件中也稍微封装了一个方法“getEntries”，在兼容的浏览器中可以采集到相关数据。
1. name：资源的完整路径，例如“http://localhost:63342/web/strick/Primus/ajax/data2.json”
2. fileName：文件名。例如“data2.json”
3. duration：资源载入总共消耗的时间
4. requestStartDelay：开始请求延时时间
5. lookupDomainTime：DNS 查询时间
6. connectTime：TCP 建立连接完成握手的时间
7. TTFB：读取资源第一个字节的时间
8. requestTime：内容加载完成的时间
9. requestDuration：请求区间
10. redirectTime：重定向的时间
在一些商业性能采集的应用中，我看到有瀑布图的展示，不知道他们是怎么搞的。
三、网络状态
网络状况 API“navigator.connection”也是个很有用的参数，然而兼容性也是非常差。
网络状态就是获取当前是“WIFI 2G 3G 4G”等。
如果能获取到这个参数，就能准确知道页面在不同网络状态中展现的情况。
四、网速
没有专门的API提供当前用户的网速，但可以通过下载某个大文件来计算。
目前只知道这种方法，感觉实用性不是很大。
在index.html中写了个例子，将图片放到某个服务器下面会更准确一些。
五、AJAX监控
现在的页面上面充斥着大量的ajax请求，可以将请求的信息保存起来有助于分析性能。
在项目中使用Zepto库、jQuery等封装好的库，最后还是会调用原生的“XMLHttpRequest”
可以重新一下“XMLHttpRequest”对象，在这个对象的几个步骤中埋入要统计的点。
window.XMLHttpRequest = function(flags) {
var req;
// 调用原生的XMLHttpRequest
req = new _XMLHttpRequest(flags);
// 埋入我们的“间谍”
monitorXHR(req);
return req;
};
在open和send中也埋入统计的方法，通过这种方式就能获取到信息了，下图就是统计的信息。
六、UA信息和分辨率
1）UA信息
每个请求头中都会带有“User-Agent”属性，通过这个属性可以分析出OS、Device、Browser、Platform等信息。
我自己没有封装这个头，网上有很多插件可以做分析的工作，不过JS的话有点大。
国外有“UAParser.js”，关注量1400多了，不过简单测试下来，对于国内手机的分析不是很给力，如果要用的话还得自己修改下源码。
国内有“useragent”，有js和php多个版本，小测了一下，国内手机辨别率还挺高的。
2）分辨率
这个比较简单就是获取屏幕的物理宽度和高度，一句话就能获取。
primus.dpi = function() {
return {width:window.screen.width, height:window.screen.height};
};
尺寸坐标可以参考我以前写的一篇博文《JavaScript中尺寸、坐标》
七、异常监控
异常监控就是监听“window.onerror”事件，在这个事件内能够获取到错误提示信息，行数，列数，错误地址。
/**
* 异常监控
* https://github.com/BetterJS/badjs-report
* @param {String} msg 错误信息
* @param {String} url 出错文件的URL
* @param {Long} line 出错代码的行号
* @param {Long} col 出错代码的列号
* @param {Object} error 错误信息Object https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
*/
window.onerror = function(msg, url, line, col, error) {
var newMsg = msg;
if (error && error.stack) {
var stack = error.stack.replace(/\n/gi, "").split(/\bat\b/).slice(0, 9).join("@").replace(/\?[^:]+/gi, "");
var msg = error.toString();
if (stack.indexOf(msg) < 0) {
stack = msg + "@" + stack;
}
newMsg = stack;
}
var obj = {msg:newMsg, target:url, rowNum:line, colNum:col};
alert(obj.msg);
};
八、数据发送与引用
1）数据发送
为了更好的跨域，数据发送通过设置Image对象的src来实现。
简单的将各个收集过来的数据作为URL中的参数传过去，代码中可能有BUG。
发送以后就是保存数据了，可以将数据保存在Hadoop中。
2）Primus的引用
由于要计算白屏时间，dom时间等，所以位置不能随便放，得要放在head的最后面。
如果要做点初始化配置也是完全OK的。
<head>
<script type='text/javascript'>
window.primus || (primus={});
primus.param = {
"token":"dsadasd2323dsad23dsada",
"backgroundImages":[]
};
</script>
<script src="js/primus.js"></script>
</head>
源码下载：
https://github.com/pwstrick/Primus
参考资料：
2021前端面试题搜集(每日更新)
为了找工作临时看面试题不如日积月累每天准备两三道为将来渡劫，前端小哥们，冲鸭！！！点我去看----> HTML篇 查看详情
2021前端面试题搜集(每日更新)
为了找工作临时看面试题不如日积月累每天准备两三道为将来渡劫，前端小哥们，冲鸭！！！点我去看----> HTML篇 查看详情
性能测试
...测试需求，符合自己公司业务场景及系统。例如，你们的前端登录系统，老大说让你做一个性能测试，你按照12306的标准去做并发，那不是傻逼吗？你们服务器再牛逼也会宕机啊，所以要搜集业务数据，拉一个月的数据看看平均... 查看详情
前端性能
1.关键点 分页面、区域、浏览器、性能指标 页面的性能指标详解： 白屏时间（firstPaintTime）——用户从打开页面开始到页面开始有东西呈现为止 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间... 查看详情
从页面加载到数据请求，前端页面性能优化实践分享(代码片段)
背景做过前端开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面的优化。对用户而言，优化可以让应用的响应速度加快... 查看详情
性能优化方法
性能优化方法 前端优化 前端优化主要包括动态内容静态化，增加前端缓存。页面静态化是指将指含有大量动态元素的动态网页，如jsp、php等，转换为html静态页面，静态页面由于不用加载动态元素，其访问速度... 查看详情
前端性能高性能滚动scroll及页面渲染优化--转发
本文主要想谈谈页面优化之滚动优化。主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读... 查看详情
前端性能-合成层
前言：页面性能是前端开发特别需要关注的重点，评判前端Web页面性能的指标有很多，页面的流畅度是其中比较重要一点，有时候我们发现我们的页面在使用了某些属性或者进行某种操作之后，浏览器的渲染... 查看详情
前端性能优化成神之路—前端页面渲染流程
浏览器渲染的工作流程浏览器的工作原理。以Webkit引擎的工作流程为例，浏览器加载一个HTML页面后进行如下操作 解析HTML【遇到<img>标签加载图片】—>构建DOM树加载样式—>解析样式【遇到背景图片链接不加载】—... 查看详情
前端雅虎性能优化
1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。 减少... 查看详情
前端性能优化
...到<head/>内会使页面有步骤的加载显示。注重性能的前端服务器往往希望页面有秩序地加载。同时，我们也希望浏览器把已经接收到内容尽可能显示出来。这对于拥有较多内容的页面和网速较慢的用户来说特别重要。向用户... 查看详情
前端性能优化：桌面浏览器前端优化策略(代码片段)
摘要:前端性能优化是一个很宽泛的概念，本书前面的部分也多多少少提到一些前端优化方法，这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统，前端优化的最终目的都是提升用户体验，改善页面性能，... 查看详情
如何打造亚秒级加载的网页1——前端性能
对于我们前端来说，页面的加载速度是直接影响到用户的体验度用户体验度是能直接决定最终的销售额的每增加延迟一秒，页面访问量降低11%，转化率降低7%如何提高页面的加载速度是前端工程师们必然要懂的那么我就来讲解一... 查看详情
前端性能测试工具原理与行业常用工具简介
标签（空格分隔）：前端性能前端性能：WebPagetest功能简介WebPagetest，是前端性能测试的利器：可以为我们提供全方位的量化指标，包括页面的加载时间、首字节时间、渲染开始时间、最早页面可交互时间、页面中各种资源的字... 查看详情
前端性能监控
为了帮助开发者更好地衡量和改进前端页面性能，W3C性能小组引入了NavigationTimingAPI，实现了自动、精准的页面性能打点；开发者可以通过window.performance属性获取。 performance.timing接口（定义了从navigationStart至loadEventEnd的21个只... 查看详情
前端html页面与后端ashx的交互-uri参数的解析
前段时间在研究前端与后端交互时怎么去解析URI里带的参数，如果是aspx页面倒好，直接用HttpRequest就可以搞定解析工作，但如果是HTML页面怎么处理呢？URI示例：http://index.html?id=123&code=demo&state=1这里首先引入了ASHX后台处理... 查看详情
解决html5标签兼容的办法搜集
...化标签以及属性，可以让开发者非常方便地实现清晰的web页面布局，加上CSS3的效果渲染，快速建立丰富灵活的web页面显得非常简单。HTML5的新标签元素有：<header>定义页面或区段的头部；<footer>定义页面或区段的尾部；&l... 查看详情
从页面加载到数据请求，前端页面性能优化实践分享(代码片段)
...开发工具、解决方案和服务，赋能开发者。背景做过前端开发都知道前端的工作内容是很多的，对于HTML、CSS、Javascript、Image、Flash等各种内容的使用。为了更好提升应用的性能，我们需要对各种资源内容进行不同方面... 查看详情