前端笔试知识点补充

1. IP地址、子网掩码、广播地址、网络地址

IP地址：10.123.6.11
子网掩码：255.255.252.0
子网掩码二进制：
1111 1111 . 1111 1111 . 1111 1100 . 0000 0000
子网掩码有22个连续1，所以前22位作为网络地址，后10位作为主机地址，

IP地址 & 子网掩码 = 网络地址 （& 都为1才取1）

     10  . 123 .  0000  0110  .11
     255 . 255 .  1111  1100  .0
 &------------------------------------------------  
 =   10  . 123 .  0000  0100  .0  
1
2
3
4

网络地址= 10.123.4.0

而广播地址是网络地址的主机位全1，也就是10.123.4.0的后十位全变1就是广播地址

10.123.0000 0100.0000 0000 变成：
10.123.0000 0111.1111 1111

广播地址 = 10.123.7.255

2. 垃圾回收 内存泄漏

常见的四种内存泄漏

1. 全局变量
   在非严格模式下当引用未声明的变量时，会在全局对象中创建一个新变量。在浏览器中，全局对象将是window，这意味着

   function foo（arg）{ 
       bar =“some text”; // bar将泄漏到全局.
   }
   1
   2
   3

   原因 :全局变量是根据定义无法被垃圾回收机制收集.需要特别注意用于临时存储和处理大量信息的全局变量。如果必须使用全局变量来存储数据，请确保将其指定为null或在完成后重新分配它。
   解决办法: 严格模式

2. 被遗忘的定时器和回调函数

   var someResource = getData();
   setInterval(function() {
       var node = document.getElementById('Node');
       if(node) {
           node.innerHTML = JSON.stringify(someResource));
           // 定时器也没有清除
       }
       // node、someResource 存储了大量数据 无法回收
   }, 1000);
   1
   2
   3
   4
   5
   6
   7
   8
   9

   原因:与节点或数据关联的计时器不再需要，node 对象可以删除，整个回调函数也不需要了。可是，计时器回调函数仍然没被回收（计时器停止才会被回收）。同时，someResource 如果存储了大量的数据，也是无法被回收的。
   解决方法： 在定时器完成工作的时候，手动清除定时器

3. DOM引用

   var refA = document.getElementById('refA');
   document.body.removeChild(refA); // dom删除了
   console.log(refA, "refA");  // 但是还存在引用
   // 能console出整个div 没有被回收
   1
   2
   3
   4

   原因: 保留了DOM节点的引用,导致GC没有回收
   解决办法：refA = null;
   注意: 此外还要考虑 DOM 树内部或子节点的引用问题。假如你的 JavaScript 代码中保存了表格某一个 的引用。将来决定删除整个表格的时候，直觉认为 GC 会回收除了已保存的 以外的其它节点。实际情况并非如此：此 是表格的子节点，子元素与父元素是引用关系。由于代码保留了 的引用，导致整个表格仍待在内存中。保存 DOM 元素引用的时候，要小心谨慎。

4. 闭包
   注意: 闭包本身没有错,不会引起内存泄漏.而是使用错误导致.

   var theThing = null;
   var replaceThing = function () {
     var originalThing = theThing;
     var unused = function () {
       if (originalThing)
         console.log("hi");
     };
     theThing = {
       longStr: new Array(1000000).join('*'),
       someMethod: function () {
         console.log(someMessage);
       }
     };
   };
   setInterval(replaceThing, 1000);
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

   这是一段糟糕的代码,每次调用 replaceThing ，theThing 得到一个包含一个大数组和一个新闭包（someMethod）的新对象。同时，变量 unused 是一个引用 originalThing 的闭包（先前的 replaceThing 又调用了theThing）。思绪混乱了吗？最重要的事情是，闭包的作用域一旦创建，它们有同样的父级作用域，作用域是共享的。someMethod 可以通过 theThing 使用，someMethod 与 unused 分享闭包作用域，尽管 unused 从未使用，它引用的 originalThing 迫使它保留在内存中（防止被回收）。当这段代码反复运行，就会看到内存占用不断上升，垃圾回收器（GC）并无法降低内存占用。本质上，闭包的链表已经创建，每一个闭包作用域携带一个指向大数组的间接的引用，造成严重的内存泄漏。
   解决: 去除unuserd函数或者在replaceThing函数最后一行加上 originlThing = null.

   作者：solvep
   链接：https://juejin.im/post/6844903917986267143
   来源：掘金

