前端面试指南 |【230页】前端初级工程师面试题精编解析大全

╰+哭是因爲堅強的太久メ 2022-09-04 09:53 185阅读 0赞

### 目录 ###

*   *  前言
     *  前端初级工程师面试题
     *   *  HTML 篇
         *  CSS 篇
         *  JavaScript 篇
         *  浏览器篇
         *  服务端与网络
         *  Vue 框架
         *  算法篇

## 前言 ##

初级前端工程师如何有计划的学习前端？前端基础是第一步也是非常重要的一步，从初学前端到成长为一名架构师，会经历很多挫折和困难，唯一不变的就是坚持、成长、与反思。

前端学习的方法很重要，学习前端需要分阶段，通过阶段性的学习才能快的掌握前端技能。

> ![fc6f7961d91cc86830439ea0eb78b612.png][]  
> 完整学习路线图：[点击此处免费领取][Link 1]

## 前端初级工程师面试题 ##

> 前端初级工程师面试题精编解析大全内容大纲包括：**HTML 篇、CSS篇、JavaScript 篇、浏览器、服务端与网络、Vue 框架、算法篇。**

### HTML 篇 ###

*  你是怎么理解 HTML 语义化
 *  你用过哪些 HTML5 标签
 *  meta viewport 是做什么用的，怎么写？
 *  H5 是什么
 *  label 标签的作用
 *  行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
 *  a 标签中 如何禁用 href 跳转页面 或 定位链接
 *  canvas 在标签上设置宽高 和在 style 中设置宽高有什么区别
 *  你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
 *  iframe 有哪些缺点？
 *  HTML5 新特性
 *  HTML5 离线储存
 *  浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？
 *  Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
 *  HTML 与 XHTML——二者有什么区别  
    ![2f86f1f29a2fe554c02a3616c4df8a06.png][]

### CSS 篇 ###

*  页面渲染时，dom 元素所采用的 布局模型,可通过box-sizing 进行设置。根- 据计算宽高的区域可分为：
 *  ie 盒模型算上 border、padding 及自身（不算 margin），标准的只算上自身窗体的大小 css 设置方法如下：
 *  几种获得宽高的方式
 *  拓展各种获得宽高的方式
 *  边距重叠解决方案(BFC) BFC 原理
 *  css reset 和 normalize.css 有什么区别
 *  居中方法
 *  css 优先确定级
 *  如何清除浮动
 *  自适应布局
 *  画三角形
 *  link @import 导入 css
 *  长宽比方案
 *  display 相关
 *  CSS 优化
 *  CSS 开启 GPU 加速
 *  开启 GPU 硬件加速可能触发的问题
 *  CSS 中 link 与@import 的区别
 *  CSS 选择器列表优先级及权重
 *  display:none 和 visibility:hidden 的区别
 *  position 的 absolute 与 fixed 共同点与不同点
 *  介绍一下 CSS 的盒子模型
 *  CSS 选择符有哪些
 *  哪些属性可以继承
 *  优先级算法如何计算
 *  CSS3 新增伪类有哪些
 *  列出 display 的值，说明他们的作用
 *  position 的值，relative 和 absolute 分别是相对于谁进行定位的
 *  CSS3 有哪些新特性
 *  为什么要初始化 CSS 样式
 *  canvas 在标签上设置宽高 和在 style 中设置宽高有什么区别
 *  什么是 css HACK
 *  Less/Sass/Scss 的区别
 *  css 与 js 动画差异
 *  CSS 预处理器(Sass/Less/Postcss)
 *  CSS 动画
 *  去除浮动影响，防止父级高度塌陷
 *  选择器优先级
 *  居中布局
 *  层叠上下文
 *  BFC
 *  介绍一下标准的 CSS 的盒子模型？与低版本 IE 的盒子模型有什么不同的？
 *  box-sizing 属性
 *  CSS 选择器有哪些？哪些属性可以继承？
 *  CSS 优先级算法如何计算？
 *  display 有哪些值？说明他们的作用?
 *  position 的值
 *  文字阴影
 *  font-face 属性
 *  圆角（边框半径）
 *  边框图片
 *  盒阴影
 *  媒体查询
 *  请解释一下 CSS3 的 flexbox（弹性盒布局模型）,以及适用场景？
 *  用纯 CSS 创建一个三角形的原理是什么？
 *  一个满屏品字布局如何设计?
 *  为什么要初始化 CSS 样式
 *  absolute 的 containing block 计算方式跟正常流有什么不同？
 *  解释 css sprites ，如何使用？
 *  **…**  
    ![73736668196f13f5f868c57fbfa05525.png][]

