腾讯实习一面 | 前端
-
做个简单的自我介绍?
-
学习的方式 / 途径?
- 现代 JavaScript 教程
- MDN
- 阮一峰 ES6 教程
- 各种官方文档
- 逛技术社区
- 不是很喜欢看视频学习
-
说活你最熟悉的技术?
- 这里我说了 JS、CSS、H5 老三样
- 基本是想到什么就说了什么
- 面试官把主动权都给我了,一直在听我说,也没有打断我
-
说说
CDN
的原理- 只说了 CDN 的功能,原理上答不上来;
以下是网络上的答案:
假设您的加速域名为 www.a.com
,接入 CDN
网络,开始使用加速服务后,当终端用户(北京)发起HTTP
请求时,处理流程如下图所示。
- 当终端用户(北京)向
www.a.com
下的指定资源发起请求时,首先向LDNS(本地DNS)发起域名解析请求。 - LDNS检查缓存中是否有
www.a.com
的IP地址记录。如果有,则直接返回给终端用户;如果没有,则向授权DNS查询。 - 当授权DNS解析
www.a.com
时,返回域名CNAMEwww.a.tbcdn.com
对应IP地址。 - 域名解析请求发送至阿里云
DNS
调度系统,并为请求分配最佳节点IP
地址。 LDNS
获取DNS
返回的解析IP
地址。- 用户获取解析
IP
地址。 - 用户向获取的
IP
地址发起对该资源的访问请求。- 如果该
IP
地址对应的节点已缓存该资源,则会将数据直接返回给用户,例如,图中步骤7和8,请求结束。 - 如果该
IP
地址对应的节点未缓存该资源,则节点向源站发起对该资源的请求。获取资源后,结合用户自定义配置的缓存策略,将资源缓存至节点,例如,图中的北京节点,并返回给用户,请求结束。配置缓存策略的操作方法,请参见缓存配置。
- 如果该
-
说说常用的
ES6
的新特性?-
const
、let
-
map
、set
-
promise
、async
、await
-
展开运算符
...
-
解构赋值
-
函数参数的默认值
-
iterator
、for...of
-
Class
-
Symbol
-
函数、数组的拓展
-
-
新增方法的兼容性?
IE 10/11 以上?(自作聪明了, 其实
ES6
在IE
全军覆没,Edge 14/15
以上兼容性有 90% 以上) -
怎么知道这些方法的兼容性?
- MDN
- Can I Use(紧张到忘记了 好后悔)
- 直接上网搜索
-
...
和Array.from
转数组的区别?...
只能用于可迭代对象Array.from
不仅可用于可迭代对象, 还可以用于类数组对象
-
说说直接使用对象存键值对和
map
存键值对的区别?脑袋突然糊了, 好久没看
map
, 答不上来Object
有原型(除非主动设置Object.create(null)
), 有一些默认的key
在原型链上, 但是map
没有- 在
Object
对象中, 只能把String
和Symbol
作为key
值, 但是在map
中,key
值可以是任何类型 - 通过
Map
中的size
属性,可以很方便地获取到Map
长度; 对象没有直接求长度方式
-
缓存
-
为什么要有
Etag
- 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新
GET
; - 某些文件修改非常频繁,比如在秒以下的时间内进行修改,
If-Modified-Since
能检查到的粒度是s - 某些服务器不能精确的得到文件的最后修改时间。
- 一些文件也许会周期性的更改,但是他的内容并不改变(仅仅改变的修改时间),这个时候我们并不希望客户端认为这个文件被修改了,而重新
-
如果让你只能选择一个缓存你会选择什么? 为什么?
- 协商缓存, 如果选强缓存永远都是本地数据拿不到最新的网络数据
-
只选择协商缓存要怎么做到减少请求?
答: 使用
localStorage
和sessionStorage
协助缓存本地数据, 本地没有的数据再进行协商缓存追问: 可是
localStorage
和sessionStorage
多是【字符级别】的内容, 而网络请求的数据多是【文件级别】的内容答: ...整不会了
-
-
智力题: 现在是下午五点三十五分, 求指针夹角?
这里很尴尬, 减法写成加分, 面试官反问我思路, 我一理思路发现写反了/笑哭
-
不论用什么方式, 怎么只用
CSS
隐藏某个元素?- display : none
- visibility : hidden
- opacity : 0
-
除了常用的这三种你还能想到其他的吗?
- position 移出屏幕后设置 overflow: hidden 防止用户滚轮找到这个元素
- z-index 设置在屏幕下方 上方用其他元素遮盖
- 如果元素是空的, 可以设置背景色为 transparent
面试太紧张了, 脑袋糊的 没想到其他方法了, 结束面试之后想到的:
- 2D 图形可以通过 rotate 翻转 90°
- 所有数据都设置为 0 并且去除所有边框和外线 并 overflow: hidden
-
握手挥手?
我才刚开始说就回复我不用说了
-
AJAX?
balabala 省略
-
其他前端优化方案?
- 合并请求, 减少请求数量
- 雪碧图、字体图标、SVG、Webp
- 缓存
- 压缩资源大小
- CDN
- DNS
- 资源加载时机
- 减少回流重绘
- webpack
- 节流防抖
-
你刚提到
Webp
,可以说说Webp
的兼容性吗?- webp具有更优的图像压缩算法
- 据我所知,Webp 在安卓手机上兼容性很好
-
webp
图片格式的原理(为什么能更优压缩)?鸦雀无声
-
那么在电脑端浏览器上的兼容性呢?
- 也许在 Chrome 浏览器兼容也不错
- 感觉总体的兼容性应该比较差
- 我对于 webp 在浏览器上的兼容性并不是很了解
-
雪碧图、字体图标、SVG 图标能减轻加载压力的原因?
balabala 省略
-
怎么让你项目中的拍平方法兼容 IE?
- 第一时间想到先判断是否兼容 然后自己造轮子(蠢)
- 面试官提醒 polyfill(焕然大悟,很少用 给忘了)
-
什么 CSS 放上面,JS 放下面?
- 引出 script 的 async 和 defer
-
HTTP 状态码?
-
请完成一个工具方法,统计出纯英文的文章中出现次数最多的单词是什么,输入为文章内容,输出为次数最多的单词和出现的次数
-
什么时候能来实习?
-
实习时长
-
大四没课?
反问
-
我现在面试的部门是?
CSIG 腾讯教育
-
组内主要的技术栈?(我主要学的是 Vue)
流行的框架都会使用,但是考虑到统一性和方便管理, 主要使用的是 React 更加偏向于 React 但是其他框架也并存(以公有制为主体, 多种所有制共同...)
-
组内氛围?
-
组内偏向团队合作还是个人发展?
团队合作...(闲聊)
晚上六点半了,结束面试,各奔干饭