BAT 要的是什么样的前端实习生?


面试季又到了,各位小鲜肉也在着手准备基本的面试、实习。但是,有小鲜肉的思想我确实有点不敢苟同。面试无非就是问一些问题,你能答出来就行,答不出来就 pass。那如果我知道你要问哪些问题,这不就行了吗?感觉这不就是做一场考试吗?

一个学期的课程,我用 7 天学完,题目我都会做,考试分数还比那些学了一个学期的要好得多。那我为什么还要上课呢?现在,侥幸你通过了面试,知道如何做算法题,但在实际工程领域,你这样的人能解决什么问题呢?

年轻人拥有着无限可能大概是这世界上最搞笑的一句话了。本来在这个世界上在某一个领域里做好一件事情都很难的,怎么就无限可能了呢?越是对世界缺少洞见,对自己缺乏了解,越是容易被这句话感动得热泪盈眶。

最近看了一下,基本的面试题目集,发现都是一问一答的形式,这个不是和 7 天速成一模一样了吗?知其然,不知其所以然。那么,我这里也和他们一样,也给大家一份面试题目集,不过,答案并没有写出来,而是在每篇文章里(有些,就直接归纳在下面),你能看懂多少,这个题目你就能解决多少。

而面试题目也会持续更新下去

最新的内容,请访问:front-end-interview

面试问题

浏览器内核

  • 当输入一个网址时,整个过程是怎样的呢?
  • 测速时候,你一般用 Date.now 还是使用 Performance?
  • 浏览器渲染原理是什么,了解重排和重绘么?
  • Onload 事件和 DomContentLoaded 事件有什么区别么?

缓存协议

  • 基本的缓存头协议有哪些?
  • cache-control 和 expires 有什么区别呢?
  • 你能结合上面的缓存协议,来组合做一份优化吗?

CSS 布局

  • 什么叫做盒模型?
  • 实现垂直居中办法有哪些呢?
  • 网格布局中,设置元素位置方式有哪几种?
  • 如何设置行列间的间隔?

CSS3 动画

  • translate(X,Y) 是如何对应于矩阵变换的?

等同于 matrix(1,0,0,1,X,Y);

  • matrix 属性值一共有几个?分别代表什么含义?

matrix(a,b,c,d,e,f); 等同于

  • bezier 曲线有了解么?其 4 个点分别有什么含义?

P0,P1 在一条直线上,P2,P3在一条直线上。其中,P2、P3 x,y 必须在 (0,1) 范围内。而 P0 为 (0,0),P3 为 (1,1)

  • 在 keyframe-Animation 中,我们常常使用 bezier 曲线做什么用?

确定每一帧动画的变换速率。一般是有设计给出,确定整体动画的变换速度。需要注意,每一帧动画,都可以设置独立的 Animation-time-function

(CSS 剩下的就是实现效果)

浏览器安全

  • 基本的浏览器安全问题有哪些?
  • 对于 CSRF 来说有什么解决手段吗?

PWA 技术

  • PWA 中最核心的文件是?
  • SW 的生命周期是什么?
  • Sw 是怎样更新的?
  • PWA 怎么让你的网页打开最快,有什么优化策略?
  • CacheStorage 有大小限制么?如果超出限制,浏览器会怎么处理?

前端直播技术

  • 有哪些常用的直播协议
  • 这些协议的延时性怎么样?
  • 前端音视频处理技术用到了什么?
  • MSE 基本架构了解吗?
  • 音视频基本概念知道哪些?
  • .mp4 和 MPEG 有区别吗?
  • 流处理的 API 有哪些?
  • 了解过字节序这个概念吗?

安全

  • 基本的浏览器安全问题有哪些?
  • 对于 CSRF 来说有什么解决手段吗?

通信

  • 网页有哪些跨域方式的访问呢?
  • 如何实现 xhr 和 websocket 的跨域
  • Fetch 的底层架构是怎样的?
  • HTTP2 和 HTTP1.x 比起来有什么优势吗?
  • TCP 三次握手了解吗?

算法

  • 了解的基本排序算法有哪些?

快排,桶排,冒泡,选择,插入

  • 二叉树的前序,中序,后序算法有了解过吗?
  • 有了解过 Hash Table 么?他是怎么每次都能有固定长度的 hash 值呢?

通过取余

  • 这个 hash 长度有没有讲究?

最好为质数

  • 怎么解决 Hash 碰撞呢?

开链法,线性探索,简单来说就是对于相同 hash 增加一个二维数组来记录重复。

  • 如何检测括号有没有完整匹配?

通过堆栈来解决

  • 一个单词是否是回文?

通过 split 拆分字符串,通过数组倒序来实现 ( split('').reverse().join(''))。