### JavaScript 篇 ###

*  请你谈谈 Cookie 的优缺点
 *  Array.prototype.slice.call(arr，2)方法的作用是
 *  以下代码执行后，控制台的输出是
 *  简单说一下浏览器本地存储是怎样的
 *  原型 / 构造函数 / 实例
 *  原型链
 *  执行上下文(EC)
 *  变量对象
 *  作用域链
 *  闭包
 *  对象的拷贝
 *  new 运算符的执行过程
 *  instanceof 原理
 *  代码的复用
 *  继承
 *  类型转换
 *  类型判断
 *  模块化
 *  防抖与节流
 *  函数执行改变 this
 *  ES6/ES7
 *  AST
 *  babel 编译原理
 *  函数柯里化
 *  get 请求传参长度的误区
 *  补充 get 和 post 请求在缓存方面的区别
 *  说一下闭包
 *  说一下类的创建和继承
 *  如何解决异步回调地狱
 *  说说前端中的事件流
 *  如何让事件先冒泡后捕获
 *  说一下事件委托
 *  说一下图片的懒加载和预加载
 *  mouseover 和 mouseenter 的区别
 *  js 的 new 操作符做了哪些事情
 *  改变函数内部 this 指针的指向函数（bind，apply，call 的区别）
 *  js 拖拽功能的实现
 *  异步加载 js 的方法
 *  Ajax 解决浏览器缓存问题
 *  js 的防抖
 *  js 节流
 *  JS 中的垃圾回收机制
 *  eval 是做什么的
 *  如何理解前端模块化
 *  说一下 Commonjs、AMD 和 CMD
 *  对象深度克隆的简单实现
 *  实现一个 once 函数，传入函数参数只执行一次
 *  将原生的 ajax 封装成 promise
 *  js 监听对象属性的改变
 *  如何实现一个私有变量，用 getName 方法可以访问，不能直接访问
 *  setTimeout、setInterval 和 requestAnimationFrame 之间的区别
 *  实现一个两列等高布局，讲讲思路
 *  自己实现一个 bind 函数
 *  用 setTimeout()方法来模拟 setInterval()与 setInterval()之间的什么区别？
 *  js 怎么控制一次加载一张图片，加载完后再加载下一张
 *  如何实现 sleep 的效果（es5 或者 es6）
 *  Function.*proto*(getPrototypeOf)是什么？
 *  实现 js 中所有对象的深度克隆（包装对象，Date 对象，正则对象）
 *  简单实现 Node 的 Events 模块
 *  箭头函数中 this 指向举例
 *  js 判断类型
 *  数组常用方法
 *  数组去重
 *  闭包有什么用
 *  事件代理在捕获阶段的实际应用
 *  去除字符串首尾空格
 *  性能优化
 *  **…**  
    ![9fac762a0ded742359cfbdc27f21d975.png][]

### 浏览器篇 ###

