一些值得思考的前端面试题

Posted on | In
Words count in article: 1.4k | Reading time ≈ 5

一些值得思考的前端面试题
还在继续补充中……
author: @TiffanysBear

ALL

  1. 在nodejs开发的时候 处理过什么windows和mac的平台兼容性问题

    • 兼容环境变量设置
    • windows不支持 & ,并行执行npm-script用npm-run-all或者concurrently
    • 异步同步化:util.promisify + async/await
    • fs.readFileSync，用fs-extra去代替
    • 拼接路径要用path.join，Unix系是/，Windows是\
    • ……

  2. 设计一个方案，在浏览器中点击一个button，然后能在你的前端项目源码文件中增加一个index.js文件，如何实现？提供思路

  3. 用nodejs，将base64转化成png文件，或者将png文件转化为base64

  4. 如果你用nodejs实现的爬虫服务器的IP被指定网站封了，如何解封？

  5. 请设计一个方案：有a、b、c三个npm插件，它们会经常更新，在前端项目npm run start启动后，要求a、b、c三个npm插件自动更新到最新版本

  6. 大文件转存问题：服务器A有一个1000G的文件， 需要通过服务端B转发到服务端C，但是服务器B内存只有1个g， 怎么去实现这个大文件转存

  7. 如何劫持https的请求，提供思路

  8. 前端如何进行seo优化; 前后端分离的项目如何seo

  9. 简单实现async/await中的async函数

  10. 1000-div问题：一次性插入1000个div。

    • 使用Fragment
    • 向1000个并排的div元素中，插入一个平级的div元素，如何优化插入的性能；先 display: none 然后插入 再 display: block ；赋予key，然后使用virtual-dom，先render，然后diff，最后patch；脱离文档流，用GPU去渲染，开启硬件加速；

  11. 2万小球问题：在浏览器端，用js存储2万个小球的信息，包含小球的大小，位置，颜色等，如何做到对这2万条小球信息进行最优检索和存储

    • 用ArrayBuffer实现极致存储
    • 哈夫曼编码 + 字典查询树实现更优索引
    • 用bit-map实现大数据筛查
    • 用hash索引实现简单快捷的检索
    • 用IndexedDB实现动态存储扩充浏览器端虚拟容量
    • 用iframe的漏洞实现浏览器端localStorage无限存储，实现2千万小球信息存储

  12. http的状态码中，499是什么？如何出现499，如何排查跟解决

    • 499对应的是 “client has closed connection”，客户端请求等待链接已经关闭，这很有可能是因为服务器端处理的时间过长，客户端等得“不耐烦”了。还有一种原因是两次提交post过快就会出现499。
      解决方法：1、前端将timeout最大等待时间设置大一些；2、nginx上配置proxy_ignore_client_abort on;

  13. 如何遍历一个dom树

  14. new操作符都做了什么

    • 创建一个空对象，并且 this 变量引用该对象，// lat target = {};
    • 继承了函数的原型。// target.proto = func.prototype;
    • 属性和方法被加入到 this 引用的对象中。并执行了该函数func// func.call(target);
    • 新创建的对象由 this 所引用，并且最后隐式的返回 this 。// 如果func.call(target)返回的res是个对象或者function 就返回它
  1. 请设计一个攻击服务器的策略;伪造虚假npm包 + nodejs版本的payload, nodejs的反序列化攻击
  2. 请写一个正则，去除掉html标签字符串里的所有属性，并保留src和href两种属性。答案
  3. 十万条数据插入数据库，怎么去优化和处理高并发情况下的DB插入。想法
  4. 一个iframe，内嵌了一个A页面，iframe的宽高不停变化，如何让A页面的宽高实时自适应这个iframe的宽高大小。请说出至少3种方法
  5. v8有了解过吗？讲讲了解过v8的那几个模块和部分
  6. 现在有多个spa的项目，有angular的，有vue的和react的，如何将他们合并成一个大统一的spa项目。提示

项目相关

  1. 怎么实现页面性能监控，首屏时间计算等
  2. 怎么实现一个JS错误监控

HTTP

  1. Http请求中的keep-alive有了解吗？
  2. http的状态码中，499是什么？如何出现499，如何排查跟解决
  3. http三次握手四次挥手，可以优化吗？
  4. 什么是断点续传？怎么实现？
  5. http 2.0 有什么特点，相比于 1.1 多了哪些优化？
  6. http中的对称加密和非对称加密
  7. 浏览器缓存机制
  8. 浏览器建立长连接
  9. http状态码206

代码实现

  1. 手写代码，简单实现call
  2. 手写代码，简单实现apply
  3. 手写代码，简单实现bind
  4. 简单手写实现promise、promise.all
  5. 实现一个Lazyman
  6. 用JS代码求出页面上一个元素的最终的background-color，不考虑IE浏览器，不考虑元素float情况。
  7. 实现一个 axios 的 timeout 方法
  8. 实现一个 render 方法进行模板字符串替换
  9. 实现一个new，说一说new执行了哪些操作
  10. 发布订阅模式
  11. 实现一个简单的Vue

HTML & CSS

  1. bootstrap是怎么实现grid系统
  2. BFC：清除浮动、margin重叠
  3. 两列等高布局的实现

源码相关

  1. Jquery的源代码怎么进行Object的深复制

Vue

  1. vue 中的一个 tick 是什么，node 中的 tick 呢
  2. vue 自定义指令
  3. vue 编译后是什么，runtime 的作用
  4. keep-alive

打包相关

  1. webpack常见使用
  2. fis、webpack等打包插件的原理
  3. webpack一些常用的使用功能：提取公共部分、代码分割和按需加载、treeShaking、webpack-dev-server等的一些使用