查看详情

【译】Netflix 网页性能优化案例

原文地址： https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 由于自己最近一年半的事件都在做视频页面相关的，而且这次 Netflix 的技术栈也与我们相似，因此翻译这篇文章，希望大家一起学习。页面很多细节值得深入，但是整个分析下来其实给我们自己在做页面优化提供基本的思路。 Netflix 目前是全球非常非常出色的流媒体服务网站。自从 2016 年发布之后，Netflix 发现用户不仅会在移动端设注册，也会在 Web 上完成注册相关。 通过优化登出页面使用的 JavaScript 代码，以及 prefetching， 开发者给用户提供了更好的体验，以及多个方向的改善: 加载以及可交互时间 (Time-to-Interactive) 缩短了 50%; JS Bundle 的体积减小了 200 KB ，他们选择在客户端更为纯粹的 JS 库，但是服务端依旧选择 React 来渲染； 通过 Prefetching 一些 CSS 和 JS ，缩短了 30% 的可交互时间在跳转的其他页面的时候。 通过削减 详情 »

查看详情

Web 播放 H.265视频

本文主要从H.265 编码格式出发，介绍 H265 使用情况，以及对比 H.264的优势，随后分析如何在前端完成 H265 视频格式的播放。 H.265, HEVC 是当前非常火的视频压缩方式，相对于大家熟知的 H.264 ，平均可以带来接近于 50% 的宽度节省。这对于我们做视频的开发者而言，无疑我们可以在同等流量下拿到更多的 Buffer,无论是直播还是视频播放都是非常有收益的事情。 HEVC (H.265) Vs. AVC (H.264) H.265/HEVC的编码架构大致上和H.264/AVC的架构相似, 主要也包含，帧内预测（intra prediction）、帧间预测（inter prediction）、转换（transform）、量化（quantization）、去区块滤波器（deblocking filter）、熵编码（entropy coding）等模块。 详情 »

查看详情

十月天

不知不觉，已是十月最后一天了。 岁月无情 最近朋友圈不断刷着 金庸 老先生逝去的消息，以及主持人李咏因癌症不治离世。今年，陆陆续续有德高望重的老前辈离去，朋友圈最感触的一段话是： 不知不觉，说书的人走了，评书的人也走了，甚至最后写书的人也走了！ 从我们成长开始，很幸运是能够目睹这些老前辈带来的非常有价值的作品，无论是相声还是影视作品，一直觉得对于我们的世界观与社会的人情世故产生了很多影响。时常会翻看以前的作品，也不是没有看新出的，大概岁月最无情的地方是，过了很多年，有的人走了，而你也长长的停在了那个时代！ 江湖侠义 马老师今天写了一篇文章纪念金庸先生，阿里的江湖气息多多少少来自金老先生的几部作品： 侠者已逝，来者当追，江湖路远，侠义长存 16年国庆在家啃完了《笑傲江湖》，加上大学时期回顾央视版本的笑傲江湖，对这部作品便是爱不释手。如果问我想穿越到哪部作品，自然便也是这样的剑气江湖，自己也想浪子回头，也想抚琴吹箫，深隐竹林。于是乎，花名便从: “戏说江湖醒人世,拈花一笑万山横” 里摘了两字。 大概于自己，江湖之大，但侠义犹记在心。 重新出发 大概每个人都似乎面临这样的挑战。于自己而言，也是思考很久。很多事情一个阶段一个阶段。当你完成当初的既定目标，似乎又会有新的内容。灰度完新的播放器似乎又开始去期待下一阶段 详情 »

查看详情

Git 实用小命令收集

平时大家都习惯使用 Git 但是有的时候我们相对而言需要使用比较复杂一点的命令，如果大家记不住，可以收藏下，毕竟也不是算使用频率很高的命令。 修改 commit 我们经常会在提交的时候拼写错误或者填入一些错误的信息，我们可以使用: git commit --amend 如果你想修改已经提交的过的 commit 信息的话，你需要修改后: git commit --amend // ... edit you message git push --force example-branch 合并 commit 有的时候我们会经常性的提交，但是等到项目开发差不多得时候在发现 commit 信息很杂乱。你可以使用下面信息将所有的 message 合并 在一起: git reset --soft "HEAD~n" # (~n means ~1, ~2,...) git commit --amend 快速解决冲突 我们在 merge 的时候，有的时候我们如果可以很明确使用意向的话， 详情 »

查看详情

随笔-20181021

距离上一篇已由一月有余，一个月之间经历了太多的事情。 台湾之行 国庆，去台湾了一趟，算是今年的 Journey 目标打卡完成了。这次真的是一次超棒的旅行，很喜欢骑着机车沿海的感觉，有点新海诚的画面代入感，喜欢台北的小吃，喜欢台北的整洁，喜欢那边热情的店主。迟迟没有把文章写出来，确实是自己一些松懈的地方，还是希望本周完成《东南一角-下篇》，也安利大家去台湾游玩一次，为什么旅行，因为真相还是需要自己一探究竟，好的不好的，都在眼底。 想结婚了 回来之后，突然开始有这个感觉。不知道是年龄的使然，还是心境的变化。以前会觉得是父母催的，同学的压力，但是这一次发现，是真的觉得是时候要遇到一个适合自己，携手一生的人了。24岁以前，总觉得这种事情很远也很难去定义，但是现在也就想通了，人总会变，随着时间，随着空间，所以，好好准备，也不再排斥朋友的介绍，确实很多事情很难一蹴而就，但是愿能最后始终如一。 1988 安利室友看了后也觉得《请回答！1988》真的很好。大概我觉得从这部剧里看到的是年少少言的自己，让父母的操心的愧疚，是青年自己面对喜欢女孩的纠结犹豫，是成年自己面对生活的坦然，总之，回忆定个在那个年份，仿佛也定格在我们最怀念的时代。 详情 »