*  跨标签页通讯
 *  浏览器架构
 *  浏览器下事件循环(Event Loop)
 *  从输入 url 到展示的过程
 *  重绘与回流
 *  存储
 *  Web Worker
 *  V8 垃圾回收机制
 *  内存泄露
 *  reflow(回流)和 repaint(重绘)优化
 *  如何减少重绘和回流?
 *  一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
 *  localStorage 与 sessionStorage 与 cookie 的区别总结
 *  浏览器如何阻止事件传播，阻止默认行为
 *  虚拟 DOM 方案相对原生 DOM 操作有什么优点，实现上是什么原理？
 *  浏览器事件机制中事件触发三个阶段
 *  什么是跨域？为什么浏览器要使用同源策略？你有几种方式可以解决跨域问题？了解预检请求嘛？
 *  了解浏览器缓存机制吗？
 *  什么情况会阻塞渲染？
 *  如何判断 js 运行在浏览器中还是 node 中？
 *  关于 web 以及浏览器处理预加载有哪些思考？
 *  http 多路复用
 *  http 和 https
 *  cookie 可设置哪些属性？httponly?
 *  登录后，前端做了哪些工作，如何得知已登录
 *  http 状态码
 *  `# Http` 请求头缓存设置方法
 *  实现页面回退刷新
 *  正向代理和反向代理
 *  关于预检请求
 *  三次握手四次挥手
 *  TCP 和 UDP 协议
 *  进程和线程的区别
 *  浏览器内核
 *  渲染引擎
 *  主流浏览器内核
 *  rident 内核常见浏览器
 *  开源内核
 *  Firefox 内核
 *  描述浏览器渲染过程
 *  什么是 DOCTYPE 及作用？
 *  常见的 DOCTYPE 声明有几种？
 *  什么是 Reflow？
 *  什么是 Repaint？
 *  从浏览器地址栏输入 url 到显示页面的步骤
 *  请描述一下 cookie、sessionStorage、localStorage 的区别
 *  什么是 XXS 攻击
 *  CSRF 攻击
 *  DDOS 攻击
 *  从 URL 输入到页面展现到底发生什么
 *  cookie 中存放的数据
 *  cookie 生成过程
 *  常用那几种浏览器测试？
 *  主流浏览器的内核有哪些？
 *  说说你对浏览器内核的理解？
 *  URL 和 URI 有什么区别
 *  HTTP 和 HTTPS 的区别
 *  简单说一下浏览器本地存储是怎样的
 *  请你谈谈关于 Cookie 的利弊
 *  为什么 JavaScript 是单线程的，与异步冲突吗
 *  CSS 加载会造成阻塞吗
 *  为什么 JS 会阻塞页面加载
 *  defer 和 async 的区别 ?
 *  DOMContentLoaded 与 load 的区别 ?
 *  为什么 CSS 动画比 JavaScript 高效
 *  高性能动画是什么，那它衡量的标准是什么呢？
 *  **…**  
    ![3d9fce671872d85f7dafbd34a72dcbf9.png][]

### 服务端与网络 ###

*  http/https 协议
 *  常见状态码
 *  get / post
 *  Websocket
 *  TCP 三次握手
 *  TCP 四次挥手
 *  Node 的 Event Loop: 6 个阶段
 *  URL 概述
 *  HTTPS 和 HTTP 的区别
 *  HTTP 版本
 *  从输入 URL 到页面呈现发生了什么？
 *  HTTP 缓存
 *  缓存位置
 *  强缓存
 *  协商缓存
 *  缓存的资源在那里
 *  用户行为对浏览器缓存的影响
 *  缓存的优点
 *  不同刷新的请求执行过程
 *  为什么会有跨域问题
 *  如何解决跨域
 *  访问控制场景（简单请求与非简单请求）
 *  withCredentials 属性
 *  服务器如何设置 CORS
 *  URL 类中的常用方法
 *  常见网络架构
 *  TCP 连接过程客户端和服务端状态
 *  多进程多线程的区别
 *  OSI，TCP/IP，五层协议的体系结构，以及各层协议
 *  HTTP 的长连接和短连接?
 *  运输层协议与网络层协议的区别？
 *  数据链路层协议可能提供的服务？
 *  为什么 TCP 连接要建立三次连接？
 *  为什么要 4 次挥手？
 *  如果已经建立了连接，但是客户端突然出现故障了怎么办？
 *  TCP 和 UDP 的区别？
 *  TCP 对应的协议
 *  UDP 对应的协议
 *  端口及对应的服务？
 *  TCP/IP 的流量控制？
 *  TCP 拥塞控制？
 *  HTTPS 安全的局限性
 *  TCP 的连接管理
 *  交换机与路由器有什么区别？
 *  网桥的作用？
 *  数据链路层协议可能提供的服务？
 *  网络接口卡（网卡）的功能？
 *  私有（保留）地址？
 *  TTL 是什么？作用是什么？哪些工具会用到它（ping traceroute ifconfig netstat）？
 *  路由表是做什么用的？在 Linux 环境中怎么配置一条默认路由？
 *  RARP？
 *  TCP 特点
 *  TCP 连接 与 套接字
 *  TCP 可靠传输的实现
 *  停止等待协议的原理
 *  流量控制的目的？
 *  如何实现流量控制？
 *  **…**  
    ![97ea96c69d5f02e0009c3653ebf3184e.png][]

### Vue 框架 ###

