乐趣区

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

从前端学习到找到一份合适的工作,大大小小的面试必不可少,春招的实习面试,以及秋招的校招面试,从面试内容到技术的深度,要求都是不一样的。
先说春招的实习面试,面试内容主要还是考察前端的基本功,如果是科班出身,对于计算机基础学科要求还是比较多的,比如会考察操作系统,编译原理,计算机网络相关基本知识。总体来说,考察的方向大致有一下几种:

HTML/HTML5

CSS/CSS3

布局相关,如双飞翼 / 圣杯
定位
清除浮动
BFC
css3 动画,过渡,形变
各种花式垂直水平居中
flex 弹性布局 =
如何理解 css 中的流
等等太多了

JavaScript

ecmascript 语法基本功,如字符串拼接,数据类型,对象等
js 的作用域,作用域链,执行上下文
闭包
DOM 操作,什么是 DOM,什么是 BOM
事件模型
this
ES6 常用的新增特性

JS 网络相关(都是重点)

什么是跨域,常见的跨域方式有哪些,是否知道 nginx 配置代理进行跨域
CORS 是什么
什么是同源策略
什么是 Ajax(xhr)(比较重点)

常见的存储方式有哪些,即 localstorage sessionstorage 的场景以及区别

Promise 是什么,和 setTimeout/setInterval 的区别,再深一点,宏任务和微任务的区别。
什么是模块化,是否了解 CMD,以及 ES6 的 module/import
垃圾回收机制
重要 - 事件循环机制

计算机网络

post/get 的区别

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

启动浏览器网络线程
根据是否是有缓存浏览器进行自己的请求规则决定是否发出请求
dns 查询
tcp 建立连接

接到数据,开始页面渲染,启动浏览器渲染引擎(渲染引擎与 js 引擎互斥,也就是只能运行一个)

解析 HTML 构建 DOM 树
构建 css 树
解析 html 过程中如果遇到 script 标签,要停止渲染,启动 js 引擎执行 script 中的代码,如果 script 中是 src 格式,那么要启动网络线程,加载 js 脚本,加载完毕开始执行 js 脚本,页面渲染一直会被阻塞。
当 DOM 构建完毕,css 树也构建完毕,浏览器进入 layout 阶段
合成渲染树 render-tree
下一步进入 painting 阶段,即页面开始绘制
结束

协商缓存 vs 强缓存
cookie/session
http1.0/http1.1/http2/https
tcp 模型
常见的状态码

算法

各种花式排序
其他的还是看下面给的链接吧

框架相关(我擅长 vue,其他还没有投入过学习)

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

性能相关

如何提高页面响应性能(主要是从网络层面思考)

减少网络请求
图片合图,减少请求的资源总量
使用 CDN 托管静态资源
将 js 脚本标签放在 html 的最后,避免阻塞渲染,提高首屏加载速度
避免使用不必要的同步请求
页面图片懒加载,滑动到可是区域,才发起图片请求
图片要压缩,现在推荐 webp 格式,gif 推荐 animated webP

如何提高页面运行时性能

避免 js 操作 DOM,因为可能会造成页面的回流或者重绘

代码层面(可以参考高性能 JavaScript)

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

总结
内容还不是很完善,但是已经完全适合实习生的面试以及自己第一阶段的学习需求了,更详细的内容可以看一下下面贴出来的面试图谱,范围广并且兼顾了一定的深度,可以研究研究。
资料链接:

面试图谱 - 真面试宝典,但是我觉得对于实习生性价比最高
JavaScript 基础进阶 – 讲道理,这个多看几遍,面试官会觉得你这个实习生蛮强的,其实里面有很多东西,我发现多年从事前端的同学也未必掌握
结合 CSS3 的布局新特征谈谈常见布局方法
ES6 常用语法
从输入 URL 到页面加载的过程?如何由一道题完善自己的前端知识体系!
cookie、Sessionstorage、Localstorage 快速上手
前端面试之 CSS 总结 (上)
浏览器工作原理(一):浏览器渲染原理 & 浏览器内核
【CSS 基础】Flex 弹性布局

退出移动版