一、CORS

CORS全称Cross-Origin Resource Sharing，是HTML5规范定义的如何跨域访问资源。

Origin（本域）表示浏览器当前页面的域。当JavaScript向外域发起请求后，浏览器收到响应后，首先检查Access-Control-Allow-Origin是否包含本域，如果是，则此次跨域请求成功，如果不是，则请求失败，JavaScript将无法获取到响应的任何数据。

上面这种跨域请求，称之为“简单请求”。若请求满足所有下述条件，则该请求可视为“简单请求”：

1.使用下列方法之一

• GET
• HEAD
• POST

2.Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为

• Accept
• Accept-Language
• Content-Language
• Content-Type
• DPR
• Downlink
• Save-Data
• Viewport-Width
• Width

3.Content-Type的值仅限于下列三者之一

• text/plain
• multipart/form-data
• application/x-www-form-urlencoded

4.请求中的任意XMLHttpRequestUpload对象均没有注册任何事件监听器

• XMLHttpRequestUpload对象可以使用 XMLHttpRequest.upload属性访问

5.请求中没有使用 ReadableStream 对象

• Table要比其它html标记占更多的字节

• Tablle会阻挡浏览器渲染引擎的渲染顺序
  • table是中的内容是自适应的，它要计算嵌套最深的节点以满足自适应，所以会出现空白后才显示内容。

• 在某些浏览器中Table里的文字的拷贝会出现问题。

• Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)

• table对对于页面布局来说，从语义上看是不正确的。

css3的@media检测到屏幕尺寸，将表格元素设置为block块状，并且隐藏表头，将td设置下边框看起来跟一行行的一样。最后我们使用css3的:before { content: “姓名”; }生成每行对应的标签定义，这样就能知道每行数据的意义。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*Label the data*/
    td:nth-of-type(1):before {
        content: "姓名";
    }
    td:nth-of-type(2):before {
        content: "性别";
    }
    td:nth-of-type(3):before {
        content: "出生年月";
    }
}

1
2
3
4
5
6
7
8

// 通过document.createEvent 方法创建
var event = document.createEvent(type)

// 通过initEvent或其他的初始化方法
event.initEvent(type, bubbles, cancelable);

// 向一个指定目标派发一个事件
target.dispatchEvent(event)

• event 就是被创建的 Event 对象
• type 是一个字符串，表示要创建的事件类型
• 事件类型可能包括UIEvents、MouseEvents、MutationEvents、HTMLEvents
• 请查看 Notes 章节获取详细信息

一. 无中生有

起初，什么都没有。

造物主说：没有东西本身也是一种东西啊，于是就有了null：

现在我们要造点儿东西出来。但是没有原料怎么办？

有一个声音说：不是有null嘛？

另一个声音说：可是null代表无啊。

造物主说：那就无中生有吧！

于是：

JavaScript中的1号对象产生了，不妨把它叫做No. 1。

这个No. 1对象可不得了，No. 1是真正的万物始祖。它拥有的性质，是所有的对象都有的。

proto是什么呢？是“生”的意思，或者叫做继承。

二. 制造对象的机器

既然已经有了一个对象，剩下就好办了，因为一生二，二生三，三生万物嘛。

不过造物主很懒，他不想一个一个地亲手制造对象。于是他做了一台能够制造对象的机器：

1
2

Object.prototype.__proto__ === null;
// true

他给这台机器起了一个名字：Object。

这台机器并不能凭空造出对象，它需要一个模板对象，按照这个模板对象来制造对象。很自然的，它把目前仅有的No. 1对象作为模板。图中的prototype就代表机器的模板对象。

机器如何启动呢？通过new命令。你对着机器喊一声：“new！”，对象就造出来了。

机器的产生，实现了对象的批量化自动化生产，解放了造物主的双手。于是造物主忙别的去了。

如果机器只是按照模板的样子，机械地复制出一模一样的对象，那就太笨了。

人类的后代在继承了父辈的性状的基础上，可以产生父辈没有的性状。同样地，机器在制造对象时，除了继承模板对象的属性外，还可以添加新的属性。这使得JavaScript世界越来越多样化。

比如说，有一天Object机器制造一个对象，它有一个特殊的属性，叫做flag，属性值是10。用图形表示是这样的：

写成代码就是：

1

var obj = new Object({ flag: 10 });

轰轰烈烈的造物运动开始了……

权重等级

根据选择器种类的不同可以分为四类，也决定了四种不同等级的权重值。

0、!important（10,000）

1、行内样式style（1,000）

2、ID选择器（100）

3、类、属性选择器、伪类选择器（10）

伪类选择器

• :hover
• :focus

4、元素、伪元素（1）

伪元素选择器:

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selecton

一、skew

skew所用的坐标系，纵向是X轴，横向是Y轴，与常见的坐标系是反着的。比如：

• skewX(30deg) 表示X轴朝逆时针方向旋转30deg，坐标系上的物体也会随着X轴旋转。
• skewY(10deg) 表示Y轴朝顺时针方向旋转10deg，坐标系上的物体也会随着Y轴旋转。

一、浏览器渲染原理

关于浏览器工作原理之前有一篇非常出名的文章《浏览器的工作原理：新式网络浏览器幕后揭秘》。文章详细阐述了浏览器工作原理，下面用两张图来分别描述Firefox和Chrome浏览器对Web页面的渲染过程。

二、Chrome渲染过程

有关于Chrome浏览器渲染的详细内容，可以参考《图解浏览器渲染过程 - 基于Webkit/Blink内核Chrome浏览器》一文。

三、Firefox渲染过程

特别声明：接下来的内容都是针对于Chrome浏览器进行讨论。

一、矩阵

先看一段 css 代码：

1
2
3
4
5

/* 2D */
transform: matrix(1, 0, 0, 1, 0, 0);

/* 3D */
transform: matrix(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

上面两行 css 代码其实什么变换都不会做，因为那是变换的默认状态，即没有变换。

大多数人在使用 transform 变换时很少直接使用 matrix 矩阵，更多的时候，我们会使用类似如下语法：

1

transform: translateX(100px) rotateZ(30deg);

但其实，这只是一个语法糖，其底层依然使用的是 matrix。如果想要理解矩阵为何可以应用到 2D/3D 变换，需要从几何的角度去理解矩阵。不过，这需要我们先了解一些必要的基本概念，这些概念至关重要，首先就是向量。

一、 坐标系统

我们很熟悉的网页是平面的，一个DOM元素会有一个初始坐标系（initial coordinate system）：

每一个DOM元素都有一个这样的初始坐标系。其中，原点位于元素的左上角，z轴指向观察者。初始坐标系的z轴并不算是三维空间，而是像z-index那样作为参照，决定网页元素的绘制顺序，绘制顺序靠后的元素将覆盖绘制顺序靠前的。

在使用transform的时候，情况则有所不同。transform所参照的并不是初始坐标系，而是一个新的坐标系：

transform所用的这个坐标系，相比初始坐标系，x、y、z轴的指向都不变，只是原点位置移动到了元素的正中心。如果想要改变这个坐标系的原点位置，使用transform-origin。transform-origin的默认值是50% 50%，因此，默认情况下，transform坐标系的原点位于元素中心。