3. 模板字符串打印输出

function getPersoninfo(one, two, three){
  console.log(one);
  console.log(two);
  console.log(three);
}
const person = 'Lydia';
const age = 21;
getPersoninfo `${person} is ${age} years old`
1
2
3
4
5
6
7
8

输出：["", " is ", " years old"] Lydia 21
解释：以变量的位置作为界限，分割除了变量以外的其他字符串，并放入一个数组中，这个数组作为第一个参数，然后变量部分的字符串以此作为单个变量。

4. Promise.all和Promise.race传入空数组

Promise.all([]).then(res => {
  console.log('all');
})
Promise.race([]).then(res => {
  console.log('race');
})
1
2
3
4
5
6

输出：all
all传入空数组，立即决议成功
race传入空数组，永远都不会决议

5. max-height，min-height，height一起使用

div{
	height: 100px; 
	min-height: 1000px; 
	max-height: 300px; 
	width: 100px;
}
1
2
3
4
5
6

答案：1000px 最终高度
解释：当发生冲突时优先级 min-height > max-height > height

6. 解构赋值同名变量

let obj = {p:['Hello',{y:'World'}]};
let {p, p:[x, {y}]} = obj;
1
2

输出：p=[‘Hello’,{y:‘World’}], x=“Hello”,y=“World”
解释：输出的p是第二个表达式中的第一个p，第二个p指向第一个表达式中的p，把第一个表达式中的p给冒号：后面的变量； 相当于[x, {y}]=[‘Hello’,{y:‘World’}]，自然拿到了x和y。

拆开看：

let obj = {p:['Hello',{y:'World'}]};
let {p,q} = obj;
1
2

输出：p=[‘Hello’,{y:‘World’}] q=undefined

let obj = {p:['Hello',{y:'World'}]};
let {p:[x, {y}]} = obj;
1
2

输出：p=报错, x=“Hello”,y=“World”
解释：这里的p是去第一个表达式中拿p，而不是重新定义的变量，所以p是未定义的。

加入另一个变量，复杂一点：

let obj = {q:1,p:['Hello',{y:'World'}]};
let {p, p:[x, {y}],q} = obj;
1
2

输出：p=[‘Hello’,{y:‘World’}], q=1,x=“Hello”,y=“World”
注意：这里p虽然写在前面，看似对应q，但是事实确实去检索的p，第二个p：也是去拿的p，所以解构赋值是根据变量名去检索的

7. git add和git commit

使用 git add 命令将想要快照的内容写入缓存区，
使用 git commit命令则将缓存区内容添加到仓库中。

8. 字符串的方法

• substr(start,length)
• substring(start,end)
• slice(start, end)
  注意：没有splice(start, length) 这是数组的方法， slice是数组和字符串都有
• concat()
  合并两个字符串，数组和字符串都有

9. git flow的分支

• master: 主要分支 永远处在即将发布(production-ready)状态
• develop: 最新的开发状态
• feature: 辅助分支 开发新功能的分支, 基于 develop, 完成后 merge 回 develop
• release: 准备要发布版本的分支, 用来修复 bug. 基于 develop, 完成后 merge 回 develop 和 master
• hotfix: 修复 master 上的问题, 等不及 release 版本就必须马上上线. 基于 master, 完成后 merge回 master 和 develop

10. BFC基础

• BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

• 形成BFC的条件

  1. 浮动元素，float不为none；
  2. 定位元素，position不为static和relative（可以是absolute，fixed）
  3. display 为inline-block，table-cell，table-caption，table
  4. overflow 不为visivle（hidden，auto，scroll）

• BFC的特性

  1. BFC的垂直外边距会和兄弟节点的外边距发生重叠。
  2. BFC的区域不会与float的元素区域重叠。（BFC的元素不会围绕float的元素，而是完全分隔开）
  3. 计算BFC的高度时，浮动元素也参与计算（清除浮动，子元素浮动之后父元素高度会塌陷，父元素 设置为BFC就不会塌陷）
  4. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

• 参考：
  https://www.cnblogs.com/stitchgogo/p/8158092.html
  https://blog.csdn.net/sinat_36422236/article/details/88763187

11. BOM对象

BOM对象：

