Alex Chueng's blogs
©2021 Alex Chueng's blogs
BACK
前端面试题库(个人)
11 min read
# 记录
View

基础决定上限,观察看学习能力,代码书写风格

HTML 与 DOM 基础

  1. <b> 标签和 css 的 font-weight: bold 属性有什么区别
  2. 简述一下你对HTML语义化的理解?

    1. 把 HTML 的元素标签,属性都写的有意义,并且使用 HTML5 标准的语义化标签
  3. iframe有那些缺点?

    1. iframe会阻塞主页面的Onload事件; 搜索引擎的检索程序无法解读这种页面,不利于SEO; iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。 如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。
  4. 如何实现浏览器内多个标签页之间的通信?

    1. window.addEventListener(‘storage’, (e) => console.log(e)),onstorage以及storage事件,针对都是非当前页面对localStorage进行修改时才会触发,当前页面修改localStorage不会触发监听函数。
  5. webSocket如何兼容低浏览器?
  6. title与h1的区别、b与strong的区别、i与em的区别?
  7. 浏览器如何解析文档结构
  8. HTML 解析过程中遇到 script 标签会怎么样

    1. 停止解析DOM树并且开始下载js,因为 js 可能会改变现有 html 结构,所以是阻塞资源
    2. 可以使用 async 或者 defer 实现异步加载 js,这样不会阻塞 DOM 解析
  9. 如何优化页面的加载速度
  10. 跨域 CORS 的原理是什么
  11. JSON-P 是什么

    1. JSON-P 和 JSON 的性能区别是什么
  12. 设置缓存的方式

    1. 服务器设置 expire 的 http 头信息
    2. 客户端缓存
    3. 缓存 Ajax 请求必须使用 GET 的方式
  13. XSS 和 CSRF 的区别以及原理
  14. 正则表达式的工作原理

    1. JS 解析器遇到表达式时会将其编译成原生代码,所以需要把表达式写成字面量

CSS

  1. 写动画的时候需要注意什么
  2. 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
  3. CSS优先级算法如何计算?
  4. 请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?
  5. 使用 CSS 预处理器吗?喜欢那个?
  6. CSS优化、提高性能的方法有哪些?
  7. 浏览器是怎样解析CSS选择器的?
  8. 抽离样式模块怎么写,说出思路,有无实践经验?
  9. 元素竖向的百分比设定是相对于容器的高度吗?
  10. 你对line-height是如何理解的?
  11. 让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)
  12. 如果需要手动写动画,你认为最小时间间隔是多久,为什么?
  13. overflow: scroll时不能平滑滚动的问题怎么处理?
  14. style标签写在body后与body前有什么区别?
  15. rem布局的优缺点

JS

  1. 介绍JavaScript的基本数据类型。
  2. 说说写JavaScript的基本规范?
  3. Javascript如何实现继承?
  4. JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?
  5. 什么是window对象? 什么是document对象?
  6. 什么是闭包(closure),为什么要用它?
  7. .call() 和 .apply() 的作用和区别,bind 又是做什么的?
  8. new操作符具体干了什么呢?
  9. 那些操作会造成内存泄漏?
  10. Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

    1. hasOwnProperty
    2. JS 对象分为自身属性与继承属性
  11. 对JSON的了解?
  12. 关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?
  13. null,undefined的区别?
  14. JavaScript 原型,原型链 ? 有什么特点?
  15. 同步和异步的区别?
  16. 模块化开发怎么做?
  17. 如何做数据的状态管理
  18. DOM 操作为什么这么慢

    1. getElementByXX 和 querySelector 的区别是什么
  19. JS 代码最优运行时间是多少
  20. 为什么需要使用 JS 的事件代理功能
  21. JS Bridge 的原理
  22. EventLoop 是什么
  23. 作用域链是什么

    1. JS 引擎如何解析标识符的,例如 this window 和其它
    2. 如何达到最高的作用域链的效率
  24. JS 的 JIT 是什么

前端框架

React

  1. React 的应用场景
  2. 描述一下React 生命周期
  3. 为什么循环产生的组件中要利用上key这个特殊的prop?
  4. React-router 路由的实现原理?
  5. 受控组件(Controlled Component)与非受控组件(Uncontrolled Component)的区别
  6. React为什么自己定义一套事件体系呢,与浏览器原生事件体系有什么关系?
  7. 什么时候应该选择用class实现一个组件,什么时候用一个函数实现一个组件?
  8. 什么是HoC(Higher-Order Component)?适用于什么场景?
  9. 并不是父子关系的组件,如何实现相互的数据通信?

    1. 父组件的 state
    2. context
    3. eventEmitter
    4. redux,比较复杂
  10. setState 调用后发生了什么

    1. getInitialState,componentWillMount,render,componentWillUpdate 中setState都不会引起updateComponent。但在componentDidMount和componentDidUpdate中则会。
    2. 直接调用this.setState()

      • 因为在整个生命周期中就是一个事物操作,所以标识位isBatchingUpdates = true,所以流程到了enqueueUpdate()时,实例对象都会加入到dirtyComponents 数组中
      • 接着执行componentWillMount()
      • 将所有的setState操作进行合并(相同的操作合并成一个)
      • 渲染
      • 执行componentDidMount()
      • 事物结束,调用close方法->调用runBatchUpdate()
      • 继续走更新流程
    3. 使用setTimeout()方法调用

      • setTimeout()没在事物中 isBatchingUpdates = false 所以就直接走直接更新操作
  11. virtual DOM 是什么
  12. 为什么会出现virtual DOM
  13. diff 算法是什么

    1. React 的 3 个 diff 结构
  14. React与Vue,各自的组件更新进行对比,它们有哪些区别?

    1. React 使用 state,VUE 使用 watcher
  15. React Native 的底层实现

    1. android 使用 webkit 解析 js
    2. iOS 使用 JavaScript-core 解析 js

React Native

  1. js bridge 是什么

VUE

  1. VUE 的应用场景
  2. VUE 的数据绑定过程

    1. 把 Vue 的实例中的 data 对象,通过 defineProperty 设置 getter 和 setter,在 setter 中设置 watcher 监听对应的对象的变化

Node

  1. Node 的运作原理

    1. 模块加载
    2. JS 模块与 C 模块的交互
    3. Node 的异步机制
    4. Node 的异步 I/O 原理
    5. Node 是单线程吗?
    6. Node 的 V8 内存限制,以及如何突破内存限制
    7. Buffer 对象是什么
    8. 如何处理异常
    9. 如何启用多线程

开发工具

  1. 使用什么开发工具
  2. 搭建的开发环境问题

    1. 团队如何搭建开发环境