H5 能力

昨天老弟问了一些有关 H5 能力的问题，今天总结一下

1 JS 能获取哪些信息?

测试页面地址:
https://p0.cdn.qhstatic.com/dev/h5info.html

1.1 ua

useragent:
mozilla/5.0 (iphone; cpu iphone os 12_0 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/12.0 mobile/15e148 safari/604.1
注: 可提取手机系统、系统版本号等

1.2 屏幕尺寸、浏览器视窗尺寸、页面尺寸

(window.screen.availWidth/availHeight):
414*736
($(window).width/height):
414*622
document.body.clientWidth/clientHeight:
414*2000

1.3 像素比

像素比:
3
注: 加载不同清晰度的图片

1.4 系统字号、字体

系统字体:
-webkit-standard
系统字号:
16px
-webkit-text-size-adjust:
undefined
字号比例:
1
注: 如果是 rem 布局，需要考虑用户调整系统字号的问题，但自测 iOS 浏览器中监测不到系统字号变化

1.5 是否为手机浏览器

是否为手机浏览器:
是
注: 根据 ua 判断

1.6 获取地理位置

通过系统接口获取地理位置(需要用户授权):
----经度:116.48469977986164 纬度:39.981722613785344
注: 微信中可调用微信 API 获取地理位置
普通浏览器可调用 navigator.geolocation 获取地理位置
都需要用户授权

1.7 用户IP

用户IP:
----223.104.3.182
注: H5 自身无法获取，但可以调接口获取

1.8 获取网络状态

网络状态:
----4G
注: 根据 navigator.connection 判断网络状态，但兼容性还不行
微信里可以调微信 API 获取

2 JS 监测页面性能

利用 window.performance 属性查看网页加载过程中的各个阶段的耗时

2.1 Navigation Timing API

原始数据:

navigationStart 浏览器处理当前网页的启动时间:
1545706517172
navigationStart 浏览器发起http请求:
1545706517172
domainLookupStart 域名查询开始:
1545706517181
domainLookupEnd 域名查询结束:
1545706517222
connectStart 开始与服务器建立连接:
1545706517230
connectEnd 与服务器连接建立:
1545706517267
requestStart 浏览器向服务器发出http请求(或开始读取本地缓存):
1545706517267
responseStart 浏览器从服务器（或读取本地缓存）收到第一个字节:
1545706517443
responseEnd 浏览器从服务器收到最后一个字节:
1545706517453
domLoading 浏览器开始解析网页DOM结构:
1545706517453
domInteractive 网页dom树创建完成，开始加载内嵌资源:
1545706517479
domContentLoadedEventStart 网页DOMContentLoaded:
1545706517479
domContentLoadedEventEnd 网页所有需要执行的脚本执行完成，domReady:
1545706517499
domComplete 网页dom结构生成:
1545706517643
loadEventStart 网页load事件的回调函数开始执行:
1545706517643
loadEventEnd 网页load事件的回调函数结束运行:
1545706517643
注: 过早读取 domComplete, loadEventEnd 可能为 0
需要等相应的时机后取值

计算数据(单位:ms):

DNS寻址时间:
41
TCP连接耗时:
37
首包时间:
271
request请求耗时:
186
解析DOM树结构的时间:
190
页面加载总时间:
471

兼容性:

2.2 Resource Timing

各资源加载耗时(单位:ms):

加载http://p0.cdn.qhstatic.com/resources/css/reset.css
DNS寻址时间:0 request请求耗时:0
加载http://p0.cdn.qhstatic.com/api/zepto.js
DNS寻址时间:0 request请求耗时:0
加载http://res.wx.qq.com/open/js/jweixin-1.0.0.js
DNS寻址时间:0 request请求耗时:325
加载http://p0.cdn.qhstatic.com/api/util.js
DNS寻址时间:0 request请求耗时:0

兼容性:

2.3 资源不可访问

如果一个资源不可访问了，能判断是DNS寻址的问题还是资源的问题吗？
自测请求一个403、一个404、一个500的地址以及一个不存在的域名
都没有进入 performance entries，只以说明资源加载出错，不能判断到底是什么问题

3. webp兼容性

4. m3u8兼容性

5. 是否可获得系统 uuid

否

参考

caniuse
利用performance属性查看网页性能
Performance