查看详情

使用 JavaScript 探测网络状态

同步 https://medium.com/@JackPu/how-javascript-detect-the-network-status-42f3a6d85f96 在某些情况下，我们的开发者需要指导是否由于网络中断的原因导致 request 失败。 以及我们需要网络重新连接后，我们需要执行一些代码。 naviagtor.onLine naviagtor.onLine 是一个非常好实用的 API. 它可以告诉开发者现在网络是连接还是断开的状态。并且它已经覆盖了绝大多数现代浏览器。 navigator.onLine caniuse figures 而在比较老的 IE8 浏览器，我们小使用 online 事件进行监听。 document.addEventListenner(‘online’, () => { // todo }); document.addEventListenner(‘offline’, () => { // todo }) 网络心跳检测 然后很早的时候，很多浏览器还不支持 naviagtor.onLine。开发者只能通过 XHR 和 Image 发送心跳轮询来判断是否还处在网络连接的状态。 const pingUrl = ‘https://ipv4.icanhazip.com'; 详情 »

查看详情

五月天

一旦看到柳絮开始飘的时候，就觉得帝都的春天算是真的到了时候。这一个多月感觉随着天气的起起伏伏就这么过了。 Don't Go Down 昨日看了巴塞罗那 VS 利物浦的 半决赛，看到第四个球的时候，整个人都懵了。感觉利物浦的那一个球踢懵了巴塞罗那场上的球员，感觉也会让很多球迷粉丝产生阴影。去年稍微早的时候，自己看了巴塞罗那和罗马的系列赛，球队带着三球优势去罗马客场。结果客场翻盘，那个时候很多人都觉得莫名其妙。相比今年，大家觉得准备很充分，充足的休息，足够人员调整，没有双线压力，更重要的是，已经摔过一次，不至于第二次吧。然后事实就是这样，大概一整天似乎都还会受到这样的影响。晚上看到15年做的这张封面。#Don't Go Down# 这是15年阿根廷决赛失利做的图，连续的受挫真的会很打击人的信心，但是似乎这就是命运。然而，我们还是相信几年前的诺坎普奇迹会发生，未来几年还是有机会更向前一步，球队的整容更替，战术的磨练，更加成熟的队长，因为红蓝就是奇迹的颜色。 忽然想起《复仇者联盟4》Tony 对 队长说的那句话: Do u trust me ? I do! Avengers 今年最期待的电影《 详情 »

查看详情

使用原生 Web Share API 进行内容分享

