Skip to main content

1、 双向绑定的其他方式实现：手动绑定、脏数据轮训、数据劫持

  1. webpack loader 和 plugin 区别， loader 执行顺序

    • Loader 让 webpack 可以处理那些非 javascript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转化为 webpack 能够处理的有效模块，然后可以利用 webpack 的打包功能对他进行处理
    • loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
    • loader 执行顺序是从右向左执行

  2. hook 为什么在 for 循环里不能用

  3. const 一个对象的是值可以改吗？ 为什么

    const 指向一个对象的时候，是指向对象引用地址。仅保证指针不发生改变，修改对象的属性不会改变对象的指针，所以是被允许的。也就是说 const 定义的引用类型只要指针不发生改变，其他的不论如何改变都是允许的。

  4. JSBridge 实现机制

  5. dns 在什么阶段访问 cdn

    step1：用户向 localDNS 发起请求查询输入域名对应的 IP 地址（若有缓存直接返回，否则去 rootDNS 查询）；

    step2：localDNS 迭代向 rootDNS 查询，逐级迭代,rootDNS=>顶级 DNS=>权限 DNS；

    step3：获得权限 DNS 后，localDNS 向权限 DNS 发起域名解析请求；

    step4：权限 DNS 通常会将域名 CNAME【如果有有 CNAME 则解析 CNAME 对应的 CDN 服务，否则的话默认为普通请求，直接返回解析到的 IP】到另一个域名，这个域名最终会被指向 CDN 网络中的智能 DNS 负载均衡系统；

    step5：DNS 负载均衡系统通过一些智能算法，将最合适的 CDN 节点 IP 地址返回给 localDNS；

    step6：localDNS 将获得的 IP 地址返回给用户；

    step7：用户得到节点的 IP 地址后，向该节点发起访问请求；

    step8：CDN 节点返回请求文件，如果该节点中请求的文件不存在，就会再回到源站获取这个文件，然后返回给用户。

  6. Tree-shaking 使用条件

    tree-shaking 依赖 es6 的模块引入或输出语法。

  7. es5 和 es6 的继承区别

  8. 自己实现 webpack 的 loder\plugin, 如何实现

  9. Keep-alive 了解吗

  10. babel6/babel7 区别

  11. babel 打包之后打包成什么

  12. flex 实现一个九宫格

<!DOCTYPE dtd>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .p {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #eee;
        width: 300px;
        height: 300px;
      }
      .d:nth-child(2n + 1) {
        background: red;
        width: calc(100% / 3);
        height: calc(100% / 3);
      }
      .d:nth-child(2n) {
        background: blue;
        width: calc(100% / 3);
        height: calc(100% / 3);
      }
    </style>
  </head>
  <body>
    <div class="p">
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
      <div class="d"></div>
    </div>
  </body>
