适合实习生的一个面试准备指南

从前端学习到找到一份合适的工做，大大小小的面试必不可少，春招的实习面试，以及秋招的校招面试，从面试内容到技术的深度，要求都是不同的。

先说春招的实习面试，面试内容主要仍是考察前端的基本功，若是是科班出身，对于计算机基础学科要求仍是比较多的，好比会考察操做系统，编译原理，计算机网络相关基本知识。
整体来讲，考察的方向大体有一下几种：

1. HTML/HTML5

2. CSS/CSS3

   1. 布局相关，如双飞翼/圣杯
   2. 定位
   3. 清除浮动
   4. BFC
   5. css3动画，过渡，形变
   6. 各类花式垂直水平居中
   7. flex弹性布局=
   8. 如何理解css中的流
   9. 等等太多了

3. JavaScript

   1. ecmascript语法基本功，如字符串拼接，数据类型，对象等
   2. js的做用域，做用域链，执行上下文
   3. 闭包
   4. DOM操做，什么是DOM，什么是BOM
   5. 事件模型
   6. this
   7. ES6经常使用的新增特性

   8. JS网络相关（都是重点）

      1. 什么是跨域，常见的跨域方式有哪些，是否知道nginx配置代理进行跨域
      2. CORS是什么
      3. 什么是同源策略
      4. 什么是Ajax（xhr）（比较重点）
   9. 常见的存储方式有哪些，即localstorage sessionstorage的场景以及区别
   10. Promise是什么，和setTimeout/setInterval的区别，再深一点，宏任务和微任务的区别。
   11. 什么是模块化，是否了解CMD，以及ES6的module/import
   12. 垃圾回收机制
   13. 重要-事件循环机制

4. 计算机网络

   1. post/get的区别

   2. 浏览器输入url到页面加载完毕发生了什么

      1. 启动浏览器网络线程
      2. 根据是不是有缓存浏览器进行本身的请求规则决定是否发出请求
      3. dns查询
      4. tcp创建链接

      5. 接到数据，开始页面渲染，启动浏览器渲染引擎（渲染引擎与js引擎互斥，也就是只能运行一个）

         1. 解析HTML构建DOM树
         2. 构建css树
         3. 解析html过程当中若是遇到script标签，要中止渲染，启动js引擎执行script中的代码，若是script中是src格式，那么要启动网络线程，加载js脚本，加载完毕开始执行js脚本，页面渲染一直会被阻塞。
         4. 当DOM构建完毕，css树也构建完毕，浏览器进入layout阶段
         5. 合成渲染树render-tree
         6. 下一步进入painting阶段，即页面开始绘制
         7. 结束
   3. 协商缓存vs强缓存
   4. cookie/session
   5. http1.0/http1.1/http2/https
   6. tcp模型
   7. 常见的状态码

5. 算法

   1. 各类花式排序
   2. 其余的仍是看下面给的连接吧

6. 框架相关（我擅长vue，其余尚未投入过学习）

   1. 你的技术栈
   2. vue的典型问题，见下面的vue源码揭秘
   3. vue-router如何实现，hash/history两种路由的区别
   4. vuex，状态管理是什么
   5. 组件间如何通讯
   6. 数据如何实现双向绑定
   7. 组件间数据单向流动是啥
   8. compute/watch的区别
   9. 说一下你知道的js开发模式，实现一下观察者模式
   10. webpack有了解吗，为何须要构建工具
   11. vue3.0 有了解吗

7. 性能相关

   1. 如何提升页面响应性能（主要是从网络层面思考）

      1. 减小网络请求
      2. 图片合图，减小请求的资源总量
      3. 使用CDN托管静态资源
      4. 将js脚本标签放在html的最后，避免阻塞渲染，提升首屏加载速度
      5. 避免使用没必要要的同步请求
      6. 页面图片懒加载，滑动到但是区域，才发起图片请求
      7. 图片要压缩，如今推荐webp格式，gif推荐animated webP

   2. 如何提升页面运行时性能

      1. 避免js操做DOM，由于可能会形成页面的回流或者重绘

      2. 代码层面（能够参考高性能JavaScript）

         1. 屡次使用相似于a.b.c这样的变量，最佳实践是将其保存在变量中，避免每次都要向上查询，好比a.b.c表示页面节点a的属性b的属性c。屡次使用会一直遍历DOM节点，耗时太大。
         2. 合理使用闭包，避免垃圾回收没法回收实际已经不在使用的内存
         3. 在合适的情景下释放掉绑定的事件，事件程序自己占用内存，事件太多，要不就及时释放点，要不就研究一下能不能使用事件委托。
         4. 查找DOM节点时，推荐使用querySelector/querySelectorAll。对于同一个节点的查询，这两个方法要比getElementById/getElementByClass快不少。
         5. js中避免直接操做css，代替它的是使用切换类名。
         6. 后面再慢慢补充

总结

内容还不是很完善，可是已经彻底适合实习生的面试以及本身第一阶段的学习需求了，更详细的内容能够看一下下面贴出来的面试图谱，范围广而且兼顾了必定的深度，能够研究研究。

资料连接：

1. 面试图谱-真面试宝典，可是我以为对于实习生性价比最高
2. JavaScript基础进阶--讲道理，这个多看几遍，面试官会以为你这个实习生蛮强的，其实里面有不少东西，我发现多年从事前端的同窗也未必掌握
3. 结合CSS3的布局新特征谈谈常见布局方法
4. ES6经常使用语法
5. 从输入URL到页面加载的过程？如何由一道题完善本身的前端知识体系！
6. cookie、Sessionstorage、Localstorage快速上手
7. 前端面试之CSS总结(上)
8. 浏览器工做原理 （一） ： 浏览器渲染原理 & 浏览器内核
9. 【CSS基础】Flex弹性布局