最近也在准备面试,就把前端面试中常考的知识点梳理了出来,为了复习起来更方便,更有针对性,也希望能够帮到寒冬面试的一些朋友。本文包括 CSS,JS,ES6,浏览器,服务端与网络,VUE,HTTP,webpack 和 算法 十个部分。如果按照本文的思路来准备面试,您定会有所收获。
1. CSS
1、怎么实现三栏布局?
- 浮动(float)
- 定位(position)
- flex 布局
- table-cell
- 网格布局
- bfc (set middle area overflow is hidden)
2. 垂直居中
个人觉得问这个的挺多
line-height: height
absolute + transform
居中为什么要使用 transform(为什么不使用marginLeft / Top),这是一道重绘重排的问题。flex + align-items: center
我会对 flex 容器以及 flex 项目的每个 css 属性都了解一遍,并且写了一些小 demo。absolute + top:0 bottom:0
3、盒模型
4. css单位
5. css选择器
6. 层叠上下文
7. 常见页面布局?响应式布局?
8、BFC
- 概念
- 如何触发
- 怎么应用(清除浮动)
9. css预处理器
一般回答 变量 / 嵌套 / 自动前缀 / 条件语句 / 循环语句
10. css3新特性
animation和transiton的相关属性,animate和translate
display哪些取值
11、相邻的两个inline-block节点为什么会出现间隔,该如何解决
12、meta viewport 移动端适配
13、CSS实现宽度自适应100%,宽高16:9的比例的矩形
14、rem 布局的优缺点
15、画三角形
16、1px 边框问题
2、JavaScript
1、数据类型的分类和判断
2、原型、原型链、继承、构造函数、实例
3、有几种方式可以实现继承,用原型实现继承有什么缺点,解决办法
4、作用域、作用域链、闭包
5、arguments 对象
6、Ajax的原生写法
7、对象深拷贝、浅拷贝
8、图片懒加载、预加载
9、实现页面加载进度条
10、this关键字
11、函数式编程
12、手动实现parseInt
13、为什么会有同源策略
14、怎么判断两个对象是否相等
15、事件模型(事件委托、代理,如何让事件先冒泡后捕获)
16、window 的 onload 事件和 domcontentloaded
17、for...in 迭代和 for...of 有什么区别
18、函数柯里化
19、call apply区别,原生实现bind
call,apply,bind 三者用法和区别:角度可为参数、绑定规则(显示绑定和强绑定),运行效率、运行情况。
21、async/await
22、立即执行函数和使用场景
23、设计模式(要求说出如何实现,应用,优缺点)/单例模式实现
24、iframe的缺点有哪些
25、数组问题
数组去重,数组常用方法,查找数组重复项,扁平化数组,按数组中各项和特定值差值排序
26、BOM属性对象方法
27、服务端渲染
28、垃圾回收机制
29、eventloop,进程和线程,任务队列
30、如何快速让字符串变成已千为精度的数字
3. ES6(web最新标准)
1、let、const 声明
2、解构赋值
3、声明类与继承:class、extend
4、Promise 的使用与实现(原理)
5、generator(异步编程、yield、next()、await 、async)
6、箭头函数 this 指向问题、拓展运算符
7、module
8、map 和 set 怎么用,如何实现一个数组去重,map数据结构有什么优点?
9、ES6 怎么编译成 ES5,css-loader 原理,过程
10、ES6 转成 ES5 的常见例子
使用 es5 实现 es6 的 class
4. 浏览器
1、输入url到展示页面过程发生了什么?
2、重绘与回流
重绘(repaint): 当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此 损耗较少
回流(reflow): 当元素的尺寸、结构或触发某些属性时,浏览器会重新渲染页面,称为回流。此时,浏览器需要重新经过计算,计算后还需要重新页面布局,因此是较重的操作。会触发回流的操作:
* 页面初次渲染
* 浏览器窗口大小改变
* 元素尺寸、位置、内容发生改变
* 元素字体大小变化
* 添加或者删除可见的 dom 元素
* 激活 CSS 伪类(例如::hover)
* 查询某些属性或调用某些方法
* clientWidth、clientHeight、clientTop、clientLeft
* offsetWidth、offsetHeight、offsetTop、offsetLeft
* scrollWidth、scrollHeight、scrollTop、scrollLeft
* getComputedStyle()
* getBoundingClientRect()
* scrollTo()
回流必定触发重绘,重绘不一定触发回流。重绘的开销较小,回流的代价较高。
3、防抖与节流
4、cookies、session、sessionStorage、localStorage
5、浏览器内核
5. 服务端与网络
1、常见状态码
2、缓存
200 From cache 和 200 ok
400,401,403状态码分别代表什么
浏览器缓存
3、cookie, session, token
4、前端持久化的方式、区别
5、DNS是怎么解析的
6、cdn
7、计算机网络的相关协议
8、http/https/http2.0
9、get post区别
10、ajax、 axios库
11、tcp三次握手,四次挥手流程
12、跨域
13、前端安全XSS、CSRF
14、websocket
15、Http请求中的keep-alive有了解吗
16、网络分层
17、即时通信,除了Ajax和websocket
18、模块化,commonJS,es6,cmd,amd
6. Vue
1、vue解决了什么问题
2、MVVM的理解
3、如何实现一个自定义组件,不同组件之间如何通信的?
4、nextTick
5、生命周期
6、虚拟dom的原理
7、双向绑定的原理?数据劫持?
8、组件通信
父->子
子->父
非父子组件
9、Proxy 相比于 defineProperty 的优势
10、watch computed区别
11、virtual dom 原理实现
12、vue-router(hash, HTML5 新增的 pushState
单页应用,如何实现其路由功能---路由原理
vue-router如何做用户登录权限等
你在项目中怎么实现路由的嵌套
13、vuex的理解
前端性能优化
页面DOM节点太多,会出现什么问题?如何优化?
如何做性能监测
SEO和语义化
这个没被问过
微信小程序
微信小程序和h5差异,如果有开发weex的经验,可能会加上weex
7. git
- 基本操作
git rebase
vsgit merge
- git merge
- 记录下合并动作 很多时候这种合并动作是垃圾信息
- 不会修改原 commit ID
- 冲突只解决一次
- 分支看着不大整洁,但是能看出合并的先后顺序
- 记录了真实的 commit 情况,包括每个分支的详情
- git rebase
- 改变当前分支 branch out 的位置
- 得到更简洁的项目历史
- 每个 commit 都需要解决冲突
- 修改所有 commit ID
回答时候没有答出很多,这是后面总结,深刻发现日常做总结的必要性,一直觉得自己是了解的,等到总结时候才发现有一些 point 还是不清楚的。
- 修改 commit message
8. HTTP
1. 跨域
基本都被问同源策略以及引申到跨域来,一般我会说 CORS 以及 jsonp,CORS 会从简单请求跟非简单请求区分开,再讲 options 请求的意义。
2. HTTP 报文
请求行 + 头部信息 + 空白行 + body
有被问到说空白行的意义,我一直以为就是纯粹来标识 headers 的结束,但是面试官说不止这个功能,我后面看了HTTP 权威指南
也没有找到,Stack Overflow
也没找到。。。希望有人知道可以跟我说一下。不过有可能是我听错了题目,毕竟是电话面试。
3. cookie session
一般会问两者的差别,以及引申到 sessionStorage, localStorage, cookie 区别
4. 从输入 URL 到页面加载全过程
一般我会答链接的大部分步骤,按照理解来,这里面我被问到的点有:
- 缓存,分为强缓存、协议缓存,一般会问到 304 的表现,以及再引申到 301 302 的区别,我会再说 307 的区别。
- 三次握手
- HTTPS 的工作原理
- CDN 的工作原理,以及刷新缓存的原理。
- 浏览器渲染的步骤
- 重绘重排的概念,以及最佳实践。一直都知道应该用 transform 代替 margin,但是一被问原理,就不太清楚,查了资料是对 translate3d 的元素进行 GPU 加速。
- 会因为 JS 是单线程而问到阻塞的问题,引申到 async defer 等属性。
- status code 有哪些,我们是严格按照 restful 的规范来设计接口,所以这个问题我一直觉得很简单,但是被问到不少次。我记得趣头条的笔试就有,我会把用过的按照 2xx(200, 201, 204, 206) 3xx(301, 302, 304, 307) 4xx(400, 401, 403, 405) 5xx(500, 502, 504) 来分类,我偶尔写写 rails,所以对对应的名词都比较熟悉 贴一篇 list of rails status codes
- DNS 解析过程
5. xss,csrf
- xss 注入攻击
- 转义
- csrf (cross site request forgery)
- Get 请求无副作用
- cookie httponly
- cors (origin not *)
我是通过看 这篇文章 对安全有更多了解的,推荐一下。
6. sse( server sent event)
9. 打包工具 webpack
1、打包原理
2、打包插件
3、webpack热更新原理
4、优化构建速度
10. 算法
算法一般考得不难,不过基本每一次面试都会考到,常考的算法有:
1、排序算法
2、字符串中找出最长最多重复的子串
3、动态规划,参见背包问题
4、层次遍历二叉树
5、加油站问题(贪心算法)
6、二分法
7、单链表反转
8、取1000个数字里面的质数
9、找出数组中和为给定值的两个元素,如:[1, 2, 3, 4, 5]中找出和为6的两个元素。
10、线性顺序存储结构和链式存储结构有什么区别?以及优缺点