*  vue.js 的两个核心是什么？
 *  vue 的双向绑定的原理是什么？
 *  vue 生命周期钩子函数有哪些？
 *  请问 v-if 和 v-show 有什么区别？
 *  vue 常用的修饰符
 *  nextTick
 *  什么是 vue 生命周期
 *  数据响应(数据劫持)
 *  virtual dom 原理实现
 *  Proxy 相比于 defineProperty 的优势
 *  vuex
 *  vue 中 key 值的作用
 *  Vue 组件中 data 为什么必须是函数？
 *  v-for 与 v-if 的优先级
 *  说出至少 4 种 vue 当中的指令和它的用法
 *  vue 中子组件调用父组件的方法
 *  vue 中父组件调用子组件的方法
 *  vue 页面级组件之间传值
 *  说说 vue 的动态组件
 *  keep-alive 内置组件的作用
 *  递归组件的用法
 *  怎么定义 vue-router 的动态路由？怎么获取传过来的值？
 *  vue-router 有哪几种路由守卫?
 *  `$route` 和 `$router` 的区别是什么？
 *  vue-router 响应路由参数的变化
 *  vue-router 传参
 *  不用 Vuex 会带来什么问题？
 *  vuex 有哪几种属性？
 *  vuex 的 State 特性是？
 *  Vue.js 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 actions 中？
 *  什么是 MVVM？
 *  mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
 *  vue 的优点是什么？
 *  组件之间的传值？
 *  路由之间跳转
 *  vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？
 *  vue 如何实现按需加载配合 webpack 设置
 *  Vue 中引入组件的步骤?
 *  指令 v-el 的作用是什么?
 *  在 Vue 中使用插件的步骤
 *  vue 生命周期的作用是什么
 *  vue 生命周期总共有几个阶段
 *  第一次页面加载会触发哪几个钩子
 *  vue-loader 是什么？使用它的用途有哪些？
 *  scss 是什么？在 vue.cli 中的安装使用步骤是？有哪几大特性？
 *  为什么使用 key？
 *  为什么避免 v-if 和 v-for 用在一起
 *  VNode 是什么？虚拟 DOM 是什么？
 *  vue-loader 是什么？使用它的用途有哪些？
 *  请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法？
 *  vue.cli 中怎样使用自定义的组件？有遇到过哪些问题吗？
 *  聊聊你对 Vue.js 的 template 编译的理解？
 *  vue 路由跳转的几种方式
 *  vue-cli 创建自定义组件
 *  `<keep-alive></keep-alive>` 的作用是什么?
 *  vue 如何实现按需加载配合 webpack 设置?
 *  Vue 实现数据双向绑定的原理 Object.defineProperty()
 *  Vue 的路由实现：hash 模式和 history 模式
 *  Vue 与 Angular 以及 React 的区别？
 *  vue 路由的钩子函数
 *  route 和 router 的区别
 *  什么是 vue 的计算属性？
 *  vue 等单页面应用（spa）及其优缺点
 *  vue-cli 如何新增自定义指令？
 *  **…**  
    ![8f10ae2a4cad9c470fe6c34d1c47f0df.png][]

> 篇幅有限，分享部分面试题和截图，初级前端模块笔记，前端学习路线图，初级前端工程师面试题精编解析大全PDF文档（含答案解析）完整版， [点击此处免费领取！][Link 2]

### 算法篇 ###

*  五大算法
 *  基础排序算法
 *  高级排序算法
 *  递归运用(斐波那契数列)： 爬楼梯问题
 *  数据树
 *  天平找次品  
    ![71858fe81053b0bf0d802b53281c3c35.png][]

[fc6f7961d91cc86830439ea0eb78b612.png]: /images/20220829/9332543aac314ca98566ea8c6381cb50.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=MBHAeYcv
[2f86f1f29a2fe554c02a3616c4df8a06.png]: /images/20220829/c63f33d655814db285e85caca6ae0ae5.png
[73736668196f13f5f868c57fbfa05525.png]: /images/20220829/531891d90b394800bb3afd9ee7a75021.png
[9fac762a0ded742359cfbdc27f21d975.png]: /images/20220829/0a82ba87bf764bd0b62288fe88fc5916.png
[3d9fce671872d85f7dafbd34a72dcbf9.png]: /images/20220829/7b686d8970f442abac6b3b4b48687b24.png
[97ea96c69d5f02e0009c3653ebf3184e.png]: /images/20220829/520a9581251e43c9889fb1f05bf9df97.png
[8f10ae2a4cad9c470fe6c34d1c47f0df.png]: /images/20220829/339ccb9625b34afcabcdaa4515c62961.png
[Link 2]: https://jq.qq.com/?_wv=1027&k=9KYiZjNj
[71858fe81053b0bf0d802b53281c3c35.png]: /images/20220829/80a2b526772f48b6963e185f34344dd5.png