前端阶段性知识点总结

前端阶段性知识点总结

2020年4月的一个阶段性总结,内容已脱敏

总的来说一般 初试考察前端知识覆盖的广度,复试根据项目或者知识点,考察对知识的理解程度、深度。


轮数太多,有些重复,写起来比较乱,就按知识点划分来说题目把,时间长脑子也记不住了,都是被问到的实际问题

HTML

  • html语义化
  • input的type属性(说的越全越好)
  • canvas

CSS

推荐书籍《CSS揭秘》《CSS世界》。API的话直接查MDN还快些,权威指南啥的就没必要买了

  • 盒模型
  • rem 和 em区别,rem的缺陷
  • css三有哪些新特新(说的越全越好)
  • css实现三角形
  • 选择器权重
  • css动画
  • css有哪些定位
  • 绝对定位,相对定位,fixed定位…
  • 水平垂直居中(越多越好)
  • 预处理器 less,sass,styus 啥的
  • css的性能优化
  • 重绘回流
  • 媒体查询,响应式布局方案
  • 栅格化布局
  • flex布局,(grid布局,实践得比较少,好多忘了,面ctve的时候说了,自己打脸😂)
  • 行内元素,块级元素,行内块元素区别

JavaScript

推荐书籍:《JavaScript 高级程序设计》经典必读,重点前8章,有点年代了。《JS忍者秘籍》寒假看的,爱不释手。《JavaScript设计模式》腾讯alloyteam团队出的,没看完,疫情这么久,后悔没带回家。《你不知道的 JavaScript》都说好,但是我觉得翻译得有点生涩,可能是我水平不够把。《深入理解 ES6》高程原作者写的,《ES6 标准入门》阮一峰写的,API的话直接查MDN还快些,犀牛书就不必要买了,买了当字典用。

  • 代码规范
  • 事件流、事件委托、阻止事件冒泡
  • es6新特性(会多少说多少,越多越详细越好)
  • var,let,const赋值的区别,const原理
  • 块级作用域
  • forEach,for in, for of, map,等遍历方法的区别,各自哪些适用
  • es6对比以前的优势
  • promise实现(最好要会手写)
  • async await 原理
  • 怎么解决异步回调
  • set map
  • map WeakMap区别
  • common.js amd cmd
  • common.js和ES6中模块引入的区别
  • 基本数据类型与引用数据类型,堆、栈区别联系
  • null,undefine区别
  • 对引用类型深层对象的一个比较(考察递归)
  • 怎么判断数组类型 instansof判断数组的缺陷(直接说它的实现原理)typeof判断数组的缺陷
  • 闭包,概念,原理,缺点,实践
  • 作用域,作用域链
  • 原型,原型链(理解其中的关系)
  • 继承,各种方式的原理,寄生组合继承(要会手写实现,考察对原型的理解)
  • this的理解,怎么指向,隐士绑定,显示绑定,new…
  • call,bind,apply原理实现(理解原理然后要会手敲函数实现)
  • 构造函数方法 new的实现
  • setTimeout,requestAnimationFrame
  • JS执行机制
  • 异步宏任务,微任务(要清晰知道浏览器的事件流)异步代码的执行顺序,事件循环
  • 哪些宏任务,哪些是微任务具体
  • 深克隆,钱克隆区别
  • 手写实现深克隆(碰引用类型递归或者树的遍历)
  • == 和===的区别
  • +、== 类型转换规则,(toPrimitive过程),引用类型转数字,转字符串规则
  • ||和&& (条件判断和逻辑判断有区别,当时数美科技题)
  • DOM文档对象模型
  • BOM浏览器对象模型,有哪些属性方法(用的少,容易忘)
  • ajax原理,手写实现
  • fetch原理,与ajax区别,优点
  • TypeScripte相对于JavaScript的优势
  • 垃圾回收机制
  • 防抖节流 (要会手写,以及合在一起,这个没考我,但是有在项目优化中说)

VUE