</html>

  1. hot-loader 机制

  2. 如何构建一个组件库生态

  3. 模块通信

    event 机制

    • 提交某 Event 的模块并不知道周围谁关心此 Event，只管在自己干完活之后吼一嗓子；
    • 关注某 Event 的模块也不知道是谁触发此 Event，只管在那里等待即可。
    //全局
    project.event = new EventEmitter();

    //模块A
    $.ajax(..., (data) => {
    		project.data = data
    		project.event.emit('project.data.ready')
    })

    //模块B
    project.event.addEventListener('project.data.ready', () => {
    		var data = project.data
    })

  4. 模块性能评估

  5. 工程化理解

    工程化就是使前端开发路程标准化、规范化、自动化、工具化，使用规范和工具提供开发效率降低开发成本。

  6. npm 包安装机制

  7. fiber 解决什么问题，带来了什么问题，如何解决的

    https://segmentfault.com/a/1190000018250127

    在现有的 React 中，每个生命周期函数在一个加载或者更新过程中绝对只会被调用一次；在 React Fiber 中，不再是这样了，第一阶段中的生命周期函数在一次加载和更新过程中可能会被多次调用！

  8. 在样式优先级里伪类和伪元素的优先级

  9. flex:1 的表现

  10. cli 插件如何实现

  11. cdn 理解

  12. https 的加密解密过程

    1. 客户端发起 HTTPS 请求

    这个没什么好说的，就是用户在浏览器里输入一个 https 网址，然后连接到 server 的 443 端口。

    1. 服务端的配置

    采用 HTTPS 协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面(startssl 就是个不错的选择，有 1 年的免费服务)。这套证书其实就是一对公钥和私钥。如果对公钥和私钥不太理解，可以想象成一把钥匙和一个锁头，只是全世界只有你一个人有这把钥匙，你可以把锁头给别人，别人可以用这个锁把重要的东西锁起来，然后发给你，因为只有你一个人有这把钥匙，所以只有你才能看到被这把锁锁起来的东西。

    1. 传送证书

    这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。

    1. 客户端解析证书

    这部分工作是有客户端的 TLS 来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随机值。然后用证书对该随机值进行加密。就好像上面说的，把随机值用锁头锁起来，这样除非有钥匙，不然看不到被锁住的内容。

    1. 传送加密信息

    这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

    1. 服务段解密信息

    服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

    1. 传输加密后的信息

    这部分信息是服务段用私钥加密后的信息，可以在客户端被还原。

    1. 客户端解密信息

    客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。整个过程第三方即使监听到了数据，也束手无策。

  13. webpack 去除没有执行到的代码是怎么去除的

  14. 页面性能优化方式

    • ssr
    • gzip
    • Tree-shaking
    • js\css 压缩合并
    • 非核心代码异步加载
    • 浏览器缓存
    • cdn

  15. react 基本原理及性能优化

    https://segmentfault.com/a/1190000015648248

  16. node 框架了解比如 koa ，用文件都做什么

  17. 如何解决 promise.all 的一个异常退出问题

    错误的时候不用 reject，用 resolve('error')

  18. v-model 实现原理

    其核心就是，一方面 modal 层通过 defineProperty 来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的 v-model 绑定 input 事件，从而页面输入能实时更新相关 data 属性值。

    v-model 实际上就是 v-bind:value 加上 oninput 事件的语法糖

  19. node 有 8 个 cpu 如何多进程运行

    child_process

  20. 中文搜索如何解决

    声明一个标记 flag，在 compositionstart、compositionend 两个事件过程之间的时候 flag 值为 false，在 input 事件中通过 flag 的值来判断当前输入的状态。

  21. setTimeout 和 setInterval 机制区别

  22. promise 和 asyn/await 区别

  23. Node.js 多进程

NodeJS 的 JavaScript 运行在单个进程的单个线程上，一个 JavaScript 执行进程只能利用一个 CPU 核心，而如今大多数 CPU 均为多核 CPU，为了充分利用 CPU 资源，Node 提供了child_process和cluster模块来实现多进程以及进程管理。

  1. 观察者模式和发布订阅的区别

    1. 在 Observer 模式中，Observers 知道 Subject，同时 Subject 还保留了 Observers 的记录。然而，在发布者/订阅者中，发布者和订阅者不需要彼此了解。他们只是在消息队列或代理的帮助下进行通信。
    2. 在 Publisher / Subscriber 模式中，组件是松散耦合的，而不是 Observer 模式。
    3. 观察者模式主要以同步方式实现，即当某些事件发生时，Subject 调用其所有观察者的适当方法。发布者/订阅者在大多情况下是异步方式（使用消息队列）。
    4. 观察者模式需要在单个应用程序地址空间中实现。另一方面，发布者/订阅者模式更像是跨应用程序模式。

    发布订阅解耦

  2. vuex

    Vuex 的设计思想，借鉴了 Flux、Redux，将数据存放到全局的 store，再将 store 挂载到每个 vue 实例组件中，利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。