BigPipe 学习研究

1. 技术背景:FaceBook 页面加载技术

试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费 6 秒;同时另外一个网站提供了相似的服务,但响应时间只需 3 秒,那么你会如何选择呢?数据表明,如果用户打开一个网站,等待 3~4 秒还没有任何反应,他们会变得急躁,焦虑,抱怨,甚至关闭网页并且不再访问,这是非常糟糕的情况。所以,网页加载的速度十分重要,尤其对于拥有遍布全球的 5 亿用户的 Facebook(全球最大的社交服务网站)这样的大型网站,有着大量并发请求、海量数据等客观情况,速度就成了必须攻克的难题之一。

利用 HTML 和 CSS 实现常见的布局

单列布局

  1. 水平居中

    水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐操作,child元素的父容器是parent元素)

    • 使用 inline-block 和 text-align 实现

      1
      2
      3
      4
      5
      6
      .parent {
      text-align: center;
      }
      .child {
      display: inline-block;
      }

      优点:兼容性好;
      不足:需要同时设置子元素和父元素

圣杯布局

经典的三列布局,也叫做圣杯布局 Holy Grail of Layouts,是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

  1. 三列布局,中间宽度自适应,两边定宽

  2. 中间栏要在浏览器中优先展示渲染

  3. 允许任意列的高度最高

BFC 和 HasLayout

BFC 的定义

是 W3C CSS2.1 规范中的一个概念,它决定了元素如何对其元素进行定位,以及与其它元素的关系和相互作用。

在创建了 Block Formating Context 的元素中,其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 margin 特性。在 Block Formating Context 中相邻的块级元素的垂直边距会折叠(collapse)。

在 Block Formating Context 中,每一个元素左外边距与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个 Block Formating Context。

Javascript 中的内存管理

无论哪种语言,内存的生命周期差不多总是相同的:

  1. 分配你需要的内存

  2. 使用它(读、写)

  3. 当不再需要已分配的内存时释放它

js 中,大部分内存管理问题出现在释放内存阶段1,基本问题在于无法确定一些内存是否“不再被需要”。高阶语言的的解释器包含一个称为“垃圾收集器”的软件,它的工作是追踪内存的分配使用,以便在于不再需要某个已分配的内存时发现,并自动释放它。

javascript oo 实现

简单栗子

理解三个关键字:

  1. function, JS 世界里 Class 的定义用 function, function 里面的内容就是构造函数的内容

  2. this, 代表调用这个函数的对象

  3. prototype, 用它来定义成员函数,比较规范和保险

javascript 异步编程原理

Javascript 的执行环境是单线程的,所谓的单线程,就是指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。

这种模式的好处是实现起来比较简单,执行环境相对单纯。坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为一段 Js 代码长时间运行(比如死循环),导致整个页面卡在这个地方,其它任务无法执行。

https 服务器配置指南

Nginx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
server {
listen 443;
server_name demo.com;
# 开启 ssl 支持
ssl on;
# 指定证书文件
ssl_certificate /usr/local/nginx/conf/server.crt;
# 指定私钥文件
ssl_certificate_key /usr/local/nginx/conf/server.key;
}
# 80 端口重定向
server {
listen 80;
server_name demo.com;
rewrite ^(.*) https://$server_name$request_uri? permanent;
}

瀑布流布局的开发实践

瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片,并且图片是那种参差不齐的,如果瀑布流中文字过多,会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。

传统的定位布局方式

目前主流的瀑布流布局都是采用定位的方式,对每个单元格计算定位值,如下图: