十万个为什么

[TokenYangForever]

---

javascript

---

Q: Fetch API相对于传统的Ajax有哪些改进？有哪些Ajax能做到的，fetch不能做到 A: fetch基于promise，可以更好地写异步流程代码。

---

Q: ES Modules 和 commonJS区别 A:

---

Q: 解释一下双向绑定和单向数据流(mvmv框架中) A:

---

Q:JavaScript中的iterators和iterables是什么？有哪些原生的iterator？ A:遍历器（Iterator）是一种遍历接口机制，只要一个对象的[Symbol.iterator]属性对应的函数有效的，那么这个对象就是可遍历(iterables)的，可遍历的对象就可以通过for..of来遍历使用。iterator还可以和generator函数一起使用，每次遍历返回一个yield后面的值。set、map、Array这些原生数据接口都是可遍历的。

---

Q: new关键字做了那些事 A: 新建一个对象，构造函数的原型赋值给新对象(原型继承)，执行构建函数的代码，this指向这个对象。返回该对象。

---

Q: react与vue的比较 A:

• 都使用了虚拟Dom
• 都是MVVM框架，数据驱动视图，双向绑定数据，通过修改数据更新视图。
• 都提倡组件化，不过感觉Vue中一般是通用的公共部分会抽象出来作为公共组件，而在react中一个页面的内容可能会分为多个细小的组件(component)。
• react的jsx模板语法更加倾向于js语法，组件也是用函数构成。而vue中的组件则感觉像是高度封装好的函数。
• 写vue很像写小程序，它提供了很多封装好了的模板语法或自创的Api之类的，而react则更像是在写原生的JS，更加自由。

  ---

  Q:说说单线程的优缺点 A:优点：不用在意多线程编程中的状态同步问题、死锁问题； 缺点：一单出错，整个程序都会退出(健壮性欠缺)。像浏览器中JavaScript与UI共用一个线程一样，JavaScript长时间执行会导致UI的渲染和响应被中断。在Node中，长时间的CPU占用也会导致后续的异步I/O发不出调用，已完成的异步I/O的回调函数也会得不到及时执行。

  ---

  Q: js中内存回收 A: JavaScript创建变量（对象，字符串等）时分配内存，并且在不再使用它们时“自动”释放内存。 不再被引用、以及从全局对象出发无法获取到的变量，其内存就会被释放。那些无法从根对象查询到的对象都将被清除

  ---

  Q: 说一说promise A:

  • 1.promise的resolve和reject都属于微任务(microtask)，在不同的任务队列的间隙链式执行。
  • 2.promise的对象状态不受外界影响，状态一旦改变就不会再发生改变，链式调用时返回的是另一个promise对象不是链式最前面那个promise对象。promise的执行无法中途取消。
  • 3.new promise的构造函数里的代码是同步执行的
  • 4.promise中发生的未捕捉的语法错误，并不会终止程序，后面的代码会继续执行。
  • 5.resolve和reject都会返回一个状态为resolve/reject的promise对象
  • 6..then 或者 .catch 的参数期望是函数，传入非函数则会发生值穿透。参考下面代码：

    Promise.resolve(1)
    .then(2)
    .then(Promise.resolve(3))
    .then(console.log)

  • • - Q: 使用proxy来实现数据绑定？ A: *

      var sourceObj = {
      bindValue: 'some thing'
      }
      var proxyObj = new Proxy(obj, {
      set (target, key, value, receiver) {
      target[key] = value
          if(key === 'bindValue')
      document.querySelector('.someDomElement').innerHTML = value
      }
      })

  • • - Q: 说一说Lodash A: 优点：Lodash的操作一般都是对数组/对象都可用的，并且null-safe。它遵循函数式编程思想，fp/下面的所有方法都不会改变传入的参数，而是会返回一个新的对象。Auto-curried Iteratee-first Data-last，所有函数都是柯里化的，处理过程（函数）作为第一个参数传入，处理数据作为最后的参数传入。
  • • - Q: babel的工作原理？ A: Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。解析步骤接收代码并输出 AST，转换步骤接收 AST 并对其进行遍历，在此过程中对节点进行添加、更新及移除等操作。 这是 Babel 或是其他编译器中最复杂的过程，同时也是插件将要介入工作的部分。代码生成步骤把最终（经过一系列转换之后）的 AST 转换成字符串形式的代码，同时还会创建源码映射（source maps）。
  • babel使用了visitor(访问者)模式。对于某个对象或者一组对象，不同的访问者，产生的结果不同，执行操作也不同。对于待转换的源码，使用不同的访问者(比如babel的各种插件转换规则)，就能得到不同的结果代码。
  • • - Q: 如何实现浏览器内多个标签页之间的通信? A: 1.使用websocket协议；2.webworker里的共享worker(shareworker)，多个页面根据端口号来共用一个共享worker；3.监听localstorage，onstorage可以监听其他标签添加修改localstorage的动作(sessionstorage不行，因为它是会话级存储，是只属于当前窗口的存储空间)。
  • • - Q：forEach()和map()两个函数循环的区别，应当如何取舍？ A：两者都会遍历数组的元素，forEach是在遍历过程中，执行回调函数利用数组每项的index或值来做一些事情；而map的回调函数会对数组每项的值进行处理并把处理后的值返回并添加到一个新的数组里。主要的区别就是map会返回一个新的数组，如果你想要得到一个数组(filter也会返回一个过滤后的数组)，并且不改变原数组，那么使用map就比较好。而如果只是简单的想要遍历数组，就直接用forEach好了。
  • • - Q: vue中为什么要在data中定义好变量后，才能实现监听 A: 定义了data后，初始化vue实例调用initDate方法，遍历data中初始化的数据，给他们加上动态监听。数组类型的值只能监听它的指向是否变化，不能监听数组中某一项或数组长度的改变
  • • - Q: JavaScript中如何生成一个声明后结构不被改变的对象？const的本质是什么？ A: const obj = Object.freeze({a:1,b:2})
  • const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。freeze可以使对象属性不被改变
  • • - Q: jQuery的链式调用实现原理是什么？ A: 每次调用完一个方法时，返回当前的jQuery对象。举个例子：$("#p1").css("color","red").slideUp(2000).slideDown(2000)，执行完css方法后返回$("#p1")对象，于是就可以继续执行后续的方法了。
  • • - Q: JSONP实现原理？ A: 动态生成一个JavaScript标签，其src由接口url、请求参数、callback函数名拼接而成，利用js标签没有跨域限制的特性实现跨域请求。
  • • - Q: 严格模式详解 A:
      1. ES6模块自动采用严格模式
      2. 禁止使用with
      3. 在function内部：this不能指向window(最外层调用this指向undefined)，禁止调用function.'caller'、'callee'、'arguments'
      4. 无法直接用delete删除一个对象，只能删除对象的一个属性，不能删除window的属性
      5. 禁止函数命名带有重名的参数
      6. 新增保留字:implements, interface, let, package, private, protected, public, static, yield，不能用来命名变量
      7. 很多警告显式报错
  • • - Q: ES6 import和export特点 A: * 自动采用严格模式，不管有没有'use strict'；
  • import和export必须在最外层作用域使用；
  • export没有使用default的时候，import的变量名必须和export导出的接口变量名一一对应；
  • 可使用as重命名变量，可使用*指定一个对象，所有输出都在这个对象上面
  • import命令是编译阶段执行的，在代码运行之前(import会提升到代码顶部)，import是静态执行，所以不能使用表达式和变量，这些只有在运行时才能得到结果的语法结构
  • import命令可以和promise以及await\async一起使用:

    Promise.all([
    import('./module1.js'),
    import('./module2.js'),
    import('./module3.js'),
    ])
    .then(([module1, module2, module3]) => {
    ···
    });

  • • -

Q: 项目上的单页面应用如何实现？ A: require.js实现模块化，text插件可以引入html/css文件，所以只要根据页面路由引入js文件，即可实现单页面的跳转。使用history的pushState、replaceState方法监听链接地址，实现后退返回上一个页面的功能

---

Q: target和currentTarget、事件流、事件代理 A: http://www.jianshu.com/p/dc1054bda70c

---

Q: 什么是函数柯里化？以及说一下JS的API有哪些应用到了函数柯里化的实现？ A: 函数式编程的一些概念：

• 纯函数：对于相同的输入永远得到相同的输出，不依赖外部环境的状态。无可观察副作用

• 函数柯里化：将参数较多的函数转换成参数较少的函数。柯里化是一种“预加载”函数的方法，通过传递较少的参数，得到一个已经记住了这些参数的新函数，某种意义上讲，这是一种对参数的“缓存”，是一种非常高效的编写函数的方法。

• • - Q: 什么叫高阶函数？ A: 高阶函数的意思是它接收另一个函数作为参数。在 javascript 中，函数是一等公民，允许函数作为参数或者返回值传递。

    其他

• • - Q: 浏览器的重绘(repaint)和回流(reflow)？ A: * 回流必将引起重绘，而重绘不一定会引起回流。回流后进行重绘，第一次加载页面会进行重绘。

• 下面这些操作（影响到页面render tree结构布局）会引起回流： 1、添加或者删除可见的DOM元素； 2、元素位置改变； 3、元素尺寸改变——边距、填充、边框、宽度和高度 4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变； 5、页面渲染初始化； 6、浏览器窗口尺寸改变——resize事件发生时；

• 而改变元素颜色以及visibility:hidden，就只会引起重绘，不会引起回流。

• 尽量减少对dom元素的频繁操作；集中修改样式(修改元素的className来一次性修改多项样式)

• • - Q: localStorage sessionStorage cookie区别，前两者如何设置有效期 A:

• cookie可以在浏览器和服务器端来回传递数据，而localStorage和sessionStorage不会把数据发送给服务器，仅会保存在本地。cookie会在浏览器请求头或者ajax请求头中发送cookie内容。

• cookie可以设置过期日期，sessionStorage是会话级的数据，浏览器窗口关闭时清除，localStorage是永久性的数据，一旦赋值，不管多长时间这值都是存在的，除非手动清除。cookie存储空间小，localStorage和sessionStorage更大。

• cookie需要web服务器(后端)支持，比如你在本地打开一个静态html页面，就不能使用cookie了，而localStorage和sessionStorage可以使用。

• 为localStorage和sessionStorage设置过期时间，存储时把有效期和设置的初始时间同时存入storage，在读取的时候进行判断，如果已过期则清除storage

• storage限制大小与浏览器有关，一般为5m，存储达到最大值后再执行set操作会报错。

• • - Q: JavaScript中10进制与其他进制之间如何转化？ A: 使用parseInt()可以把任意进制转化成10进制：parseInt(1010, 8) // 520; 使用toString()可以把10进制的数转为其他进制: var tenNum = 520; tenNum.toString(8) //1010
• • - Q: gzip是什么，如何配置？ A: gzip nginx服务器配置gzip: 修改/conf/nginx.conf => http下添加
    gzip on; gzip_min_length 5k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 3; gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on;
• • - Q: 地理位置相关API，获取当前坐标 A: navigator.geolocation。getCurrentPosition:异步获取当前坐标，直接在JS中重写getCurrentPosition方法的返回值，也是在浏览器中模拟用户定位的一种方法(我看到有的模拟定位插件就是这么做的)

    navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude);
    });

• • - Q: hybrid中app和h5怎么实现数据传递 A: app定义接口，h5通过lizardBridge调用接口(app在webview中定义一个全局变量，调用这个变量的方法就是接口)。
• • - Q: 常见的网络攻击有哪些 A：
  • XSS跨站脚本攻击: 恶意向用户使用的页面上注入脚本代码，包括html或客户端脚本代码。
  • CSRF跨站请求伪造：伪装来自受信任用户的请求来利用受信任的网站，伪造用户请求
  • 中间人攻击：劫持https
  • DDOS分布式拒绝服务攻击：发送大量无用请求，消耗占用服务器资源。
  • 防范XSS： 对用户输入的内容进行转义和过滤
  • 防范CSRF：判断请求头里的Referer(来源)是否是本站的，
• • - Q: .gitkeep和.gitignore文件作用 A: 项目下面的空文件夹默认是不会提交到分支上去的，而在空文件夹下新建一个.gitkeep之后，就可以把该空文件夹提交上去了。.gitignore文件里面则是配置哪些文件夹(文件)不需要提交到分支上去比如：'node_modules/'。
• • -

    console.log('script start');
    setTimeout(function() {  
    console.log('setTimeout');
    }, 0);
    Promise.resolve().then(function() {
    console.log('promise1');})
    .then(function() {  
    console.log('promise2');});
    console.log('script end');

• tasks 和 microtasks: tasks可以理解为一个需要按序执行的任务队列。tasks之间，浏览器可以更新渲染，来自鼠标点击的事件回调需要安排一个 task(macrotask宏任务)，解析 HTML 和 setTimeout 同样需要。 Mircotasks(宏任务)：通常是在当前task代码执行完成后，下一个task代码开始前执行，例如promise的异步操作或者mutation observer的回调就放在microtasks里执行，避免新建一个task。在执行一个microstask时，如果产生一个新的microstask，那么新产生的任务也会放在队列尾部执行(同样是在下一个task之前)。

• setTimeout 和 promise。可以这样理解：setTimeout的回调函数一定是在下一个task(macrotask宏任务)执行的，promise的回调放在microtask(微任务)里，在第一个task执行完后执行，promise.then()返回的新的promise回调同样放到microtask中(在第一个task之后第二个task之前执行)。

• 总结：微任务是在宏任务之间执行的，microtasks包括：promise、mutation observer。task包括：setTimeout、setInterval、setImmediate、I/O、UI交互事件。

• 注：在node环境中，nextTick会在每一轮的宏任务之前普通任务之后执行，它不属于宏任务

• • - Q: 说说渐进增强(progressive enhancement)与优雅降级(graceful degradation)的区别 A:

• 渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

• 优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对低版本浏览器测试和修复、hack新功能。

• • -

[TokenYangForever]

---

Node

---

Q：什么是Event loop A: * 直译过来就是事件循环，在node.js中，事件循环可以让node能够进行无阻塞的I/O操作（尽管js是单线程的）。node遇到I/O操作(包括文件I/O、http请求等)时，把这些操作交给操作系统来处理，处理好后通过callback回调函数返回给nodejs线程，然后排列在事件循环队列里依次执行回调函数。

[TokenYangForever]

---

Css

---

Q:移动端Retina屏幕1px边框效果 A: * 伪类 + transform：利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

.scale-1px{
  position: relative;
  border:none;
}
.scale-1px:after{
  content: '';
  position: absolute;
  bottom: 0;
  background: #000;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

• 通过Css的媒体查询：在设备的像素比大于2的情况时，采用0.5/0.3的px为单位。window.devicePixelRatio也可以判断像素比。

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border { border: 0.5px solid #999 }
  }
  @media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border { border: 0.333333px solid #999 }
  }

• • - Q: 垂直水平居中 A:

    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);

• 使用transform代替margin-*的好处在于，你可以不必知道元素的宽高(margin需要指定为元素宽高的一半)，直接写50%就是元素宽高的一半了，

[TokenYangForever]

---

Q: Http2协议有哪些特点 A: 将数据消息分解为独立的帧，交错发送(解决队头阻塞、不再需要使用雪碧图这种方法)；头部压缩

---

Q: 静态类型语言和强类型语言之间有什么区别? A：强类型语言：不能隐式转换类型：'1' + 1会报错。例如：Java、python。 弱类型语言：可以隐式转换，'1' + 1 = '11'。例如：JavaScript。 静态类型语言：编译的时候就知道每一个变量的类型，因为类型错误而不能做的事情是语法错误。 动态类型语言：编译的时候不知道每一个变量的类型，因为类型错误而不能做的事情是运行时错误。

---