八月面试题（4）

最新推荐文章于 2022-05-16 22:17:54 发布

weixin_34290390

最新推荐文章于 2022-05-16 22:17:54 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript 运维 ViewUI

原文链接：https://juejin.im/post/5b911ced6fb9a05d1c146ae0

1、你在项目中如何进行 Webpack 优化?

答：

1. 缩小文件搜索范围,配置比如resolve.modules,resolve.modules,resolve.mainFields,resolve.alias ,resolve.extensions ,module.noParse 配置
2. 使用DllPlugin 要给 Web 项目构建接入动态链接库
3.HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程
4.当 Webpack 有多个 JavaScript 文件需要输出和压缩时，原本会使用 UglifyJS 去一个个挨着压缩再输出， 但是 ParallelUglifyPlugin 则会开启多个子进程，把对多个文件的压缩工作分配给多个子进程去完成
5.可以监听文件的变化，当文件发生变化后可以自动刷新浏览器，从而提高开发效率。
6.(Hot Module Replacement)的技术可在不刷新整个网页的情况下做到超灵敏的实时预览。 原理是当一个源码发生变化时，只重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块。
7.Tree Shaking 可以用来剔除 JavaScript 中用不上的死代码。它依赖静态的 ES6 模块化语法，例如通过 import 和 export 导入导出
8.可以使用CommonsChunkPlugin 把多个页面公共的代码抽离成单独的文件进行加载
9.Webpack 内置了强大的分割代码的功能去实现按需加载，可以用import实现路由按需加载。
10.Scope Hoisting 可以让 Webpack 打包出来的代码文件更小、运行的更快， 它又译作 "作用域提升"
11.可以使用可视化分析工具 Webpack Analyse等去分析输出结果，从页进行优化.
12. 对于 Webpack4，打包项目使用 production 模式，这样会自动开启代码压缩
13.优化图片，对于小图可以使用 base64 的方式写入文件中
14. 给打包出来的文件名添加哈希，实现浏览器缓存文件
复制代码

2、请说一下ES6中 Generator 的实现原理?

答：Generator 实现 Generator 是 ES6 中新增的语法，和 Promise 一样，都可以用来异步编程

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行
function* test() {
 let a = 1 + 2;
 yield 2;
yield 3;
}
let b = test();
console.log(b.next()); // >  { value: 2, done: false }
console.log(b.next()); // >  { value: 3, done: false }
console.log(b.next()); // >  { value: undefined, done: true }
从以上代码可以发现，加上 * 的函数执行后拥有了 next 函数，也就是说函数执行后返回了一个对象。每次调用 next 函数可以继续执行被暂停的代码。以下是 Generator 函数的简单实现
// cb 也就是编译过的 test 函数
复制代码

function generator(cb) { return (function() { var object = { next: 0, stop: function() {} };

return {
  next: function() {
    var ret = cb(object);
    if (ret === undefined) return { value: undefined, done: true };
    return {
      value: ret,
      done: false
    };
  }
};
})();
}
// 如果你使用 babel 编译后可以发现 test 函数变成了这样
function test() {
 var a;
return generator(function(_context) {
    while (1) {
  switch ((_context.prev = _context.next)) {
    // 可以发现通过 yield 将代码分割成几块
    // 每次执行 next 函数就执行一块代码
    // 并且表明下次需要执行哪块代码
    case 0:
      a = 1 + 2;
      _context.next = 4;
      return 2;
    case 4:
      _context.next = 6;
      return 3;
    	// 执行完毕
      case 6:
      case "end":
       return _context.stop();
     }
 }
});
}

3、什么是IFC?IFC的作用是什么？

答：这个网站有所有完整的概念。
复制代码

IFC BFC都属于「视觉可视化模型」型」 www.ayqy.net/doc/css2-1/…

developer.mozilla.org/zh-CN/docs/… htt xt dondevi.github.io/css-visual-…

4、什么是跨域？常用的跨域方式有哪些？

答：由于浏览器存在同源策略，请求的 Url 地址的协议、主机名、端口号必须完全相同，否则会产生跨域，同源策略的限制下 cookie 、loclstorage、dom、ajax、IndexDB 等都不允许跨域、form 表单不受同源策略限制对跨域的理解有一个误区，跨域不是请求没有发送出去或者服务器接收到请求而没有响应，正确的情况是请求发出，服务器响应，由于响应和请求来自不同的域被浏览器拦截了。

跨域的方式有以下几种：

1、jsonp：通过 script 的 src 属性发送请求，传参必须含有 callback 回调的名称，服务器返回函数的调用，接收到响应直接执行；

2、cors：通过服务端设置 Access-Control-Allow-Origin，通常在后端通过白名单设置权限允许固定的域来访问

3、window.postMessage：Hge：H5 API，消息接收方通过 message 事件接收，事件对象 data 属性代表接收的消息，可以通过事件对象的 source 属性通过通过 source.postMessage(“ge(“message”, ”, e.origin) 进行) 进行回复

4、可以使用使用 window.name 和 l 和和 location.hash 在不同在不同域的 iframe 页面之间进行消息传递

5、document.domain：如果域：如果域名之间是一二级域名的关系，可以将页面的面的 document.domain 设置为设置为一级域名的后半部分，如：，如：baidu.com 实现跨实现跨域

6、可以使用 websocket 进行跨域，websocek 的协议为 ws:// 或 wss:// 是实时通信，不存在跨域问题。

7、服务器与服务器之间通信不受浏览器同源策略限制，因此不存在跨域问题，可以使用 nginx 或 node 的 http-proxy-middleware 中间件实现作为代理服务器帮助浏览器对请求进行转发，完成与不同域的服务器之间的通信，webpack-dev-server 就是通过 http-proxy-middleware 实现的跨域

详情请看：请看：www.pandashen.com/2018/06/11/…

6、请说说cookie，localStorage，sessionStorage，indexDB之间的区别的使用场景?

答：

7、写一个函数find_missing(A, low, high)，给定一个范围[low,high]，寻找一个数组中缺失的元素。

答：本题考查对算法复杂度的理解，简单两次循环或者filter/map等等嵌套循环，可以在O( (high -low) * A.length )复杂度完成，但是通过排序可以优化到O(nlgn)+O(high - low)。

function find_missing(A, low, high){
    const B = A.filter(x => x >= low && x < high).sort((x,y) => x - y)
    let j = 0
    return [...Array(high - low )]
    .map((_, i) => i+low)
        .filter(x => B[j] !== x ? true : !!!++j) 
}
复制代码

8、讲讲输入完网址按下回车，到看到网页这个过程中发生了什么？

答：

1. 用户输入URL地址

        2. 浏览器解析URL解析出主机名
        3. 浏览器将主机名转换成服务器ip地址（浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存）
     4. 浏览器将端口号从URL中解析出来
        5. 浏览器建立一条与目标Web服务器的TCP连接（三次握手）
    6. 浏览器向服务器发送一条HTTP请求报文
    7. 服务器向浏览器返回一条HTTP响应报文
    8. 关闭连接 浏览器解析文档
    9. 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕
        渲染的基本流程
1. HTML解析出DOM Tree
2. CSS解析出Style Rules
3. 将二者关联生成Render Tree
4. Layout 根据Render Tree计算每个节点的信息
5. Painting 根据计算好的信息绘制整个页面
复制代码

9、今日面试题谈谈你对前端资源下载性能优化的经验和思考?

转载于:https://juejin.im/post/5b911ced6fb9a05d1c146ae0