官网文档的API全都要熟知,整个原理实现要会,推荐小册《剖析 Vue.js 内部运行机制》染陌大哥写的。源码看过最好,不强求。《vue技术内幕》前面写得更详细,逐行解析,后面的看《VUE技术揭秘》黄奕老师写的,有配套视频

  • 生命周期
  • mounted 和 create具体什么时候用这个钩子,区别,
  • 用了keep-alive的activate和deactivated
  • mvvm设计模式,mvc设计模式理解,区别
  • vuex原理,state,mutations,getters,action
  • vue-router路由原理,history,hash
  • compile模板编译流程,怎么转为的render函数
  • 响应式原理(基于defineProperty这个方法实现)
  • vue3的proxy相对于defineProperty有哪些优化
  • 依赖收集,动态更新过程
  • v-model 原理
  • Virtual DOM优势,异步更新流程
  • 数据更新的优化diff算法patch过程,patchVnode,updateChildren 啥的,熟知流程
  • v-if和v-show区别
  • 组件间的传值,通信(说的越多越好)
  • computed和watch区别
  • 为啥v-for要加:key,为什么不推荐用index做为key
  • vue中遇到哪些难点,坑
  • element组件遇到过哪些bug
  • vue和小程序区别
  • 观察者模式,发布订阅模式

计算机网络

网络这块,只看过《图解HTTP》,还有上课学的

  • OSI7层模型,会分别说有哪些协议在哪层
  • 从浏览器输入网址到渲染完成的过程
  • DNS域名协议,查询过程,原理
  • http和https区别
  • http2新特新(越详细越好)
  • 长连接keep-alive,原理,优势
  • 多路复用
  • 头部压缩
  • tls/ssl加密过程,详细讲清楚
  • 中间人攻击
  • jwt
  • cookie session
  • sso单点登录、浏览器鉴权、多个站点共享登陆
  • 缓存,强缓存(Expires、cache-control)协商缓存(Last-Modified 和 If-Modified-Since、Etag 和 If-None-Match,ctve就是被这个问倒了,后面看了一堆文章)
  • 设置cookie
  • 浏览器同源策略
  • 跨域(方法越多越好),自己怎么实现解决
  • cors的配置项
  • TCP三次握手,四次挥手
  • 为什么要三次握手,中间断了会怎样
  • TCP UDP区别
  • 各种状态码 (要详细单个讲)
    1××开头 - 信息提示
    2××开头 - 请求成功
    3××开头 - 请求被重定向
    4××开头 - 请求错误
    5××开头 - 服务器错误
  • 200除了返回成功是这个,还有吗(协商缓存啥的)
  • 详细说一下 304 缓存啥的 etag,If-Modified-Since 浏览器缓存机制
  • get post区别,何时使用
  • 小程序的登陆流程,鉴权

网络安全

  • 各种攻击(主要是预防的方案)
  • XSS概念,具体哪些攻击分类(存储型,反射型,DOM 型 ),解决方案
  • SCRF概念,怎么避免,解决方案
  • 同源检测,Token,双Cookie验证
  • 除了XSS,SCRF还有哪些攻击

工程化

只照着文档配置过,平常一直用的脚手架

  • webpack打包原理
  • 除了webpack,还用过哪些打包软件
  • plugin 和 loader 原理区别
  • 有没有设计过通用 脚手架
  • babel转换es5原理

性能优化

主要自己实践,理论空说没用

  • 图片懒加载
  • SSR
  • 浏览器缓存
  • 压缩
  • cdn原理
  • CNAME
  • 监控埋点
  • 分包加载
  • 防抖节流

算法

推荐刷 leetcode探索里基础算法,《剑指offer》,不一定要刷难题,但是常见题简单题一定要多手写几遍。写出来的时间复杂度高,面试官一样DISS,学习最优解。手写的各种JSapi,二叉树,链表,数组,是重点。之前有些烦各种api记不住,刷题刷多了,数组字符串那些方法就自然记住了

  • 各种排序(主要是快速排序和归并排序)区别,时间复杂度
  • 最大最小堆
  • 找一堆数中最大的几个,时间复杂度要优,数据量巨大
  • 递归,迭代思维
  • 正则
  • 数组拍平
  • 数组去重
  • 深拷贝
  • JS怎么实现二叉树
  • 二叉树前中后遍历,广度深度(递归,迭代)
  • 删除一个深层对象中的空值
  • 寻找质数
  • 栈和队列的区别
  • 柯里化

项目

  • 遇到的难点(重点说明解决过程)
  • 业务中性能优化
  • 用Vue遇到过难以解决的问题

git版本控制

  • git原理
  • 公司使用git流程
  • git规范
    好多细节记不起来了,就不写单个的了

复盘

应聘的岗位是前端开发,面试流程持续一个多月,挂来挂去,加起来面了十轮,tx的好处就是,面试评价和简历还行就有其他部门捞起的机会,感谢