Chrome 75 开始支持 Web Share API - Level 2, 这也就意味着你可以通过 JS 分享 文件，链接或者文本到其他的 App 了。 其实这个需求很早很早，我们的 PM 就开始提了，关于实现，目前比较成熟的是通过 JS Bridge，然后利用 APP 的能力唤起分享面板。但是我们还是无法通过 Chrome 或者 Safari 实现页面内通过 JS 执行唤起分享面板。详情可以见《H5 互动营销》。 canShare() 以及 share() 当然目前这个还是一个处在实验性的 API ，我们还是需要去做一些兼容性判断。分享文件，我们还需要确认这些文件是否处于可分享的状态。可以尝试 Chrome 团队给的代码 const shareData = { files: filesArray }; if (navigator.canShare & 详情 »

查看详情

移动平均(EWMA)在 HLS.JS 的实践

才开始大家一直在想，什么是移动均线？ 哪里会用到？？ 对于常规的页面，实际上很难说需要到具体到有需要用到 网络宽带的预估，但是对于流媒体或者上传服务时候，这个就很重要了，我们需要根据不同网速情况，做策略上的更改，从而改善体验。 做视频播放的很多童鞋，经常在 Youtube 上看到这么一个仪表盘，界面。 大家会看到网速的实际情况。 如果叫大家来实现，实际上，或许很轻而易举会想到用一个网络资源的请求，和时间来完成做一次除法就OK了。 const start = Date.now() fetch(url, {}).then((result) => { const end = Date.now(); const bw = length / (end - start) * 8000; }) 似乎，这样就可以表示一个当前分片的网速了，但是我们实际上并不会用当前的瞬时值作为一个衡量当前宽带是否满足我们播放某种清晰度的标准。 而 hls.js 巧妙的借鉴了 移动平均 来反映当前网络的一个趋势。 移动平均 移动平均（moving average，MA），又称“ 详情 »

查看详情

解决 Synchronous XHR in page dismissal 的问题

如果你更新了最新的 Chrome (大约 >= 73 的部分版本)，发现有些日志没有发送的时候，需要引起注意了。你需要关注是否有一些异常或者警告产生类似 Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://xxxx/': Synchronous XHR in page dismissal. 目前还并不能明确具体会在什么版本采用这个策略，当前有可能只是部分版本限制了 至今， Synchronous XHR 都是不被推荐使用的，但是我们还是会在一些特殊场景中使用到，比如页面 unload 或者 beforeunload 用于表示用户离开页面的数据发送。不过不好的消息便是，Chrome 正计划限制这类似的请求。 于是乎我们看到了很多人在最近几天发布了这个问题 传送门 https://stackoverflow.com/questions/55676319/ajax-synchronous-request-failing-in-chrome 目前比较好的解决方式只有 navigator.sendBeacon(), 它不会阻塞 main 详情 »

查看详情

新海诚新作《天气之子》的前前后后

上一周，新海诚发布了个人的第七部动画电影作品《天气之子》的 PV。 故事梗概如下: 动画《天气之子》是以天气变化混乱的时代为背景，讲述被命运操纵的少年和少女，自己选择生存方式的故事。高中一年级的夏天，帆高从离岛离家出走，来到东京以后发现生存并不容易，生活从拮据变得潦倒，为了维持生活不得不为一家很奇怪的超自然杂志撰稿。而这一切就如同命运的安排一般，连日都在不停的下雨，他在城市的角落遇到了命中注定会遇见的人，她就是阳菜。阳菜拥有不可思议的能力，她能够操纵天气，从那一句“现在开始就要放晴了哦”开始，雨就开始停止，天空变得明媚，街道都洒着美丽的阳光，两人就这样开始相知相识，但是命运的操纵才刚刚开始，二人的恋情又将会走向何处呢？ 在《你的名字》大火之后，时隔三年，新海诚带来了这样一部新的带有点奇幻色彩的电影。 预告一处，大概给人的感觉当然还是原汁原味的新海诚的味道，每一帧都很漂亮，而且又是下雨天。让人不得不想起《言叶之庭》这部作品。当然第一时间，也有网友做了实景对比图: 东京台场 大家都被预告的原声音乐给吸引了，如同新海诚说道，和 RADWIMPS 的再一次合作，双方已经有很好节奏了。不过专辑应该会要到电影快上映的时候才上映。大家又一次期待的 天门 x 详情 »

查看详情

Is Service Worker in Sandbox

其实这个话题，对很多人而言，如果之前没有细致了解过 Chrome 设计架构，还真不好说出答案，不过好在 Chrome 官方写了四篇文章，详细的阐释 Chrome 适合实现多进程，以及其具体作用的。 Chrome 的多进程设计 输入 URL 浏览器做了什么 Renderer process 如何渲染页面 Chrome 与页面的事件交互 那么 Service Worker 是否运行在沙箱中呢？ 我们先看下 Chrome 的多进程架构。 图1 浏览器多进程模型 如图所示，Chrome 包含多个进程，而其中 Browser Process 主要负责浏览器的 UI(比如上面那些插件图标显示，每个tab 的控制，输入框的交互事件等等...)，Renderer Process 顾名思义，则是最为核心，我们每个页面渲染的进程，即我们每打开一个 Tab 访问某个页面，就会产生一个 Renderer Process。而 详情 »

查看详情

聊聊 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 详情 »

查看详情

四月天

眼看2019年的四分之一又过去了。当然二月份确实比任何月份都过得快。三月也一样，感觉三月给人的感觉更像是希望是落地同步节奏。 军师联盟解散 上上周一，王导突然发信息叫晚上去吃饭。曾经中钢军师联盟的一员，一起看过凌晨四点中关村的战友，也不得不挥别这段故事。记得17年才过去中关村的时候，写过一些内容，到最后最后，肯定会有人会为曾经的付出负责，无论结果是好是坏，都觉得那段时间真的人生真的很感动瞬间。 你活得越长啊，最后能想起来的事情；就只剩下那些让你心跳和心动的瞬间 所以，最后我们都算为这个联盟做到最棒的自己。 江湖再见~ 别样的挑战 其实春节后一直在做的事情就是时间细致规划，与短期目标的挑战。其实有些还是很有意思，也有利于去慢慢改善生活习惯。比如会在 23:15 特意设置一个关灯的日程。三月份做的另外一件很有趣的事情，就是卸载了微博，大概也就是晚上会在 iPad 上看了。这种事情真的很小，但是的确现在减少很多时间浪费在社媒上。比如也设置了固定半个小时的读书时间和跑步时间，虽然也不是每天都能完全按照规划, 但是还是会觉得在 review 的时候还是很有成就感。也有一些挺无聊的挑战，比如去 Ins 上盗视频，然后转帖到 抖音上，这就是目前 “杰克动物圆” 所做的挑战。所以四月，肯定还会继续的。 思考与行动 如果评分， 详情 »

查看详情

使用键盘的媒体按键控制视频播放

Chrome 将会在 73 的版本，带来新的媒体控制策略。其中为了推进 PWA 的进度，扩展了媒体播放与键盘的交互。 如果我们使用 Mac 的话，大家一定见过最上面(如果带 touch bar，则是 touch bar) 快进，下一曲，暂停，静音等按键。 很早之前我们介绍过 使用 mediaSession 实现媒体播放的控制 ，在移动端设备上，你可以在锁屏或者通知栏来进行 Web 音乐的播放，而现在，你可以在 PC 上实现这些功能。 navigator.mediaSession.setActionHandler('previoustrack', function() { console.log('prevoious') }); navigator.mediaSession.setActionHandler('nexttrack', function() { console.log('next') }); navigator.mediaSession.setActionHandler('play', function( 详情 »