# 2019年10月刊
# 2019/10/28 - 2019/11/03 ⌚️
typescript 中 type 与 interface 的区别
点击
相同点是：用于定义数据的类型别名
不同的是：
- 实现继承的表现形式不同
interface Name { name: string; } interface User extends Name { age: number; } // type 利用交叉类型实现的继承 type Name = { name: string; } type User = Name & { age: number };1
2
3
4
5
6
7
8
9
10
11
12
13- 因为 type 作为类型的别名，因此可以轻易的实现声明基本类型别名，联合类型，元组等类型，而 interface 则不行。type 还能通过 typeof 获取类型，并声明。
let div = document.createElement('div'); type B = typeof div;1
2- interface 能够声明合并，而 type 不行（会报重复声明错误）。
interface User { name: string, age: number, } interface User { sex: string, }1
2
3
4
5
6
7Proxy 的缺点
Proxy的劣势就是兼容性问题,而且无法用polyfill实现
cross-env 的作用是什么？
点击
定义：cross-env 是运行跨平台设置和使用环境变量的脚本。
问题：当使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。
作用：(cross-env)能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。
{ "scripts": { "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js" } }1
2
3
4
5vue3 与 vue2 的区别是什么？
点击
优势主要体现在：更快、更小、更易维护、更易于原生、让开发者更轻松；
更快 1. virtual DOM 完全重写，mounting & patching 提速 100%； 2. 更多编译时 （compile-time）提醒以减少 runtime 开销； 3. 基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能； 4. 放弃 Object.defineProperty ，使用更快的原生 Proxy； 5. 组件实例初始化速度提高 100%; 6. 提速一倍/内存使用降低一半；1
2
3
4
5
6
7更小：Tree-shaking 更友好；新的 core runtime：~ 10kb gzipped； 更好的支持typescript1
2
# 2019/10/21 - 2019/10/27 ⌚️
如何监听断网，重连的事件？
点击
window.addEventListener('offline', function() { onLine = false; }); window.addEventListener('online', function() { if (onLine == false) { onLine = true; reLine(); } });1
2
3
4
5
6
7
8
9git 缓存 git stash 的用法？
点击
（1）git stash save "save message" : 执行存储时，添加备注，方便查找，只有 git stash 也要可以的，但查找时不方便识别。
（2）git stash list ：查看 stash 了哪些存储
（3）git stash show ：显示做了哪些改动，默认 show 第一个存储,如果要显示其他存贮，后面加 stash@{$num}，比如第二个 git stash show stash@{1}
（4）git stash show -p : 显示第一个存储的改动，如果想显示其他存存储，命令：git stash show stash@{$num} -p ，比如第二个：git stash show stash@{1} -p
（5）git stash apply :应用某个存储,但不会把存储从存储列表中删除，默认使用第一个存储,即 stash@{0}，如果要使用其他个，git stash apply stash@{$num} ， 比如第二个：git stash apply stash@{1}
（6）git stash pop ：命令恢复之前缓存的工作目录，将缓存堆栈中的对应 stash 删除，并将对应修改应用到当前的工作目录下,默认为第一个 stash,即 stash@{0}，如果要应用并删除其他 stash，命令：git stash pop stash@{$num} ，比如应用并删除第二个：git stash pop stash@{1}
（7）git stash drop stash@{$num} ：丢弃stash@{$num}存储，从列表中删除这个存储
（8）git stash clear ：删除所有缓存的 stash
如何将 IP 转化为二进制？如何将二进制转化为 ip?
点击
IP 地址是一个 32 位的二进制数，通常被分割为 4 个“8 位二进制数”（也就是 4 个字节）。IP 地址通常用“点分十进制”表示成（a.b.c.d）的形式，其中，a,b,c,d 都是 0~255 之间的十进制整数。例：点分十进 IP 地址（100.4.5.6），实际上是 32 位二进制数（01100100.00000100.00000101.00000110）。
为什么要转化 IP 地址：
点分十进制表示法只是为了让人好记忆，并不能用于电脑运算；
数据库中跟 IP 地址有的字段一般都会存成整数，这样便于查询，也可以提高了查询速度；
function ipToNumber(ip) { var num = 0; if (ip == '') { return num; } var aNum = ip.split('.'); if (aNum.length != 4) { return num; } num += parseInt(aNum[0]) << 24; num += parseInt(aNum[1]) << 16; num += parseInt(aNum[2]) << 8; num += parseInt(aNum[3]) << 0; num = num >>> 0; //这个很关键，不然可能会出现负数的情况 return num; } function numberToIp(number) { var ip = ''; if (number <= 0) { return ip; } var ip3 = (number << 0) >>> 24; var ip2 = (number << 8) >>> 24; var ip1 = (number << 16) >>> 24; var ip0 = (number << 24) >>> 24; ip += ip3 + '.' + ip2 + '.' + ip1 + '.' + ip0; return ip; }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
怎么将 cookie 中 httponly 属性设置为 true
response.addHeader("Set-Cookie", "uid=112; Path=/; HttpOnly");移动端的 ios 安卓兼容问题
# 2019/10/14 - 2019/10/20 ⌚️
如何清除浮动
点击
1、对父级设置适合 CSS 高度
2、clear:both 清除浮动
浮动的作用及副作用
点击
使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来.
浮动的目的：为了达到自己的布局目的，让指定元素定位在指定位置，并且可以设置浮动后的行级元素的宽高，我们就需要用到浮动
浮动的副作用：1、父级元素背景不能显示；2、父级元素边框不能撑开；3、margin padding 设置值不能正确显示
如何进行媒体查询屏幕大小？
@media screen and (max-width: 480px) { .ads { display: none; } }1
2
3
4
5如何滚动到顶部？
虚拟滚动原理是什么？有何限制
如何实现无限滚动？
Cache-Control：max-age=0代表什么意思？max-age=0 表示不管 response 怎么设置，在重新获取资源之前，先检验 ETag/Last-Modified
# 2019/10/07 - 2019/10/13 ⌚️
产生重绘的因素
点击
改变 visibility、outline、背景色等样式属性，并没有改变元素大小、位置等。浏览器会根据元素的新属性重新绘制。
产生重排的因素
点击
内容改变
文本改变或图片尺寸改变
DOM 元素的几何属性的变化
例如改变 DOM 元素的宽高值时，原渲染树中的相关节点会失效，浏览器会根据变化后的 DOM 重新排建渲染树中的相关节点。如果父节点的几何属性变化时，还会使其子节点及后续兄弟节点重新计算位置等，造成一系列的重排。
DOM 树的结构变化
添加 DOM 节点、修改 DOM 节点位置及删除某个节点都是对 DOM 树的更改，会造成页面的重排。浏览器布局是从上到下的过程，修改当前元素不会对其前边已经遍历过的元素造成影响，但是如果在所有的节点前添加一个新的元素，则后续的所有元素都要进行重排。
获取某些属性
除了渲染树的直接变化，当获取一些属性值时，浏览器为取得正确的值也会发生重排，这些属性包括：
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、 clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()。浏览器窗口尺寸改变
窗口尺寸的改变会影响整个网页内元素的尺寸的改变，即 DOM 元素的集合属性变化，因此会造成重排。
滚动条的出现（会触发整个页面的重排）
dom 元素过多会怎样？
点击
不利于 seo，渲染耗时。
dom 树太大占内存
DOM 元素过多会使 DOM 元素查询效率，样式表匹配效率降低，是页面性能最主要的瓶颈之一。
正常页面的 DOM 元素数量一般不应该超过 1000。
浏览器卡顿的原因
点击
频繁的 dom 操作
频繁的触发重排和重绘
内存泄漏
为什么 transform 做动画更加平滑？
点击
首先一个问题是：那么为什么会造成动画卡顿呢？
原因就是主线程和合成线程的调度不合理。
一般情况下，主线程负责：运行 JavaScript；计算 HTML 元素的 CSS 样式；页面的布局；将元素绘制到一个或多个位图中；将这些位图交给合成线程。
相应地，合成线程负责：通过 GPU 将位图绘制到屏幕上；通知主线程更新页面中可见或即将变成可见的部分的位图；计算出页面中哪部分是可见的；计算出当你在滚动页面时哪部分是即将变成可见的；当你滚动页面时将相应位置的元素移动到可视区域。
下面来详细说一下调度不合理的原因。
在使用 height，width，margin，padding 作为 transition 的值时，会造成浏览器主线程的工作量较重，例如从 margin-left：-20px 渲染到 margin-left:0，主线程需要计算样式 margin-left:-19px,margin-left:-18px，一直到 margin-left:0，而且每一次主线程计算样式后，合成进程都需要绘制到 GPU 然后再渲染到屏幕上，前后总共进行 20 次主线程渲染，20 次合成线程渲染，20+20 次，总计 40 次计算。
而如果使用 transform 的话，例如 tranform:translate(-20px,0)到 transform:translate(0,0)，主线程只需要进行一次 tranform:translate(-20px,0)到 transform:translate(0,0)，然后合成线程去一次将-20px 转换到 0px，这样的话，总计 1+20 计算。
使用 transform 后，页面的回流直接没有了，这就是使用 transform 性能更好的原因, 虽然回流是没有了，但是后面进行图层合并的耗时却增加了 60%，甚至快超过了回流消耗的时间
什么是 saas ?
点击
aaS 是 Software-as-a-Service（软件即服务）的简称，它是一种通过 Internet 提供软件的模式，厂商将应用软件统一部署在自己的服务器上，客户可以根据自己实际需求，通过互联网向厂商定购所需的应用软件服务，按定购的服务多少和时间长短向厂商支付费用，并通过互联网获得厂商提供的服务。
SaaS 应用软件的价格通常为“全包”费用，囊括了通常的应用软件许可证费、软件维护费以及技术支持费，将其统一为每个用户的月度租用费。 对于广大中小型企业来说，SaaS 是采用先进技术实施信息化的最好途径。但 SaaS 绝不仅仅适用于中小型企业，所有规模的企业都可以从 SaaS 中获利。
如何获取从 5 - 100 之间的随机数？
点击
function randomNumber(min, max) { if (max == null) { max = min; min = 0; } return min + Math.floor(Math.random() * (max - min + 1)); } randomNumber(5, 100);1
2
3
4
5
6
7
8
# 2019/09/30 - 2019/10/06 ⌚️
用 js 原生获取页面上所有被勾选的 checkbox ?
document.querySelectorAll('input[type="checkbox"]:checked')post 请求与 get 请求的区别
点击
get 请求有长度限制，一般大小不超过 2K，post 请求没有限制
get 把请求参数放在 url 上，即 http 协议头上，post 放在 Request body 请求体中。故 get 比 post 更不安全，不能用来传递敏感信息
POST 类型请求要发送两个 TCP 数据包。先发送文件头。再发送数据。
GET 类型请求只需要发送一个 TCP 数据包。取决于你的 cookie 数量。
cdn 原理
点击
CDN 做了两件事，一是让用户访问最近的节点，二是从缓存或者源站获取资源
CDN 加速的原理很大部分是跟 DNS 挂钩在一起的，CDN 供应商几乎一定需要一个智能 DNS 服务器。CDN 可以拿到所有的明文数据，所以对数据安全性、保密性要求比较高的企业会选择自建 CDN 或者设置 NS 记录，指向自建的智能 DNS 服务器。
缺点：CDN 要清除缓存很难，因为有很多服务器上的缓存要清除。无论是用户对边缘服务器的请求，还是 CDN 服务器的回源都可以使用 https。
vue.$forceUpdate 的作用及应用场景
因为数据层次太多，render 函数没有自动更新，需手动强制刷新的时候需要用到这个，调用了 beforeUpdated 和 updated
webpack 图片压缩如何实现？
使用
image-webpack-loader实现压缩，可以输入图片质量，压缩速度等http 请求过程
Vue 模版编译原理
点击
简单说，Vue 的编译过程就是将 template 转化为 render 函数的过程。会经历以下阶段：
生成 AST 树,优化,codegen
首先解析模版，生成 AST 语法树(一种用 JavaScript 对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。
Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的 DOM 也不会变化。那么优化过程就是深度遍历 AST 树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。
编译的最后一步是将优化后的 AST 树转换为可执行的代码。