- Published on
前端学习路线
- Authors
- Name
- 游戏人生
前端学习路线
HTML
- html语义化标签（对语义化的理解）
- 文档声明的作用？
- meta标签
- html5新特性
- src和href的区别？
- 行内元素，块级元素的区别？
- link和@import导入样式的区别？
- 常用的图片格式和应用场景
- 常见的浏览器内核
- srcipt中defer和async的区别？
- 需要注意哪些SEO
CSS
- css选择器
- css选择器权重
- 盒子模型（标准盒子模型和怪异盒子模型）
- margin塌陷和margin重叠现象
- 如何清除浮动
- css定位属性position（文档流）
- flex布局（grid布局） （必问，可以看阮一峰老师的那篇文档）
- css单位的区别？(px, em, rem, vw, vh)
- display相关属性
- BFC(高频)
- 常见布局方式 【 重点 】
- 居中的实现方式（必问）
- 三栏布局：圣杯布局和双飞翼布局
- css画三角形
- 媒体查询
- 移动端响应式布局方式
- less和scss/sass的基本使用
- 回流和重绘
- z-index压盖顺序
- 过渡与动画
- 伪类和伪元素的区别
- before和after双冒号和单冒号有什么区别？
- css3新增了哪些特性？
- css雪碧图的作用？
- display:none和visibility:hidden、opacity: 0的区别
- opacity和rgba区别
- line-height如何继承？
- 如何脱离文档流
- 怎么让chrome支持12px以下的文字
- 怎么画宽度为0.5px的线
Javascript(全都是重点）
- 数据类型（原始数据类型和引用数据类型，堆栈内存），数据类型检测和数据类型转换
- 数组常用方法、对象常用方法
- 类数组和数组的区别和转换，数组的检测方式，数组去重和排序
- 函数执行机制和执行上下文，执行上下文栈（普通函数，立即执行函数，箭头函数、构造函数）
- 闭包作用域（变量提升，arguments, 作用域与作用域链，闭包的应用场景，闭包优缺点）
- 内存泄漏和垃圾回收机制
- this指向的规则（call/bind/apply的使用)
- new和构造函数
- 原型与原型链的理解
- 继承实现的方式和区别？
- 深拷贝与浅拷贝
- 事件循环机制（任务队列，微任务，宏任务，同步，异步，进程和线程，浏览器线程）
- JS异步解决方案（回调函数、Promise、Generator、async、定时器）
- DOM选择器
- 常见DOM操作（增，删，改）
- 事件流的过程（事件冒泡和事件捕获）、事件处理程序（DOM0级事件处理程序和DOM2级事件处理程序）、事件对象、事件委托
ES6
- let、const、var的区别
- 块级作用域
- 暂时性死区
- 解构赋值
- 箭头函数和普通函数的区别（this的指向）
- Symbol概念和作用
下面几个可以适当掌握
- Set和Map数据结构
- WeaSet和WeakMap
- Proxy
- Reflect对象
- Promise（Promise的链式调用，Promise的状态、Promise的方法）【必考】
- Generator及其异步方面的应用
- async函数和await
- class基本语法及继承
- 模块加载方案比较（CommonJS和ES6的Module）
- Iterator和for...of（Iterator遍历器的实现）
js面试题补充
- addEventListener和onClick()的区别
- new和Object.create()的区别
- DOM的location对象
- Object.defineProperty()的使用
- Array.sort()方法与实现机制
- 函数柯里化、组合函数
- BOM属性对象方法（scroll/client/offset）
- null和undefined的区别
- ==数据类型转换的规则
- 数组高阶函数、some、every、filter、map、reduce
- mouseenter和mouseover的区别？
- 伪数组转为数组的方式
- 遍历对象属性的方法
- 判断是否是对象的私有属性：obj.hasOwnProperty()
- 获取对象的所有实例属性和函数，不包含原型链继承的属性和函数 Object.getOwnPropertyNames()
- 获取对象可枚举的属性，不包含继承属性 Object.keys()
- 合并数组的方法
- document和window的区别
- Object.is和===的区别
- isNaN和Number.isNaN()的区别？
- 0.1 + 0.2 !== 0.3
- 判断一个变量是数组还是对象
- 属性访问时点操作符和[]中括号操作符的区别
- 严格模式
- 扩展运算符与rest运算符的区别
- Object.assign()
- Map和普通对象、WeakMap的区别？
- 循环语法比较及使用场景（for、forEach、map的区别/ for...in、for...of的区别）
- forEach可以中断吗
- forEach和map方法的区别?
- e.target和e.currentTarget的区别？
- 阻止事件冒泡event.stopPropagation()
- event.stopPropagation()和stopImmediatePropagation()
- HTMLCollection和NodeList的区别？
Ajax
- Ajax的请求过程(手写ajax)
- POST请求格式
- 跨域、同源策略及跨域实现方式和原理
- JSONP, CORS
- JSON序列化和反序列化
- Axios的使用
- Ajax和Fetch,Axios有什么区别
手写题
- new 【高频】
- call/bind/apply
- Promise.all 【 大厂高频 】
- instanceof
- 柯里化函数，组合函数
- 防抖和节流【必考】
- Ajax【必考】
- 深拷贝与浅拷贝【必考】
- 继承【必考】
- 数组去重，数组排序【小公司必会】
- 数组扁平化
- 字符串中出现最多次数的字符
- 字符串反转
- 字符串驼峰转换
- 实现trim过滤字符串空格
- 事件委托
- 解析url中的key
- 正则匹配手机号
Vue
vue生命周期(父子组件)
- created和mounted的区别
- 在那个生命周期中获取数据
computed/methods/watch的区别
v-show和v-if的区别
v-if和v-for优先级
v-for为什么要用key
组件通信
插槽的使用
nextTick的使用和原理
常用的指令
scoped的作用
常用的修饰符
keep-alive的作用？keep-alive中的生命周期钩子
vue如何监听对象或者数组属性的变化
面试高频
- 说说你对vue的理解？
- v-model的实现原理
- 双向数据绑定的原理
- MVVM和MVC的区别？
- 虚拟DOM和diff算法
- Proxy和defineProperty的区别
- Vue3.0为什么要使用proxy
- Composition API
路由相关
- hash和history模式的区别？
- SPA单页面应用的优缺点
- params和query传递参数的区别
- 路由钩子函数/路由守卫
- 路由懒加载
- router和route的区别
- 编程式导航和声明式导航
- vuex的作用？
- state/mutation/action/getter/module的作用
- mutation和action的区别？
React
- 生命周期
- 类组件和函数式组件的区别
- setState是同步更新还是异步更新
- 高阶组件
- 虚拟DOM和diff算法
- key的作用
- React Hook
- Redux工作流程
Webpack
- webpack的基础配置和基本概念
- loader和plugin的不同
- 常用的loader和plugin?
- webpack的proxy配置解决跨域问题
网络/浏览器
- TCP/IP网络分层
- tcp和udp的区别和使用场景
- 三次握手和四次挥手
- HTTP请求方法
- GET和POST的区别
- HTTP请求报文和响应报文、请求头和响应头
- HTTP状态码 【 高频 】
- HTTP缓存 【 高频 】
- HTTP1.0/1.1/2.0/3.0之间的区别？
- HTTPS和HTTP之间的区别？
- 对称加密和非对称加密
- 对Keep-Alive的理解
- DNS查询过程
- CDN
- XSS攻击及防御
- CSRF攻击及防御
浏览器页面渲染过程
浏览器缓存 （强缓存和协商缓存）
浏览器存储
- localStorage、sessionStorage、cookie之间的区别？
从url输入到界面展示，发生了什么？
重排和重绘
浏览器进程
浏览器同源策略
- 进程和线程之间的区别
- 进程通信
- 死锁
其他
- 项目性能优化方案
- CDN
- 懒加载
- 防抖和节流
- 回流与重绘
- 图片优化
- webpack优化
- 代码优化
补充
- 发布-订阅设计模式
- 函数式编程
- git的使用 [重要]
- 代码规范：eslint