ribbon image search rewind fast-forward speech-bubble pie-graph star

聊聊 Timing-Allow-Origin 和 Access-Control-Expose-Headers

一般我们如果做页面性能分析,我们自己带着 Chrome 的 PageSpeed 或者 Audit 就可以了。但是如果我们涉及对关键资源的网络请求的性能埋点的话,我们可以尝试利用 PerformanceTiming

它提供了诸如一系列 connectStart domainLookupStart responseEnd 等时间戳的数据。我们可以轻松借用这个 API 做页面的 Performance 的数据埋点。比如可以使用:

const pt = performance.timing;

const domReady = pt.domInteractive - pt.navigationStart  
//...

初次之外,我们可以利用 getEntries() 来筛选关键资源,比如你希望埋点的 JS 或者 CSS 资源又或者视频音频资源。

const resource = performance.getEntriesByType('resource');  
resource.forEach((item) => {  
    // handle your resource timing data
})

当然这个 API 这么好用,为什么我们不用呢。

第一时间还是需要关注 兼容性,其实还好。

其次,我们还需要无论是 服务端还是 CDN 服务商进行设置一些 Header 头的信息。

Timing-Allow-Origin 需要默认设置;

Timing-Allow-Origin: *  
# or
Timing-Allow-Origin: <origin>[, <origin>]*  

如图定义的一样,如果我们希望 拿到 Resource Timing 的数据,尤其什么 DNS 查询,响应时长这些啊,必须要进行设置。要不然数据会是 0。

但是它并没有拿到 Response Header 里面的全部信息,比如你想要拿到某段资源的 Etag , lastModfied 这些信息。怎么办?

Access-Control-Expose-Headers 就需要你设置了,默认我们利用 XHR 进行 getResponseHeader

XMLHttpRequest.getResponseHeader('Content-Type')  

可以获取诸如 Etag Content-Type 的具体值。

Cache-Control  
Content-Language  
Content-Type  
Expires  
Last-Modified  
Pragma  

但是上诉这几种,需要我们设置

Access-Control-Expose-Headers: Content-Type, Cache-Control ...;  

这样使用 getResponseHeader 就不会抛出异常了。

扩展阅读

You Can Speak "Hi" to Me in Those Ways