初级前端开发面试总结

前端面试总结先说背景，本人2018年7月毕业，去年十月校招到今年10月一直在做前端开发工作，年前打算换工作，就重新梳理下面试考点总结包含： JavaScript基础，CSS基础，常见算法和数据结构，React&Vue框架，计算机网络相关知识，可能有的点很细，有的点很大，参考个人情况进行总结，方便对知识进行回忆，有的列举出了参考答案，有的则在文末列举了优秀回答闭包闭包的概念？闭包的作用？使用闭包的注意点？事件机制事件3个阶段 事件捕获阶段，处于目标阶段，事件冒泡阶段默认为事件冒泡ES6let const class 模块化 等等常用ES6知识箭头函数作用，此处可以扩展考察 this指向问题set map 相关原型链4种继承方式new 原理深拷贝&浅拷贝数据类型基本数据类型和引用数据类型跨域同源策略CORSJSONPIframe + document.domain安全CSRF 跨站请求攻击 （原理，保护措施 referer token 验证码，设置cookie的httponly属性，post请求等等XSS （同上HTTP 方法几种方法介绍axios库输入URL到页面成功渲染的过程经典问题 (任何一个步骤都可以引申来考察DNS解析 （具体的解析过程TCP连接http请求 (状态码考察返回数据 浏览器渲染页面 （页面渲染过程上面这些模块下面一一例举DNS解析过程概念浏览器缓存系统缓存路由器缓存域名提供商顶级域名服务器主域名服务器浏览器页面渲染加载html构建页面dom树解析css 构建渲染树渲染树构建完成后，将渲染树绘制到屏幕（回流和重绘JS解析，会阻塞dom树的构建状态码http缓存 304强制缓存 （expires cache-control对比缓存 （ Etag & if-none-match last-modified & if-modified-since301 302 区别（永久性重定向（带缓存和临时性重定向）垃圾回收引用计数标记清除TypeScript使用就不说了，总结下优缺点增加了代码的可读性和可维护性 编译时错误提示包容性 .js 可写为 .ts拥抱ES6， 框架支持学习成本高如：类，泛型，接口函数式编程概念 相同的输入 永远的到相同的输出，且没有任何副作用副作用 比如 ajax请求 改变全局变量优缺点 1.缓存性 2. 可移植性 3. 并行性 不需要共性内存柯里化的概念，作用（ 最好不要答装逼 我还没想到更好的答案我列举一个知乎答案： 统一接口，封装的每一层都干干净净，逻辑表现清楚IndexedDB特点区别LocalStorage SessionStorage(1.同步 2.存储大小)WebSocket概念特点readyState排序算法常见的排序算法 复杂度 稳定性快速排序 不稳定 空间复杂度O(logn) 平均时间复杂度O(nlogn) 最差…O(n2)选择排序 不稳定 空间复杂度O(1) …所有都是O(n2)冒泡排序 稳定堆排序 不稳定 空间复杂度O(1) …所有都是O(nlogn)插入排序哈希表数组和链表的特点搜索插入和删除的时间复杂度O(1)二叉树先序遍历中序遍历后序遍历层序表里树高链表翻转链表AVL树 二叉查找树特点O(logn)精度丢失问题0.1 + 0.1 != 0.2 (为什么计算机内部的信息都是由二进制存储的，但是有些浮点数没法用二进制精准的表示出来小数转整数Math.round() 四舍五入Math.ceil() Math.floor()生成随机数引入 Math.random() [0,1) 的随机小数parseInt(Math.random()(m-n)+n) [n, m)Math.round(Math.random()(m-n)+n) [n, m]数组去重var set = new Set([1,1,2,2,3,3,3,3]) var arr = […set]indexOf如何判断数组是数组Array.isArray(arr) ES5的方法arr instanceof Arrayarr.proto.constructor === Array()Object.prototype.toString.call(arr) === ‘[object Array]’ //数据原型和对象原型定义的toString 方法不同Object.prototype.toString.call(obj) === ‘[object Object]’ // 如上Object.prototype.toString.call(null) === ‘[object Null]’ // 推荐此方法数组指定个数去重 findDuplicate(num)es6 Set Map 相关操作反转字符串JS异步异步解决历史(Ajax的进化历程)Promise，Async/Await 用法 Promise 缺点Promise API Promise.all & Promise.raceAjaxReadyState (0, 1, 2, 3, 4) 5中状态js实现ajax优缺点单/双向数据绑定MV** 概念vue/react 数据绑定机制Vue生命周期父子组件通信双向数据绑定vm.$nextTick原理React生命周期Virtual-dom技术以及改良后的Diff算法对比Vue.jsPosition属性几种属性值Box-sizing 属性content-box border-box盒模型 W3c标准盒模型和IE盒模型两栏布局 三栏布局常见自适应布局写法回流和重绘概念举例如何避免 eg: DocumentFragment, Absolute浮动伪元素和伪类清除浮动常见3种方法隐藏元素display nonevisibility hidden 区别垂直居中布局常见的垂直居中布局方法前端性能优化列举常见前端性能优化方法列举一些优秀回答 输入URL你可以看到什么？ HTTP缓存 域名解析过程 vue生命周期 React生命周期 CSRF攻击 水平垂直居中布局