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