1. window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
   全局作用域（挂载全局属性方法）、
   窗口关系（window.frames）、
   窗口位置、
   窗口大小、
   导航和打开窗口（window.open）、
   间歇调用和超时调用（setTimeout，setInterval）、
   系统对话框（alert，confirm，prompt）
2. document对象，文档对象，既是DOM又是BOM
3. location对象，浏览器当前URL信息；
   hash: URL中的hash ‘#contents’
   host: 服务器名称+端口号 www.wrox.com:8080
   hostname: 服务器名称 www.wrox.com
   href： 完整的URL，等于location.toString()
   pathname: URL的目录或文件名 ‘/WileyCDA/’
   port: 端口号， 不含端口号返回空字符 ‘8080’
   protocol： 协议， ‘http:’
   search: URL中的查询字符串，以问号开头。 ‘?q=javascript’
4. navigator对象，浏览器本身信息；检测插件，注册处理程序等
5. screen对象，客户端屏幕信息；
6. history对象，浏览器访问历史信息；
   history.go(), history.back(), history.forward()

12. HTML5新元素

新元素

• canvas 标签定义图形，比如bai图表和其他图像。du该标签基于 JavaScript 的绘图 API
  媒体元素
• audio 定义音频内容
• video 定义视频（video 或者 movie）
• source 定义多媒体资源 video 和 audio
• embed 定义嵌入的内容，比如插件。
• track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。

表单元素

• datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
• keygen 规定用于表单的密钥对生成器字段。
• output 定义不同类型的输出，比如脚本的输出。

语义和结构元素

• article 定义页面独立的内容区域。
• aside 定义页面的侧边栏内容。
• bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。
• command 定义命令按钮，比如单选按钮、复选框或按钮
• details 用于描述文档或文档某个部分的细节
• dialog 定义对话框，比如提示框
• summary 标签包含 details 元素的标题
• figure 规定独立的流内容（图像、图表、照片、代码等等）。
• figcaption 定义figure元素的标题
• footer 定义 section 或 document 的页脚。
• header 定义了文档的头部区域
• mark 定义带有记号的文本。
• meter 定义度量衡。仅用于已知最大和最小值的度量。
• nav 定义导航链接的部分。
• progress 定义任何类型的任务的进度。
• ruby 定义 ruby 注释（中文注音或字符）。
• rt 定义字符（中文注音或字符）的解释或发音。
• rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
• section 定义文档中的节（section、区段）。
• time 定义日期或时间。
• wbr 规定在文本中的何处适合添加换行符。

13. CSS3新属性

1. RGBA和透明度
   RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。

2. background属性
   background-image：设置元素的背景图像。
   background-origin：规定背景图片的定位区域。
   background-size ：规定背景图片的尺寸。
   background-repeat：设置是否及如何重复背景图像。

3. word-wrap属性
   word-wrap 属性允许长单词或 URL 地址换行到下一行。
   word-wrap: normal|break-word;

4. text-shadow属性
   text-shadow 属性：向文本设置阴影。
   text-shadow基础语法：
   text-shadow： 5px 5px 5px #FF0000;
   分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；

5. font-face属性
   font-face属性：定义自己的字体
   在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

6. border-radius属性
   border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。
   border-radius: 1-4 length|% / 1-4 length|%;
   注：该属性允许您为元素添加圆角边框！

7. border-image属性
   border-image：将图片规定为包围 div 元素的边框
   border-image: url(border.png) 30 30 round

8. box-shadow属性
   box-shadow属性：向框添加一个或多个阴影。（盒阴影）
   box-shadow: 10px 10px 5px #888888

14. HTTP1.0、HTTP1.1和HTTP2.0

一、HTTP/0.9
HTTP 是基于 TCP/IP 协议的应用层协议。它不涉及数据包（packet）传输，主要规定了客户端和服务器之间的通信格式，默认使用80端口。
最早版本是1991年发布的0.9版。该版本极其简单，只有一个命令GET。
GET /index.html
上面命令表示，TCP 连接（connection）建立后，客户端向服务器请求（request）网页index.html。
协议规定，服务器只能回应HTML格式的字符串，不能回应别的格式。

<html>
  <body>Hello World</body>
</html>
1
2
3

服务器发送完毕，就关闭TCP连接。

二、HTTP/1.0

