发表于

阮一峰：相似图片搜索的原理


一、颜色分布法

每张图片都可以生成颜色分布的直方图(color histogram)。如果两张图片的直方图很接近，就可以认为它们很相似。

img

任何一种颜色都是由红绿蓝三原色（RGB）构成的，所以上图共有4张直方图（三原色直方图 + 最后合成的直方图）。


阅读全文 »

发表于

一、颜色空间模型

颜色通常用三个独立的属性来描述，三个独立变量综合作用，自然就构成一个空间坐标，这就是颜色空间。但被描述的颜色对象本身是客观的，不同颜色空间只是从不同的角度去衡量同一个对象。

颜色空间按照基本机构可以分为两大类：基色颜色空间和色、亮分离颜色空间。前者典型的是RGB，后者包括YUV和HSV等等。


二、RGB颜色空间

计算机和彩色电视机显示色彩的原理一样，都是采用R、G、B相加混色的原理，通过发射出三种不同强度的电子束，使屏幕内侧覆盖的红、绿、蓝磷光材料发光而产生色彩。这种色彩的表示方法称为RGB色彩空间表示。

img


阅读全文 »

发表于

一、鼠标事件

  • mousedown：鼠标按钮被按下时触发。不能通过键盘触发。
  • mouseup：鼠标按钮被释放弹起时触发。不能通过键盘触发。
  • click：单击鼠标左键或者按下回车键时触发。
  • dblclick：双击鼠标左键时触发。
阅读全文 »

发表于

原文


一、事件流

事件流描述的是从页面中接收事件的顺序。

1、事件流感性认识

问题：单击页面元素，什么样的元素能感应到这样一个事件？

答案：单击目标元素的同时，也单击了目标元素的容器元素，甚至整个页面。


阅读全文 »

发表于

原文


一、问题的由来

学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。

1
2
3
4
5
6
7
8
9
10
11
var obj = {
  foo: function () {}
};

var foo = obj.foo;

// 写法一
obj.foo()

// 写法二
foo()

上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。请看下面的例子。

1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

这种差异的原因，就在于函数体内部使用了this关键字。很多教科书会告诉你，this指的是函数运行时所在的环境。对于obj.foo()来说，foo运行在obj环境，所以this指向obj；对于foo()来说，foo运行在全局环境，所以this指向全局环境。所以，两者的运行结果不一样。

这种解释没错，但是教科书往往不告诉你，为什么会这样？也就是说，函数的运行环境到底是怎么决定的？举例来说，为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？

本文就来解释 JavaScript 这样处理的原理。理解了这一点，你就会彻底理解this的作用。


二、内存的数据结构

JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系。

1
var obj = { foo:  5 };

上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。

img

也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。

img

1
2
3
4
5
6
7
8
{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

注意，foo属性的值保存在属性描述对象的value属性里面。


阅读全文 »

发表于

原文


  • 利用合成层，加速渲染
  • 防止层爆，优化性能


一、整体流程

一个 Web 页面的展示，简单来说可以认为经历了以下几个步骤。

img

  • JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如做一个动画或者往页面里添加一些 DOM 元素等。
  • Style：计算样式，这个过程是根据 CSS 选择器，对每个 DOM 元素匹配对应的 CSS 样式。这一步结束之后，就确定了每个 DOM 元素上该应用什么 CSS 样式规则。(Render Tree)
  • Layout：布局，上一步确定了每个 DOM 元素的样式规则，这一步就是具体计算每个 DOM 元素最终在屏幕上显示的大小和位置。web 页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。比如，<body> 元素的宽度的变化会影响其子元素的宽度，其子元素宽度的变化也会继续对其孙子元素产生影响。因此对于浏览器来说，布局过程是经常发生的。
  • Paint：绘制，本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等，也就是一个 DOM 元素所有的可视效果。一般来说，这个绘制过程是在多个层上完成的。
  • Composite：渲染层合并，由上一步可知，对页面中 DOM 元素的绘制是在多个层上进行的。在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。对于有位置重叠的元素的页面，这个过程尤其重要，因为一旦图层的合并顺序出错，将会导致元素显示异常。

当然，本文我们只来关注 Composite 部分。


阅读全文 »

发表于

一、zoom

1、属性值

  • auto根据viewport来既定当前标签的缩放。

  • <number>非负数。1表示没有缩放，大于1表示放大的倍数，小于1亦然。

  • <percentage>非负百分比。以100%为基础进行缩放。


2、兼容性

除了Firefox和Opera Mini


3、规范

草案中


阅读全文 »

发表于

一、clip-path

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.clip-me {
    /* 剪裁路径来自内联SVG <clipPath>元素 */
    clip-path: url(#c1); 
    
    
    /* 路径来自外部SVG */
    clip-path: url(path.svg#c1);
    
    
    /*带圆角的矩形*/
    /*前四个参数代表上、右、下、左到边框的距离*/
    /*后四个参数代表上、右、下、左的圆角半径大小，跟border-radius类似*/
    clip-path: inset(10% 20px 30px 5% round 14px 50% 10% 50%);
    clip-path: inset(10% 20px 30px 5% round 14px 50% 10% 50%/10px 50% 2% 50%);

    
    /* 多边形 */
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    
    
    /* 圆 */
    clip-path: circle(30px at 35px 35px);
    
    
    /* 椭圆 */
    clip-path: ellipse(65px 30px at 125px 40px);
}

发表于

相对于父元素宽度的：

  • [max/min-]width

  • left

  • text-indent

  • padding

  • margin

注：已验证


相对于父元素高度的：

  • [max/min-]height

  • top

  • bottom

注：已验证


相对于主轴长度的：

  • flex-basis

注：已验证


阅读全文 »

发表于

一、定位类型

  • 相对定位元素（relatively positioned element）是计算后位置属性为 relative的元素。
  • 绝对定位元素（absolutely positioned element）是计算后位置属性为 absolute 或 fixed 的元素。
  • 粘性定位元素（stickily positioned element）是计算后位置属性为 sticky 的元素。


大多数情况下，height和width被设定为auto的绝对定位元素，按其内容大小调整尺寸。但是，被绝对定位的元素可以通过：

  • 指定top和bottom，保留height未指定（即auto），来填充可用的垂直空间。

  • 指定left和 right，并将width指定为auto，来填充可用的水平空间。

  • 如果top和bottom都被指定（技术上，而不是auto），top 胜出。

  • 如果指定了left 和right两侧，则在direction为ltr（英语，水平日语等）时left赢，并且在direction为rtl时right赢（阿拉伯文，希伯来文等）。


阅读全文 »