查看详情

React-360 二次开发的一些心得

react-360 二次开发的一些心得 前面花了一些时间介绍 《React-360 源码阅读 - 一张图带你理解 React-360 结构》，有兴趣可以阅读下。但是 React-360 相对我们而言，目前也还不是足够稳定，以及有的需求点他们也并未实现，因此很有可能我们需要进行二次开发； 因此我们首先需要去他们 Github 上 fork 一份， https://facebook.github.io/react-360/ 我们 clone 到本地的时候，可以通过相对目录来实现我们项目对二次开发的 React-360 的引入了。 然后我们在本地项目里通过软连接来实现 node_module 的文件替换: cd node_modules && rm -rf react-360-web # 建立 react-360-web， 目录根据实际情况传入 ln -s ../../react-360/React360 react-360-web 初次之外，我们需要在 rn-cli.config. 详情 »

查看详情

H5 互动营销

提到 H5 ，可能大家最开始是从朋友圈的一些网页看到，随着 唤端和分享 SDK 的成熟，现在大促或者其他 Event 都有着非常成熟的结构思路，本文主要分享 H5 在我们平常的活动中扮演的角色以及如何进行联动。 本周周五分享了过去一年关于《H5 互动营销》的一些总结。下文是一个比较缩略的内容纪要； 不知道大家对下面，视频通话，红包雨以及集卡等活动有印象，其实在这背后，都借助了 H5 的力量，提升了观众的关注度，给活动带来了非常可贵的流量。 整个活动中，我们其实需要关注三个点， 链路分析 我们需要在坑位埋入我们的 H5 页面，然后用户触发分享到社交媒体，随后产生自我裂变或者唤端回流到我们的 APP 活动页； 常见的坑位有下面几种: PopLayer, 比如常见的红包挂角，弹出浮层等； 二楼，用户下滑列表后产生的空白位，常见的比如淘宝二楼: Tab 位，固定在某个 Tab 下的 Webview 页面 运营配置的 bannar 位也比较常见; 详尽的来看我们的活动链路就是: 其中常见用户激励方式有: 详情 »

查看详情

Nginx 升级 HTTP / 2 指引

引言 HTTP/2 目前已经逐渐推广开来，很多站点都开始迁移至 HTTP/2 ，比如 https://v.qq.com/ 或者 https://www.google.com.hk/ 都启用了 HTTP/2; 我们可以先看下浏览器的支持情况: HTTP/2 相对 HTTP1 带来了诸多特性; 多路复用 (Multiplexing) 头部压缩 服务端推送 HTTP/2 采用二进制格式而非文本格式 这些好处无疑对提升 Web 性能有很大的帮助，不过还是建议详细阅读 HTTP/2：新的机遇与挑战 了解这背后究竟发生了什么；本文不详细讨论 HTTP/2 的具体特性和实现，更多提供升级实践。 升级 Nginx 机器环境，亚马逊的 EC2 和 ubuntu 系统; 确保你的 详情 »

【转】ubuntu下的dpkg用法

原文出处 https://blog.csdn.net/wanghuohuo13/article/details/78916821?utm_source=copy dpkg 是一个 Debian 的一个命令行工具，它可以用来安装、删除、构建和管理Debian的软件包。 下面是它的一些命令解释： 1）安装软件 命令行：dpkg -i <.deb file name> 示例： dpkg -i avg71flm_r28-1_i386.deb 2）安装一个目录下面所有的软件包 命令行：dpkg -R 示例： dpkg -R /usr/local/src 3）释放软件包，但是不进行配置 命令行：dpkg –unpack package_file 详情 »

查看详情

“中秋快乐”前前后后

其实每年做贺卡的时间都差不多，3个小时左右，主要是搜集素材，然后绘图，再到修改。 其实每一年，都希望给大家带来一些不一样的东西，内容是随着我们这个年龄段走的。其实很开心，能够收到一些反馈和建议，当然随着持续也会开始收到一些人的催稿；​这一次也是 A/B 发送的方式。 中国人对 8 这个数字很喜欢，其实从2011-2018年，理论上这应该是第8张了，也很幸运在 14 年，我坚持下来了这个习惯。其实这一次贺卡，接受了别人的建议，试着尝试放一点“多彩”的内容作为背景，当然灵感是来自 加州的夕阳，大家有兴趣可以去 加州的夕阳 的照片，粉红，紫色，蓝色的渐变美到让人窒息；​ 从17年年初开始一直尝试的方式，结合了部分的 Flat 以及手绘手法，当然这也是为了赶时间的一种手段。​其实内容的变化也是反映我们这个年龄段或者自己的一个经历或者思考也罢。当然也可能是受到 《请回答1988》的影响，比较这两年，陆续弱化了月亮，强调了建筑，大概时间其实会是2004-2008年，嗯，这个年龄段，或者有或许没有，都不重要。因为还有接下来的八年。但还是希望接下来的八年， 详情 »