1. 任何格式的内容都可以发送。这使得互联网不仅可以传输文字，还能传输图像、视频、二进制文件。这为互联网的大发展奠定了基础。

2. 除了GET命令，还引入了POST命令和HEAD命令，丰富了浏览器与服务器的互动手段。

3. HTTP请求和回应的格式也变了。除了数据部分，每次通信都必须包括头信息（HTTP header），用来描述一些元数据。

4. 其他的新增功能还包括状态码（status code）、多字符集支持、多部分发送（multi-part type）、权限（authorization）、缓存（cache）、内容编码（content encoding）等。

缺点：
每个TCP连接只能发送一个请求。发送数据完毕，连接就关闭，如果还要请求其他资源，就必须再新建一个连接。

TCP连接的新建成本很高，因为需要客户端和服务器三次握手，并且开始时发送速率较慢（slow start）。所以，HTTP 1.0版本的性能比较差。

为了解决这个问题，有些浏览器在请求时，用了一个非标准的Connection字段。
Connection: keep-alive
这个字段要求服务器不要关闭TCP连接，以便其他请求复用。服务器同样回应这个字段。
Connection: keep-alive
一个可以复用的TCP连接就建立了，直到客户端或服务器主动关闭连接。但是，这不是标准字段，不同实现的行为可能不一致，因此不是根本的解决办法。

三、HTTP/1.1

1. 持久连接
   最大变化，就是引入了持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。

   客户端和服务器发现对方一段时间没有活动，就可以主动关闭连接。不过，规范的做法是，客户端在最后一个请求时，发送Connection: close，明确要求服务器关闭TCP连接。

2. 管道机制
   即在同一个TCP连接里面，客户端可以同时发送多个请求。这样就进一步改进了HTTP协议的效率。

   举例来说，客户端需要请求两个资源。以前的做法是，在同一个TCP连接里面，先发送A请求，然后等待服务器做出回应，收到后再发出B请求。管道机制则是允许浏览器同时发出A请求和B请求，但是服务器还是按照顺序，先回应A请求，完成后再回应B请求。

3. Content-Length 字段
   一个TCP连接现在可以传送多个回应，势必就要有一种机制，区分数据包是属于哪一个回应的。这就是Content-length字段的作用，声明本次回应的数据长度。

   Content-Length: 3495
   上面代码告诉浏览器，本次回应的长度是3495个字节，后面的字节就属于下一个回应了。

   在1.0版中，Content-Length字段不是必需的，因为浏览器发现服务器关闭了TCP连接，就表明收到的数据包已经全了。

4. 分块传输编码
   使用Content-Length字段的前提条件是，服务器发送回应之前，必须知道回应的数据长度。

   对于一些很耗时的动态操作来说，这意味着，服务器要等到所有操作完成，才能发送数据，显然这样的效率不高。更好的处理方法是，产生一块数据，就发送一块，采用"流模式"（stream）取代"缓存模式"（buffer）。

   因此，1.1版规定可以不使用Content-Length字段，而使用"分块传输编码"（chunked transfer encoding）。只要请求或回应的头信息有Transfer-Encoding字段，就表明回应将由数量未定的数据块组成。

   Transfer-Encoding: chunked
   每个非空的数据块之前，会有一个16进制的数值，表示这个块的长度。最后是一个大小为0的块，就表示本次回应的数据发送完了。下面是一个例子。

   HTTP/1.1 200 OK
   Content-Type: text/plain
   Transfer-Encoding: chunked
   
   25
   This is the data in the first chunk
   
   1C
   and this is the second one
   
   3
   con
   
   8
   sequence
   
   0
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17

5. 其他功能
   1.1版还新增了许多动词方法：PUT、PATCH、HEAD、 OPTIONS、DELETE。

   另外，客户端请求的头信息新增了Host字段，用来指定服务器的域名。

   Host: www.example.com
   有了Host字段，就可以将请求发往同一台服务器上的不同网站，为虚拟主机的兴起打下了基础。

缺点:
虽然1.1版允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的。服务器只有处理完一个回应，才会进行下一个回应。要是前面的回应特别慢，后面就会有许多请求排队等着。这称为"队头堵塞"（Head-of-line blocking）。

为了避免这个问题，只有两种方法：一是减少请求数，二是同时多开持久连接。这导致了很多的网页优化技巧，比如合并脚本和样式表、将图片嵌入CSS代码、域名分片（domain sharding）等等。如果HTTP协议设计得更好一些，这些额外的工作是可以避免的。

