Web 缓存有很多种,比如数据库缓存、代理服务器缓存、CDN 缓存,以及浏览器缓存。
浏览器缓存指的是将缓存文件保存在客户端,一般是通过 HTTP 进行缓存。
August 15 , 2017
Performance
阅读全文
Web Worker 的引入是因为 JavaScript 的单线程问题,使大计算量的问题会造成页面阻塞。为此,HTML 5 制订了 Web Worker 标准,通过创建工作线程来进行计算。
Web Workers 一般说来分为三类:
- Dedicated workers: 专用 workers,Dedicated workers 只能被创建它的 JavaScript 所调用。它们是专门为某个特定的页面服务的,不能在页面中共享。
- Shared workers: 共享 workers,Shared worker 可以多个浏览器上下文中调用,所有这些浏览器上下文必须同源(相同的协议,主机和端口号)。
- Service workers
August 14 , 2017
DOM
阅读全文
REST is a set of architectural constraints that aid you when developing an API over HTTP. – Nicolas Bevacqua «JavaScript Application Design-A build first approach»
REST: Resource Representational State Transfer。采用正译,叫资源表征状态转移。挨个理解:
- Resource : 资源,也就是data(数据)。需要说明的是,资源的表征方式不是一个具体的物理文件,而是特定的格式类型。在HTTP中,由
content-type
描述。每一份资源都有特定的URL来标识。
- Representational: 指的就是资源的表征形式。比如,json、xml、jpeg等等
- State Transfer: 状态转移,即通过HTTP谓词来实现资源的状态变化。参考阮一峰的文章,他说。HTTP是一个无状态协议。这意味着,所有的状态都保存在服务器端。因此,如果客户端想要操作服务器,必须通过某种手段,让服务器端发生”状态转化”。而这种手段,就是HTTP谓词。这种转化是建立在表现层之上的,所以就是”表现层状态转化”。
有人总结了下面这句话来描述REST:
URL定位资源,使用HTTP谓词来描述操作。
July 29 , 2017
Node
阅读全文
BFC(Block Formatting Context),中文译成 “块级格式上下文”。标准解释:
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents. – w3c
首先,我们要理解什么是 block boxes
(块盒子)。block boxes 和块级元素是不一致的。
标准中,是这样阐述的。每个 block-level element (块级元素) 产生 block-level box (块级盒)。block-level boxes 是参与到 BFC 的盒子。除了 table boxes,block-level box 也是 block container box (块容器盒),block container box 要么包含 block-level boxes,要么创建 IFC 从而包含 inline-level box。并非所有的 block container boxes 是 block-level boxes。block-level boxes,同时也是 block containers 的就是 block boxes。好绕!标准就是这么绕人的。
所以,我们理解: 浮动的、绝对定位的元素和块容器(比如 inline-blocks, table-cells 这些)都不是 block boxes,block boxes 是那些 overflow
不是 visible
的,两者共同为它们的内容创建了一个 BFC。
Formatting Context 是 W3C CSS2.1 规范中的一个概念它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 BFC 和 Inline formatting context (简称 IFC)。CSS3 还增加了 GFC 和 FFC。
July 23 , 2017
CSS
阅读全文
布局中的两栏和三栏布局还是面试当中常考的一个点。其一是如何有多种方案,其二如果还要考虑优先加载内容区域呢。
所以,这里总结的是这么四种情况,其中优先加载内容区域也是两栏、三栏布局中的一员。
July 16 , 2017
CSS
阅读全文
文章翻译自CSS-TRICKS的A Complete Guide to Flexbox。本译文会在不破坏原文的基础上进行删除和修正。
弹性盒布局(Flexbox Layout)旨在为容器(container)内的项目(item)的布局、对齐和空间分配提供一个更为便捷的方式,即便它们的尺寸是未知的或可变(弹性)的。
它的主要思想是,让容器可以改变子元素(项目)的宽度和长度,从而充分地填充空间。一个弹性容器通过扩展子元素可以有效地填满自由空间,或者收缩它们以防止溢出。
July 15 , 2017
CSS
阅读全文
Angular系列教程:
为了学习Angular,实现了主页教程的Heroes
例子。代码放在仓库Angular4-heroes下。但是,希望写单独为此写一篇的目的在于,这是一个非常好的例子,通过这个例子,我们可以详细地了解Angular有关表单、服务、注入、HTTP、路由等概念,所以非常值得初学者学习。
July 12 , 2017
Angular
阅读全文
Angular系列教程:
上一节中主要是介绍了Angular的启动和命令。这一节仍然是介绍基础概念,而且,而且,而且(重要的事情说三遍),这一节也主要参考官网的这篇文章,所以呢,大致会一样。
July 6 , 2017
Angular
阅读全文