对一个数组进行去重,算法为 O(n)?

利用对象 key 唯一的特性,判断每个数组 val(Obj[val] )是否一致即可。

  • 如何统计字符串中出现次数最多的字符?

同样利用对象 key 的唯一特性来解决。

  • 如何模拟一个 getElementsByClassName 的功能?

通过获取整个 tag ( getElementsByTagName("*")),然后通过正则匹配(区分单词边界)ClassName 即可。

框架问题

  • 了解过 redux 和 flux 的区别吗?

redux 比 flux 多了一个中间数据的管理--Reducer

  • React 生命周期了解么?

componentWillMount => render => componentDidMount

  • React 组件更新的声明周期是怎样的? ComponentWillReciveProps => shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate

全景相关

  • 了解过 UV 映射吗?

简单来说就是贴图,用来将 2D 图片映射到 3D 坐标系中。首先确定 2D 的范围,然后将指定 2D 范围图片映射到 3D 坐标中。

  • 有了解过如何利用 Three.js 实现一个 UV 映射么?

首先,通过 MeshPhongMaterial 将图片加载到纹理空间,利用 newVector2 确定纹理范围。最后,由 faceVertexUvs 来执行贴图操作。

  • 球面 3D 移动原理知道是什么吗?

简单来说就是球坐标系。通过手机滑动来改变,相机的视角位置。基本的公式为

  • 有没有试过陀螺仪来做交互呢?它有几个基本的旋转数据?

有三个旋转角 alpha、beta、gamma。绕着 Z 轴转动的夹角为 alpha,绕着 X 轴转动的夹角为 beta,绕着 Y 轴转动的夹角为 gamma。其通过 deviceorientation 事件来提供相应数据。

webpack 编译工具

  • 使用 Webpack 来导出一个 demo.js 的库,规定可以通过全局变量、require\import 等方式使用,应该设置哪些属性?

需要设置:

libraryTarget:'umd',
library:'demo'
  • 如何修改通过 import 或者 require 引用的解析路径?

通过设置 resolve 属性值中的 aliasmodules 来完成。

  • webpack plugin 和 loader 有什么区别吗?loader、plugin 常用来处理什么?

loader 主要是用来处理原始 sourceCode,比如 js、css、jsx 文件等。它通过函数式编程一层一层的处理。plugin 主要是处理非 Loader 以外的其它辅助文件。

原文发布于微信公众号 - 前端小吉米(villainThr)

原文发表时间:2018-03-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

移动端重构实战系列3——各种等分

本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 ”本系列教程为实战教程,是本人移动端重构经验及思想的一次总结,也是对sand...

1.1K7
来自专栏编程一生

看Lucene源码必须知道的基本概念

1016
来自专栏tkokof 的技术,小趣及杂念

iTween那些事儿(二)

  上次我们简单浏览了一番iTween的使用和原理,这次我们换个角度,转而看看iTween目前存在的一些缺陷以及一点点可能的改进之处,当然,这些所谓的缺陷或者改...

371
来自专栏华章科技

Ruby 和 Python 分析器是如何工作的?

你好! 我作为一名编写Ruby profiler的先驱,我想对现有的Ruby和Python profiler如何工作进行一次调查。 这也有助于回答很多人的问题:...

932
来自专栏程序员宝库

爬虫攻防之前端策略简析

文章里介绍了几个大的网站,在反爬虫过程中,采取的各式各样的策略,无不体现出前端工程师的奇葩脑洞。

1052
来自专栏吉浦迅科技

DAY31:阅读global memory

722
来自专栏SHERlocked93的前端小站

JS 桥接模式

桥接模式(Bridge)将抽象部分与它的实现部分分离,使它们都可以独立地变化。 其实就是函数的封装,比如要对某个DOM元素添加color和backgroundC...

851
来自专栏人人都是极客

Linux内核内存管理算法Buddy和Slab

有了前两节的学习相信读者已经知道CPU所有的操作都是建立在虚拟地址上处理(这里的虚拟地址分为内核态虚拟地址和用户态虚拟地址),CPU看到的内存管理都是对page...

4136
来自专栏移动端开发

Charts 常见使用类型实例

Charts是做什么的:        在我们平时的开发中,当使用到一些统计图表的时候,我们该怎样去做那些柱形的统计图、那些折线统计图、扇形统计图,亦或是你在做...

1958
来自专栏数据小魔方

sparklines迷你图系列2——Performance

昨天跟大家分享了关于sparklines迷你图插件的的第一类图表类型,尺度(Scales)图表类型,今天要分享的是第二个图表类型——在项目标管理中使用频率非常高...

2726

扫码关注云+社区