四、HTTP/2

1. 二进制协议
   HTTP/1.1 版的头信息肯定是文本（ASCII编码），数据体可以是文本，也可以是二进制。HTTP/2 则是一个彻底的二进制协议，头信息和数据体都是二进制，并且统称为"帧"（frame）：头信息帧和数据帧。
   二进制协议的一个好处是，可以定义额外的帧。HTTP/2 定义了近十种帧，为将来的高级应用打好了基础。如果使用文本实现这种功能，解析数据将会变得非常麻烦，二进制解析则方便得多。

2. 多工
   HTTP/2 复用TCP连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，而且不用按照顺序一一对应，这样就避免了"队头堵塞"。
   举例来说，在一个TCP连接里面，服务器同时收到了A请求和B请求，于是先回应A请求，结果发现处理过程非常耗时，于是就发送A请求已经处理好的部分， 接着回应B请求，完成后，再发送A请求剩下的部分。这样双向的、实时的通信，就叫做多工（Multiplexing）。

3. 数据流
   因为 HTTP/2 的数据包是不按顺序发送的，同一个连接里面连续的数据包，可能属于不同的回应。因此，必须要对数据包做标记，指出它属于哪个回应。
   HTTP/2 将每个请求或回应的所有数据包，称为一个数据流（stream）。每个数据流都有一个独一无二的编号。数据包发送的时候，都必须标记数据流ID，用来区分它属于哪个数据流。另外还规定，客户端发出的数据流，ID一律为奇数，服务器发出的，ID为偶数。
   数据流发送到一半的时候，客户端和服务器都可以发送信号（RST_STREAM帧），取消这个数据流。1.1版取消数据流的唯一方法，就是关闭TCP连接。这就是说，HTTP/2 可以取消某一次请求，同时保证TCP连接还打开着，可以被其他请求使用。
   客户端还可以指定数据流的优先级。优先级越高，服务器就会越早回应。

4. 头信息压缩
   HTTP 协议不带有状态，每次请求都必须附上所有信息。所以，请求的很多字段都是重复的，比如Cookie和User Agent，一模一样的内容，每次请求都必须附带，这会浪费很多带宽，也影响速度。
   HTTP/2 对这一点做了优化，引入了头信息压缩机制（header compression）。一方面，头信息使用gzip或compress压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，以后就不发送同样字段了，只发送索引号，这样就提高速度了。

5. 服务器推送
   HTTP/2 允许服务器未经请求，主动向客户端发送资源，这叫做服务器推送（server push）。
   常见场景是客户端请求一个网页，这个网页里面包含很多静态资源。正常情况下，客户端必须收到网页后，解析HTML源码，发现有静态资源，再发出静态资源请求。其实，服务器可以预期到客户端请求网页后，很可能会再请求静态资源，所以就主动把这些静态资源随着网页一起发给客户端了。
   转自：http://www.ruanyifeng.com/blog/2016/08/http.html

15. margin-top和padding-top百分比

都是以父元素的width为基准进行计算

16. AMD和CMD

能够提出CMD和AMD互相补充是一个很赞的想法。现在，它们除了希望放在浏览器作为loader也能够放在服务端，提供加载功能。
在我看来，AMD擅长在浏览器端、CMD擅长在服务器端。这是因为浏览器加载一个功能不像服务器那么快，有大量的网络消耗。所以一个异步loader是更接地气的。或者，干脆使用YUI3的模块机制，在上线前进行压制。把互相依赖的模块压在一个文件中。

AMD 和 CMD 的区别有哪些？ - 独望达拉然的回答 - 知乎
https://www.zhihu.com/question/20351507/answer/33762041

17. transform 、 translate、 transition

transform：变换、变形，是css3的一个属性，和其他width，height属性一样
translate 是transform的属性值，是指元素进行2D平移变换

transform：translate(0,100%)；
transform 有很多其它属性值，translate3D（3D变换）,scale（2D缩放）等其他的变换方式

transition 在一定时间之内，一组css属性变换到另一组属性的动画展示过程。

transition：需要变换的属性 | 变换需要的时间 | 控制动画速度变化 | 延期多少时间后开始执行
例如：
transition:width 2s;
transition:translate 2s;
transtion:all 2s;