前端面试题（一）

tntxia
107 阅读5分钟

沪江(23问)

  1. JS的原型

Javascript规定，每一个函数都有一个prototype对象属性，指向另一个对象（原型链上面的）。
prototype(对象属性)的所有属性和方法，都会被构造函数的实例继承。这意味着，我们可以把那些不变(公用)的属性和方法，直接定义在prototype对象属性上。

  1. 变量作⽤域链

但我们要使用一个变量时，我们会从当前作用域查找，如果查不到，就去到父级的变量域查找有没有这个变量，一直查到全局作用域，这就是变量的作用域链了。

我们在调试时，可以看到函数里有[[scope]] 属性: 指向⽗级变量对象和作⽤域链，也就是包含了⽗级的 [[scope]]

  1. call、apply、bind的区别

call和apply都是调用函数，不同的是call的函数参数和原函数，apply则是把参数放在数组里，再拆解开，分配给原函数。当我们不知道传入传递函数变量有多少个参数，用apply可以解决这个问题。

bind是将函数的this指向一个新的变量。不会调用函数。

  1. 防抖和节流的区别

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

  1. 介绍各种异步⽅案
  • promise的then链式回调
  • async、await的同步方式
  1. react⽣命周期

挂载期、更新期、卸载期

  1. 介绍Fiber

Fiber 其实指的是一种数据结构，它可以用一个纯 JS 对象来表示：

const fiber = {
    stateNode,    // 节点实例
    child,        // 子节点
    sibling,      // 兄弟节点
    return,       // 父节点
}

Fiber会根据Fiber树结构和事件优先级来更新。

  1. 前端性能优化
  • 尽量最小化文件，结合Http缓存
  • 减少关键CSS的数量，加快页面渲染
  • 避免用Table布局
  • 避免使用CSS的计算样式
  • 图片的懒加载
  • 使用事件代理 减少Dom元素事件绑定
  • 使用### 防抖（debounce）/节流（throttle）### 减少Dom的不必要更新
  1. 介绍DOM树对⽐

Dom树的对比。

从Root元素开始，对比元素的属性，如果元素中有子元素，还有对比子元素。

  1. react中的key的作⽤

加快Dom的Diff运算，例如：如果key在这一层不存在，则认为是新增的元素，这样就不用对齐其中的属性来确定是否新增元素了。

  1. 如何设计状态树
  • 根据业务类型分开
  • 尽量不要太深，扁平化
  1. 介绍xss，xsrf

跨站脚本攻击(Cross Site Scripting);

CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF;

  1. http缓存控制

第一次向服务器发请求时，浏览器会缓存协商。

后续向服务器发请求时，检查缓存是否过期，如果缓存过期，请求服务器，

  1. 项⽬中如何应⽤数据结构

能不用就不用

  1. native提供了什么能⼒给RN

React Native把React代码，转化成原生渲染，不需要借助WebView

  1. 如何做⼯程上的优化
  • 代码压缩
  • 自动编译
  • 自动发布
  1. shouldComponentUpdate是为了解决什么问题

render频繁调用

  1. 如何解决props层级过深的问题

redux

  1. 前端怎么做单元测试

jest

  1. webpack⽣命周期

Webpack 函数的核⼼逻辑是：根据配置⽣成编译器实例 compiler，然后处理参数，执⾏ WebpackOptionsApply().process，根据参数加载不同内部插件。在有回调函数的情况下，根据是否是 watch 模式来决定要执⾏ compiler.watch 还是 compiler.run。

image.png

  1. webpack打包的整个过程

查找入口文件，根据入口文件和配置中的加载器，加载模块，文件编译，将结果输出到出口文件。

  1. 常⽤的plugins

  2. BannerPlugin：对所有的文件打包后添加一个版权声明

  3. uglifyjs-webpack-plugin： 对JS进行压缩混淆

  4. HtmlWebpackPlugin：可以根据模板自动生成html代码，并自动引用css和js文件

  5. Hot Module Replacement：在每次修改代码保存后，浏览器会自动刷新，实时预览修改后的效果

  6. copy-webpack-plugin：通过Webpack来拷贝文件

  7. extract-text-webpack-plugin：将js文件和css文件分别单独打包，不混在一个文件中

  8. DefinePlugin： 编译时配置全局变量，这对开发模式和发布模式的构建允许不同的变量时非常有用

  9. optimize-css-assets-webpack-plugin： 不同组件中重复的css可以快速去重

  10. pm2怎么做进程管理，进程挂掉怎么处理

pm2是守护nodejs进程后台运行的,异常停止后可以自动重启，并且也可以袒护其它第三方的命令行程序，比如php的命令行

pm2 start 启动进程 pm2 stop 停止进程 pm2 list 查看所有进程

  1. 不⽤pm2怎么做进程管理

nodejs的多进程

avatar
文章
阅读
粉丝