前言

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

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

完整学习路线图：点击此处免费领取

前端初级工程师面试题

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

HTML 篇

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

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 ，如何使用？
• ......
  

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 判断类型
• 数组常用方法
• 数组去重
• 闭包有什么用
• 事件代理在捕获阶段的实际应用
• 去除字符串首尾空格
• 性能优化
• ......
  

浏览器篇

• 跨标签页通讯
• 浏览器架构
• 浏览器下事件循环(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 高效
• 高性能动画是什么，那它衡量的标准是什么呢？
• ......
  

服务端与网络

• 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 可靠传输的实现
• 停止等待协议的原理
• 流量控制的目的？
• 如何实现流量控制？
• ......
  

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 如何新增自定义指令？
• ......
  

算法篇

• 五大算法
• 基础排序算法
• 高级排序算法
• 递归运用(斐波那契数列)： 爬楼梯问题
• 数据树
• 天平找次品
  

最后：