人人网FED

要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。 这3个例子都是用了Houdini里面的CSS Paint API。 第1个例子如果使用传…

我们可以引入一个轮播组件，但是有个问题，通常轮播组件都会把所有的slide都渲染出来再进行切换，这样就导致所有的资源都会触发加载，这可能不是我们所期待的，毕竟如果slide比较多的情况需要一次性加载的图片等资源太多了。所以我们可以手动简单地写一个，满足需求即可。 现在一步步来实…

之前看到一篇博文，介绍导航下划线光标跟随的效果，是用的CSS的hover结合CSS3的选择器做的，总感觉效果不太自然，所以我就在想能不能用SVG来做这个效果，试了一下，还是可以的，不过要借助一点JS。先来看下一下按正常思路用JS应当怎么实现。 1. 正常思路的实现 我的思路是这…

像素是屏幕显示最小的单位，在一个1080p的屏幕上，它的像素数量是1920 * 1080，即横边有1920个像素，而竖边为1080个。一个像素就是一个单位色块，是由rgba四个通道混合而成。对于一个1200万像素的相机镜头来说，它有1200万个感光单元，它能输出的最大图片分辨率…

下面一一进行说明。 1. 头部压缩 当这种请求数很多的时候，会导致网络的吞吐率不高。并且，比较大的HTTP头部会迅速占满慢启动过程中的拥塞窗口，导致延迟加大。所以HTTP头的压缩显得很有必要，HTTP/2的前身SPDY引入了deflate的压缩算法，但是据说这种容易受攻击，HT…

这道题的输出是123，为什么不是132呢？因为我一直理解Promise是没有异步功能，它只是帮忙解决异步回调的问题，实质上是和回调是一样的，所以如果按照这个想法，resolve之后应该会立刻then。但实际上并不是。难道用了setTimeout？ Promise的实现有很多库，…

位运算的方法在其它语言也是一样的，不局限于JS，所以本文提到的位运算也适用于其它语言。 位运算是低级的运算操作，所以速度往往也是最快的（相对其它运算如加减乘除来说），并且借助位运算的特性还能实现一些算法。恰当地使用运算有很多好处。下面举几个例子。 1. 使用按位非~判断索引存在…

我在《https连接的前几毫秒发生了什么》详细地介绍了https连接的过程，该篇通过抓包工具分析整个过程，本篇将从Chrome源码的角度着重介绍加密和解密的过程，并补充更多的细节。 Chrome/Chromium是使用BoringSSL做为TLS层的库，它是OpenSSL的一个…

本篇解读基于Chromium 66。HTTP协议起很大作用的是http头，它主要是由一个个键值对组成的，例如Content-Type: text/html表示发送的数据是html格式，而Content-Encoding: gzip指定了内容是使用gzip压缩的，Transfer…