查看详情

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

查看详情

【转】Web端H.265播放器研发解密

原文地址: mp.weixin.qq.com 作者: 林晚 (淘宝技术) 很早之前写过 Web 播放 H265 的文章,今天淘宝的童鞋带来了更进一步的研究,包括音频的同步,以及对 WebAssembly 的使用,目前该方案其实并不太推荐部署到生产环境,一方面是出于性能帧数丢失,另一方面整个工程复杂度的考虑,不过还是可以学习下整体的思路。 随着音视频业务的快速发展,作为前端工程师,我们团队也逐步深入到音视频编解码领域,涉及到流媒体技术中的文本、图形、图像、音频和视频多种理论知识的学习,并有机会大规模应用到具体实践中。 我们自研了Web播放器并支持h.265解码,保持画质不变情况下,将码流降低50%,达到减少带宽成本,真正做到了h265解码播放的全域覆盖。本文主要分享了我们基于WebAssembly实现H.265格式的解封装、解码和播放。 背景 H.265又称HEVC(全称High Efficiency Video Coding,高效率视频编码),是ITU-T H.264/MPEG-4 AVC标准的继任者。相比H.264,H.265拥有更高的压缩率, 详情 »

查看详情

HLS.JS 自定义 分片 TS 请求 URL

很早之前写过 hls.js 源码解读【1】 ,基本分析了 hls.js 这个库的设计和实现。阅读源码一方面是为了吸收对方设计或者编码上的优点,当然也有可能是另外一个原因,就是一些需求从表面的文档里找不到具体的实现思路。 默认情况下,我们并不需要对解析出来的 ts 分片地址做改造,但是如果真的需要的话,其实有两个思路。 思路 1 复写 Loader 。 自己实现一个关于请求的 Loader ,通过配置传入类似; class XhrLoader extends Hls.DefaultConfig.loader { constructor(config) { super(config); var load = this.load.bind(this); this.load = function(context, config, callbacks) { // your code to handle context.url load(context,config, 详情 »

查看详情

三月初

不知不觉,已是三月了。 北京最近开始变暖了,明显感觉的就是,穿短袖的人多了,虽然还是室内,周末打球,也明显没有冻手的感觉。 二月,似乎过得超级快,可能是28天的缘故,也可能是假期的缘故,1号回家,今年春节假期算是长的,经济的不景气,自然生意也慢慢开始淡了。觉得更重要的是,似乎大家都面临转型的挑战。 元宵过后,家里的房子也便要拆了。看了动工的视频,觉得住了那么久的房子,可是从我出身,就一直呆的地儿,转眼就没了,还是多少回有伤感。但是作为一个经历者,从小时候几毛钱的柴米油盐,到现在的网络支付,不得不感叹时代的步伐。相对而言,面对的逐渐老去的父母,也需要换一种生活方式。开心的是今年春节,母亲居然有时间给我做了两顿蛋炒饭,会边做边说北方肯定没有什么菜什么菜,从12岁去县城求学,难道可以吃上母亲做的饭,当然她不做饭是主要原因。自然而言,春节于任何人的温暖超过别的节日,是来源于整个亲情的维系,反而以前一直给我做饭的幺嬢,到了春节成为了各种絮叨的对象,去县城求学后,一直寄宿在幺嬢家里,于她心里而言,自然而言各种关于社会处事,做事风格边成为与她对话的日常。这个地方,才是家。 春节回来,觉得感觉最突出的词汇,就是希望。希望,很久没有写这个词汇。 详情 »

查看详情

水军回忆录

大概今年春节档,是自己作为义务水军而言,经历过战斗最为激烈的一次。而且实力之强,以至于春节第一天下午就被赶到了。其实一部商业电影的营销在如今的中国电影环境下,显得格外重要。 自己从13年成为水军,才开始自己认为水军的主要责任就在于“吹”。就是要强调这部电影优于别人的地方。大概其实中国商业电影分为几个时代,从张指导的《英雄》,到今天火热的《流浪地球》。中国商业电影从英雄票房将中国电影记录挂上亿的单位,到战狼创造的50多亿的票房纪录,这是整个中国近17年来,人们物质水平提高后,文娱文化带来了巨大的市场。而随着市场的壮大,一部电影成败也变得更为复杂,在这个大市场下,一部商业电影的成功,各方面的特点也就会尽可能拿出来宣传。比如光线传媒,特别乐于线下的路演活动,以及对微博豆瓣的的评论风控。而华谊兄弟则善于抓对手软内。 然而这次,其实最大的意外,是我觉得作为水军而言,已经开始站在更关注个人的角度去攻击竞品。 自己总结的: 前些天看《高晓松 采访成龙》,大概成龙说自己热爱拍电影,以及愿意给年轻人机会。再过两三年,星爷就六十岁了,这个把自己一生都投在电影中行业里人,我觉得他现在只是在做自己喜欢的事情?有错么?网上有很多篇回应炒冷饭的事情,希望水军能够多一点理解,真正拿到电影里说事,而不是老早预谋的拿着这些毫不相干的事情做文章,作为一个水军看到同行这样,心太痛,好在作为周星驰的粉丝很开心,今年拍了部大爱的一部电影,虽然第一天就遭遇了大规模攻击,但是相信 大师兄会回来的! 详情 »

查看详情

The Plan of 2019

These are some things I should do in the new year. P7 Level. 40+ pictures.(iPad Procreate 《笑傲江湖系列》). Journey to Singapore. WebVR Guide. Daily Reading (30 mins). Keep fit; Review some Books. 500 + Github Stars 60+ Web Articles. Renovation new Rooms. Make money to buy a car (2 Year). Owned TSLA, WB, MDB, IQ, JD. Write 详情 »

查看详情

《新喜剧之王》二十年如梦

​​今年年过的很开心,看了星爷的新电影《新喜剧之王》。电影看完,一扫之前预告的担忧,第一个预告的镜头大都在前几分钟,所以几乎不会影响整部电影。大概这是新千年这几部电影,自己认为作为粉丝而言比较喜欢的一部,好过《西游降魔篇》《美人鱼》。整个电影节奏和镜头转换,完全是认为看的最舒服的一次,看完意犹未尽。 同期上映的电影还有龙叔《神探蒲松龄》,虽然现在也加上了星爷,他俩都被说成了,卖情怀,圈钱等等。其实这里再多的辩驳也依然说不过批量的水军。但是我一直很欣赏他们,他们电影会一直给年轻人机会,星爷后面的电影,都给了新人很重要的角色,这次甚至只带了一个王宝强,其余演员都很难搜索到,《新喜剧之王》说的是演员努力奋斗,但现实是很多龙套真的机会都没有,所以星爷这次的片尾字幕给了每一位参演角色的姓名列表。我觉得就像电影里一样,每一个人都希望有一天,大家可以记住他的名字。 大概这部电影看完之后,我的直觉想起了两部电影《长江七号》《回魂夜》。这两部电影至今也被自己放在周星驰前五的电影里。说句实话,这两部电影,夹杂着一些不一样的元素。长江七号里面的亲情线,回魂夜里面的恐怖元素,都给人留下深刻的印象。长江七号拍的是一部喜剧儿童电影,对于儿童而言,他们的眼里只有七仔,以及七仔所能带给他们的超能力和希望。对于成人而言,眼里看到的周铁的辛酸,以及心里的要强和善良。孩子们并不知道七仔其实并不存在,但是大人们知道七仔是幻想出来,如果移走七仔, 详情 »

修复 CALL_AND_RETRY_LAST Node 运行问题

最近使用 react-native 的时候遇到了下面的异常: CALL_AND_RETRY_LAST Allocation failed - process out of memory 大概是因为你在 JS 执行比较大的 JSON.parse() 的时候,这个时候比较直接的办法是设置 --max_old_space_size。 在你的 .bash_profile 增加这一话就 Ok了。 export NODE_OPTIONS=--max_old_space_size=4096 这只是临时的一个解决方法,有时间还是需要 debug 到源码查看具体哪一个环节出了问题。 详情 »