Skip to content

yayxs/front-end-interview-questions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

下文的JavaScriptjs JS 代表一回事;HTMLhtml 代表一回事

为了能更好的索引 我会定时不定时的把我整理的文档放到下边,包括 HTML CSS JavaScript 等等 还有一些框架 工程化 ……

前端 coder 如何有序的进阶 : 笔者认为 : 你要掌握专业知识(HTML+ CSS + JavaScript + 浏览器)我们先重点看这部分。稍后可能才是能力进阶(所谓的框架原理 + 工程能力 + 开发技巧 + 思维) 最后你要能独立开发项目(出色的技术选型方案 + 项目设计 + 性能优化)

HTML

html 的内容大多是掺杂在讲述JS 书籍和资料文章中被顺带提及 例如 《高程 4》中的 “HTML 中的 JavaScript” 、《DOM 编程艺术》中的“HTML5” 章节等等 关于 HTML 也有很多考察点,多半是结合JS 这部分我会参考权威书籍以及 MDN 文档

CSS

CSS 主要考察的大致两个方面 页面布局的原理 + 页面布局的技巧

  • 页面布局原理:盒子模型 + 文档流 + 浮动布局
  • 页面布局技巧: 传统布局 + Flex 布局 + Grid 布局

JavaScript基础

JavaScript进阶

  • JS 中的变量提升现象 Hoisting

  • 作用域

  • 什么是暂时性死区

  • new 操作符原理

    • new 内部机制是怎样的?
    • 是否了解构造函数模式
    • 能否自己实现一个 new 操作符
  • 你对执行上下文的理解

  • 垃圾回收机制与内存

    • 垃圾回收机制的了解
    • JavaScript 的数据是如何回收的
    • 对内存泄漏的理解?
  • 说说JS中的原型链

    • 原型链继承
    • 属性查找机制
  • 谈谈jS中是怎么实现继承的

    • ES5/ES6 的继承分别有哪些优缺点?
    • 继承到底有多少种实现方式呢
    • extends 关键字是用哪种继承方式实现的呢

JavaScript异步

  • 说说你对await 操作符的理解,平常工作是怎么应用的
  • 同步编程和异步编程的区别在哪里?
  • JS 编程中为什么需要异步?
  • JS 异步编程方式发展历程
    • 常见的异步任务有哪些
  • 回调地狱缺点?有哪些方法可以解决?
  • Promise构造函数是同步还是异步执行
  • setTimeout,Promise,Async/Await 的区别
  • Promise 的缺点
  • Promise 内部究竟有几种状态?
  • Promise 是怎么解决回调地狱问题的?
  • Promise 到底解决了什么痛点?这样的痛点还可以如何解决
  • React中的setState是同步的还是异步的?什么时候同步什么时候异步?(实践题目)

JavaScript 手写

浏览器

  • 为什么很多站点第二次打开速度会很快?
  • 什么是 DNS 缓存
  • 浏览器在进行页面布局过程中会做些什么
  • 重绘和重排会导致什么问题
  • 如何实现浏览器内多个标签页之间的通信?
  • 常见的浏览器兼容性问题 -本地存储 cookie 与 token
  • 了解 SameSite 属性吗

Node.js

  • 谈谈对RESTful 的理解

计算机网络

一名程序员,无论是应对日常开发、日常排查,还是解决突发的网络问题(网络调试、网络优化)都离不开计算机网络。而要想成为优秀的工程师、架构师,朝着更高阶、更高薪的岗位去晋升,补足编程必备基础知识——计算机网络是绕不过去的一关。

  • 当在网页浏览器的地址栏输入url后,发生了什么
  • 三次握手?TCP 为什么要 3 次握手?
  • HTTPS 协议的 TTFB 传输时间
  • HTTPS 链接的创建过程 以及为什么 HTTPS 就是安全的
  • 什么是长链接 为什么需要长链接
  • HTTP2 的信道复用为什么能提高性能
  • 浏览器输入 URL 后 HTTP 承担的角色是什么
  • URI URL URN 的区别
  • 收到 IP 数据包解析以后,它怎么知道这个分组应该投递到上层的哪一个协议(UDP 或 TCP)
  • 你怎么理解HTTPTCP的关系
  • telnet 调试远程服务
  • Whireshark抓包定位网络故障