部门二

初试一面(过)
复试二面(过)
复试三面(过)
GM四面(挂)

自我感觉还行,但就是挂了,大老板看不上我?还是有更合适人选成了备胎?总的来说就是自己能力不突出,不够优秀。挂你是本分,给过是情分

部门一

初试一面(过)

  • 说一下前面挂了,自己哪些知识不足
  • 我说了性能优化,node方面,埋点。。。
  • 二分查找时间复杂度
  • 归并排序,快速排序
  • 打电话打了一半,上牛客手写代码*
  • 深拷贝
  • 字符串中连续重复字符(正则写出来了,match方法忘了,就只能换个思路用循环)
  • 把一个深对象中空属性删掉 (递归,删除对象属性 delete方法忘了,只能创一个新的空对象,赋值)

复试二面(挂)

我说了node不太了解,大半年没碰了,简历也没写,就一个大半年前的项目有用一点点。但是一直在问的服务端的问题,为什么要这样虐待我🙃

先是问问人生,实习时间,嘘寒问暖,然后开始正式面试,从我的项目博客入手

  • node的evenloop
  • io流
  • 文件读取。
  • 说下node的模块,会多少说多少。各个模块干什么的?
  • 说然后抓住网络模块,要我说一下原生建立连接过程。
  • 说下common.js原理。
  • 为什么服务器用竞争对手阿里云不用腾讯云的?不想来是吗?我们这边hc比较紧。
  • 说一下这个项目的数据库架构。
  • 为什么要选择mongodb,为什么不用mysql
  • 你后端怎么部署的,
  • 说下这个项目整个框架的解析,接口啊,数据库啊这些东西。说着说着,我就劲量转到项目前端的vue,他就打停了
  • 你这个项目用koa是吧?
  • 为什么不用一个express用koa?说一下他们的区别。
  • 我说了个洋葱圈中间件。深挖说下洋葱圈模型原理。😥
  • 如果用户量激增等情况,node瘫痪你怎么解决
  • mongo宕机怎么解决?
  • nginx怎么配置的?配置细节

最后再手写两个算法

  • 深拷贝 (前面对我不会的问题连环轰炸,导致整个人头发蒙,一面才面过的,思路却老是断)
  • 寻找质数(直接问的我博客写过的,但是博客记录的是最优解,我面试记不起来,写的时间复杂度(n²),搬起石头砸自己的脚😭)

部门三

初试一面 (?)

一面是IEG的人,不知道是挂了,还是转岗,还是交叉面试

复试二面 (过)

面委会三面 (过) 两个人一起面面我

  • 自我介绍
  • Js看过哪些书
  • 问学校专业课学了哪些前端相关的
  • 我项目中的时钟倒计时圆形进度条实现
  • setTimeout与requestAnimationFrame 区别
  • 动画延迟,性能
  • 内存泄漏,怎么解决
  • 重绘回流,具体哪些熟悉导致重绘,哪些属性回流
  • CSS动画,具体实现
  • Js动画和Css动画区别
  • canvas动画
  • canvas与html的关系区别
  • MVVM设计模式思维
  • vue与原生JS区别
  • 小程序与VUE区别
  • 代码规范
  • 对未来三年自己的一个技术规划(不要说工程化啥的成熟的技术,说一些探索的技术)
  • 说一个你觉得优秀的产品
  • 用户量很大,他担心我的代码质量(从实习期的代码规范checklist,说到自己有坚持做的算法逻辑)

    HR四面

  • 自我介绍(给hr做介绍的话,学习经历努力过程,等非技术相关的,偶尔带两个技术名词,不要一个劲说技术细节)
  • 说说你的社区商城的项目驱动
  • 说说你的实习过程中的收获
  • 说说你的工作室
  • 说说你遇到的最困难的一个地方
  • 来XXX公司的目的
  • 实习时间

总结

  1. 面试必问题:自我介绍,可以先用心写个草稿,面试就不会说的没思路逻辑了
  2. 精通一个细分领域才能有深度,学的浅的东西,自己简历就不要写了,面试被问,直接说:“不会,但是以后会学”,以免自己挖坑
  3. 积累源于平时,一些简单的算法思维,长时间刷才有的深刻,尤其是面试手写,不能查资料,有紧张减少一半思路,那就要滚瓜烂熟了
  4. 一步一个脚印,凭实力说话,不要不懂装懂,虚心学习就是了