算法与数据结构

  • 数据结构中稳定的排序算法 不稳定的排序算法
  • 时间复杂度 与空间复杂度代表什么

Webpack

  • 介绍下 webpack 热更新原理,是如何做到在不刷新浏览器的前提下更新页面的

  • 介绍webpack 的实现原理

  • Webpack 的 loader 和 plugins 的区别

  • 谈谈babel 的原理是什么

  • 你有使用过webpack 吗?简单说说你的看法

  • 你有没有脱离脚手架,从基本搭建一个工程化的项目?

  • webpackloaderplugin 有什么区别?谁先执行

  • 介绍下 webpack 热更新原理,是如何做到在不刷新浏览器的前提下更新页面的?说说其原理

  • 介绍webpack 的实现原理

  • webpack 打包react 项目怎么减少生成js 的大小

  • webpack 怎么处理模块化?模块化机制是怎么样的?

  • 你还了解其他的打包工具吗?比如 rollupgruntgulp 它们有什么异同点、优劣势

  • 有哪些常见的loader

  • 有哪些常见的Plugin

  • 简单说说 webpack 的构建流程是什么?

  • 是否写过 Loader 和 Plugin?描述一下编写 loader 或 plugin 的思路?

  • webpack怎么配置单页应用?怎么配置多页应用?

  • webpack的打包原理是怎么样的

  • 分别介绍 bundle chunk module是什么?

  • webpack中 babel 的原理以及实现

  • 代码分割的本质是什么?

Vue

讲道理,其实Vue 的官方文档写的真的非常好!! 如果你什么都没开始,就一定把 Vue 的文档教程、以及 API 都好好研读研读 我是在看了Vue生态的 的文档(VueCLI VUE2 Vuex VueRouter VueLoader )然后基于vue2的源码 给大家整理了如下的面试题目 绝对不是口水话 目前的状态是视频还没开始录制 文字版已经在写了 如下的链接还不能点 不过你可以看看都是有哪些 耳熟能详的问题 当然了这只是一小部分

React

  • 列表组件中的 key
  • 为什么使用框架而不是原生
  • 虚拟 DOM 的优劣如何
  • 虚拟 DOM 的实现原理
  • React 最新的生命周期是怎样的?
  • React 的请求应该放在哪个生命周期中?
  • Ajax 请求放在 componentDidMount 里进行处理还是放在componentWillMount 里进行处理比较合适?
  • react-router 里的 <Link> 标签和 <a> 标签有什么区别
  • react 与vue 的区别
  • React 高阶组件的作用有哪些
  • 简述下 flux 的思想
  • redux 的工作流程?
  • react-redux 是如何工作的?
  • redux 与 mobx 的区别?
  • redux 中如何进行异步操作?
  • React 组件通信如何实现?
  • React 如何进行组件/逻辑复用?
  • mixin、hoc、render props、react-hooks 的优劣如何?
  • 你是如何理解 fiber 的?
  • 有没有使用过 React Hooks?使用 React Hooks 的同时为什么需要使用高阶组件?
  • 受控组件以及非受控组件的区别
  • react-router 里的 <Link> 标签和 <a> 标签有什么区别

框架宏观了解

  • React 和 Vue 的区别?
  • 能对比一下 Create React App 和 Vue CLI 吗?
  • 了解 MVC / MVP / MVVM 的区别吗?

移动端

  • 触摸事件
  • 移动端的兼容问题
  • 移动端 300ms 延迟
  • 移动端 rem
  • 移动端 1px

About

前 端 面 试 题 2.0

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published