1面试注意点
2前端开发面试知识点大纲
1、HTML&CSS
2、JavaScript
ECMAScript标准规范,描述这门语言的实现细节和标准。
3、jQuery·
对象的结构、jQuery的方法挂在哪里、插件制作、jQuery的常用方法、选择器、jQuery的事件用法
4、其他
必备知识点
HTML&CSS
:
对
Web
标准的理解、浏览器内核差异、兼容性、
hack
、
CSS
基本功:布局、盒子模型、选择器优先级及使用、
HTML5
、
CSS3
、移动端适应。
JavaScript
:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、
Nodejs
、
JSON
、
ajax
等。
其他:
HTTP
、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、
SEO
、
UED
、架构、职业生涯
4百度
一面
1.AJAX流程
2.promise简单说一下
3.手写一个箭头函数
4.链式调用
5.简单的观察者模式
6.let、const
7.数组去重
8.判断数据类型,null怎么判断
9.正则 电话区号+座机号,并给区号加上括号
10.MVC、MVP、MVVM
11.TopK用的什么排序
12.堆排序的时间复杂度、稳定性,什么是稳定排序
13.基本有序的数组用什么排序
14.冒泡排序时间复杂度,最好的情况的时间复杂度
二面
1.三栏布局,(博客有)
2.position值
3.让元素不可见
4.数组深浅拷贝、对象深浅拷贝
5.webpack路由懒加载
6.ES6异步请求数据怎么操作
7.有哪些公司offer
三面
1.类似脑筋急转弯
2.类似脑筋急转弯
3.let、const
4.结构辅助
5.rest参数
6.SPA优缺点
7.MVC、MVVM MVVM为了解决什么问题
8.箭头函数
9.XSS、CSRF
10.ES5和ES6区别
11.项目
12.项目难点
13.有哪些offer
14.全栈的看法
美团
1.Vue双向数据绑定
2.diff算法
3.vue计算属性如何实现
4.vdom优缺点
5.SPA原理
6.webpack用过那些loader
7.gitHub
8.angular脏检查
9.export看代码说结果(好像babel转码的export和node里的不太一样)
10.let、const
11.箭头函数
12.localStorage缺点
13.手写算法,求二叉树中两个标记的节点之间的最短路径吧,(类似迪杰特斯拉算法吧)
1.无序数组,找出所有满足条件的数,这个数比前面的数都大,比后面的数都小
2.js继承
3.实现一个简单的mvvm
4.实现一个装饰者模式
5.看过哪些书
6.this绑定
7.HTTP缓存,ETag
1.prototype属性
2.跨域安全,怎么防范
3.设计方面的书
4.UI的了解
5.CSS的书
6.前端哪里不好
7.问了一些复杂的设计模式
8.项目亮点
9.MVC
京东
1.jq和vue区别,各自的场景
2.为什么选择Vue
3.跨域方法
4.ES6新特性
5.h5新特性
6.你做前端的优势
1.Vuex原理
2.项目难点
3.水平垂直剧中
4.盒模型
5.数组去重
6.一维数组变二维
7.HTTP状态码
8.继承
9.对框架怎么看
滴滴
1.手写算法
2.手写继承
3.画盒模型
1.常用的类名
2.继承
3.盒模型
4.jsonp
5.ajax同步和异步
6.window.onload,浏览器怎么渲染
7.轮播图
8.linux命令
9.数组归并去重
北森云计算
1.JS数据类型
2.盒模型
3.vue和react区别
4.如何选择框架
5.移动端1px
6.vuex
7.Promise源码
8.跨域
1.自我介绍
2.项目
3.jq源码
4.vue源码
5.vue、react区别
6.promise
7.性能优化
8.diff算法
9.双向数据绑定
10.跨域
商汤科技
1.行元素和块元素
3.eval
4.JS数据类型
5.JS有哪些对象
6.==和===
7.link和@import
8.undefined和null
9.get、post
10.JS时间线
12.position值
13.H5新特性
14.cookie和storage区别
1.项目
2.性能优化
3.手写快排
4.表单怎么抽取成组件
5.双向数据绑定
6.响应式布局
7.浏览器兼容
8.vue、react区别
网易有道
1.行元素、块元素
2.原型链和继承
3.浏览器内核,浏览器引擎
4.跨域
5.typescript
6.todolist
7.互斥锁
8.bind、call、apply区别
9.将一个元素隐藏
10.css单位
11.闭包
12.webSocket兼容处理
小米:坑!!!
1.flex布局垂直居中
2.ES5有什么块作用域
3.CSS3动画
4.H5 拖拽元素状态,方法
5.webSocket
6.history方法
7.h5增加了哪些事件
6.webpack性能优化
7.express中间件
8.promise穿透,promise递归
9.mongoDB的分页
10.观察者模式
11.UDP和TCP区别
12.generate
13.Iterator
14.async function
15.前端安全
16.import互相引用
17.JS垃圾回收制
18.怎么创建一个没有原型的对象
19.with
20.闭包
21.css hack
22.作用域链
23.性能优化
24.require和import的区别
25.commonJS
26.cookie和storage
27.大列表的优化
28.vue源码
29.jq源码
30.dom事件流
31.事件委托,为什么会提升性能
32.事件绑定IE兼容
33.attarhEventListen 和 addEventListener区别
34.浏览器缓存
35.PromiseAPI
36.对象实现遍历接口
37.三栏布局
38.new 原理
39.看了哪些书
40.拿了哪些offer
还有好多我听都没有听到过的东西。。。我直接说不懂。。。
还问了n多个,类似表单优化的问题,然后说他们也不太会,就和我讨论下
问的问题比我前几次的总和都多了,最后打电话说我还OK,我他妈反手。。就是一张过去的CD
前几次面试我觉得还OK,到了小米,感觉自己废了。。果然学无止境
滴滴北京
1.css3动画
2.实现水平垂直居中
3.Promise规范、源码
4.Promise链式调用如何中断
5.Vue性能优化,用过哪些性能优化的方案(这个他和我说了好多,我也懂了好了好多,一会记录一下)
6.vue、react的区别
7.快速找到数组中只出现一次的值(用位操作)
8.async function
9.项目和我聊了很多
10.postCss、mixin
网易雷火
1.原生实现lazyload
2.原生实现v-bind
3.原生实现v-modul
4.webpack和gulp的区别
5.css预处理器、后处理器
6.CDN的好处
7.XSS原理及其防御、CSRF原理及其防御
8.观察者模式
9.git 一个分支已经提交了,你现在的代码已经写了很多,发现之前有个BUG要改,怎么办
10.nginx反向代理
11.跨域
12.vue-cli配置proxy
13.jQ.on源码
5.
HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级、
HTML5、CSS3、Flexbox
JavaScript:
数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs
其他:
移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。
5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。
6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型
7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们
8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
9、HTML与XHTML —— 二者有什么区别,你觉得应该使用哪一个并说出理由。
10、JSON —— 作用、用途、设计结构。
6. DIV+CSS常见错误汇总
内容摘要:通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误:
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:
〈!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"〉
腾讯面试对基础比较看重,然后需要你有两三个比较好的项目,一面重视面试者对前端基础的把握,还要手写代码,不过不难,二面部门的leader面,这一面比较难,面试官会对你的项目细节进行深挖,所以说项目要牛逼一点,最后还会有一道逻辑题(我没有答上来),三面是HR面,如果你想进大公司的话,下面这些技术是肯定要掌握的:html5,css3,JavaScript,略懂一点jQuery源码,Node.js,express,mongoose,数据库mongodb。大公司问的核心在于JavaScript。如果下面的知识点你都可以打上来,恭喜你拿下bat不是问题--
更多详细的前端优化请看前端优化:雅虎35条或者前端性能优化----yahoo前端性能团队总结的35条黄金定律
HTML、CSS、JavaScript、移动Web开发、调试、HTTP网络知识。
文章很长,此处列出大纲,欢迎大家戳前端校招知识点总结查看全文。
本博客大部分数据来源于各大网站的收集整理改编,主要有GitHub(https://github.com)、题来了(http://www.tilaile.com)、牛客网(https://www.nowcoder.com)、一些英文网站,还有一些论坛、博客、IT招聘等网站。还有少部分数据时来源于本人自己整理添加,添加的内容主要是本人认为比较重要知识点,面试时可能会问到的题目,自己整理题目以及参考答案,答案仅供参考,答案可能存有错误或不足,欢迎大家批评指正或补充更好的答案。好让我及时更正,以免误导其他人。本博客仅提供参考作用。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
题目:一个数组“var meta = [1,2,[3,4,[5]],6,[7,[8,9,[10,11,[12]]]]];”,通过递归的方式依次取出这个数组中的数据。
function fillArray(array,result){
var count = array.length;
var i = 0;
for(;i
var temp = array[i];
if(Array.isArray(temp)){
fillArray(temp,result);
} else {
result.push(array[i]);
}
}
}
var result = [];
fillArray(meta,result);
// 递归的结果console.log('递归处理的结果:',result);
var resultMap = {};
function fillArrayII(array,result){
var count = array.length;
var i = 0;
if (!count){
return [];
}
for(;i
var temp = array[i];
var g = resultMap[temp];
if(g){
result.push(g);
} else {
if (Array.isArray(temp)){
fillArrayII(temp,result);
} else {
result.push(temp);
}
}
}
}
var date1 = new Date();
var time1 = date1.getTime();
var r = [];
fillArrayII(meta,r);
var date2 = new Date();
var time2 = date2.getTime();
console.log('no cache time : ',time2 - time1);
var date3 = new Date();
var time3 = date3.getTime();
var f = [];
fillArrayII(meta,f);
var date4 = new Date();
var time4 = date4.getTime();
console.log('cache time : ',time4 - time3);
大家可以看一下优化的结果:
无缓存的420ms,而缓存过的393ms,足足提升了27ms,虽然这个空间不大,但是如果当递归足够深时,可以节省大量的时间。不过缓存,需要对数据结构有一定的设计,这是一个前提。
那么除了缓存之外,最常用的优化方式应该算尾递归了,通俗易懂的说,尾递归就是把计算结果放到调用者函数的尾部,顶部的返回值越简单越好,而尾巴的返回可能是越来越复杂的计算。
这里只是一个“抛砖引玉”,一般正常情况下递归都可以用迭代来代替。如果你在写完递归之后,再写一个迭代的代替方案,并加以说明,我想你应该会受到青睐。
谈谈面试与面试题
起因,某日电话面试之后满心郁闷的我发了两条微博:
面试的时候问个css的position属性能刷掉一半的人这是啥情况……
其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了……
其中的一些回复让我认为非常有必要写这样一篇文章来说说面试和面试题的事情。
关于题目
什么样的面试题是好的?我认为有三点衡量指标:
区分度
深度
覆盖范围
是的,请注意我并没有使用“难度”这个词,因为这三个指标都与难度有关系。
css的position属性有哪些取值,它们的行为是什么?
这个题目几乎是我每次必问的,因为这个题区分度、深度和覆盖范围都很高。这个题的答案可以分成不同的层级:
区分度可以让题目可以适用于入门级到专家级的各种面试者,深度可以保证有深度研究的面试者可以展示他们的才能,覆盖范围可以有效地了解面试者擅长的方向。
网上抱怨面试官以出难题展示自己技术为乐的声音颇多,虽然不排除这样的可能性,但是我认为这样抱怨的人多半自己没有做过面试官,实际上多数公司面试往往任务量很大,几乎不会有什么玩乐的心情。题目偏、难、怪的情况多半可能是面试官不太负责任随便从网上搜索"大公司面试题"来的——图省事是个比戏弄靠谱的多的动机。
关于过程
比起笔试,面试的最大好处是可以根据面试者的水平调节题目的难度,即使一个题目中,也可以通过提示和追问来调整难度。
一般来说,当面试者遇到困难或者长时间思考时,面试官应当给予提示来节约时间,而当面试者给出的答案不够具体或者回答得过于轻松时,可以适当追问。在我的微博中
其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse,base line,writing mode,bidi,这样一路问下去的,奈何第一个问题(亲我真的只问了position有哪些取值和行为啊)就悲剧了……
我提到了一些我准备的追问内容,这些知识点从前到后越来越细致,也越来越偏,从最开始的box排布,到后面的行模型,再到文本排版,基本上是网页排版从整体到细节的顺序。
当面试者前面回答的答案足够完美,我就会进行追问,确保问到我开始不懂或者面试者开始不懂为止,这样可以大大延展题目的区分度和深度。
关于评判
首先我希望表达的一点,就是面试的评判跟学校里的考试完全是两回事,太多的人把面试当做考试而把注意力放在题目上。
事实上面试中未必是所有题目全都回答"正确"就一定会通过或者较高评价。面试是面试官和面试者双方"挖掘与展示才能"的过程,参考前面提到的面试过程,全部回答正确的情况很可能是因为面试官不感兴趣懒得追问。
对于面试官而言,基本评判原则就是"我要不要这个人做我的同事?",多数情况下,这个答案会非常清楚。一些题目是充分的,也就是"回答对了说明这个人具有可以依靠的才能",一些题目则是必要的,也就是"回答错了说明这个人无法胜任我们的工作"。
在position一题的评判上,我一般认为能够答对static、relative以及absolute就已经可以达到必要标准。而因为CSS layout是我最擅长的部分(虽然还是很烂……),又考虑到误差,当面试者能回答80%以上的追问,我就会认为面试者水平远高于我,在工作中能够作为CSS方面的专家来依靠。
我在面试中之所以感到沮丧,是因为大部分的人仅仅在position的基本行为上就已经错了,多数人的回答都是笼统的"绝对定位"和"相对定位"两个词,问及具体行为我得到了五花八门的答案,甚至有看上去经历相当资深的工程师把absolute和relative搞混的。
而微博上一些人说"属性可以google搜索"则更离谱,position在CSS布局中是相当基础的知识,对它的行为理解深度实际上代表了一个工程师对于CSS布局系统的理解,这个理解需要长时期的学习,绝对不是可以临时google得来的。正如同考人英语,若是不认识visibility尚可以解释说确实没怎么用过,而不会写英文字母v则说明这个人根本没学过英语。
关于题目类型
面试题有很多种类型:项目细节、知识型问题,开放性问题,案例问题以及传说中的Funny Question。事实上网络上流传甚广的"大公司面试题",往往是Funny Question,而它们真正的应用,在任何公司都是非常少见和谨慎的。
一些人提到,面试应该更注重“考察能力”。是的,我认为
web前端工程师的竞争力 = web前端知识 + 能力
能力 = 编程能力 + 工程能力 + 架构能力
这其中不包括所谓的学习能力,因为我认为学习能力是通过已有知识来体现的,如果一个具有超强学习能力的人来应聘web前端工程师但是他具有如此强的学习能力却连position这么重要的属性都没学会,那是不是下一步该要求这人附上证明自己没有精神疾病的诊断书?
工程能力和架构能力一般针对层级较高的工程师,所以一般来讲所谓能力考察就是编程能力,然后呢,编程能力一般考查方式就是案例问题,也就是传说中的——“算!法!题!”(当然我曾提到,它们与其说是算法题,不如说是稍微复杂点的小程序,它们之所以看上去不太有用是因为出题的人为了避免理解麻烦剥掉了实际的业务场景,毕竟各个公司的业务都不是一句两句可以讲清楚的)。
所以我估计教育我"考察能力"的各位,真的碰上这种题要骂死我了……
在题目类型的使用上,电话面试中我会以项目细节和知识性问题为主,一般当面面试中会使用案例问题(写程序或者架构case),开放性问题和Funny Question几乎不用。
考察能力的问题,一般我会控制在一道左右,最多不会超过两道题,因为这种问题往往非常消耗精力,过多会引起面试者抱怨。(当然有的公司专门这么干,同一天三轮技术面一轮AA面,每一轮都有算法题——这公司就是万恶的M$哈哈哈)
PS. position那道题目,我是不怕漏的,如果你要认真准备这道题的答案的话,基本等于学好了CSS的布局了,有兴趣的同学可以写篇文章并且发送简历到我的邮箱csf178 [at] gmail.com 写得好的话电话面试可以省了哦~ 阿里无线前端期待你的加入!
基本的java、android、网络知识
项目中的难点、解决办法
一些基本的java、网络知识,
webview播放视频,退出还有声音是没回收,内存泄漏的原因
类锁、对象锁、方法锁的。
布局优化
recyclerview和listview的不同,他们的缓存机制
6.0,7.0的特性
事件传递机制
自定义view
挑两个framework说一说
启动模式
有序广播
pms的作用
静态广播放在pms里么,动态广播呢?
如何停掉静态广播
发广播的时候,先查静态注册还是动态注册
如何重启app
如何清掉所有的activity,进行管理的activity,大小容量怎么设计中间有个activity太大怎么办
内存泄露怎么检查,要是定位到framework,怎么确认
如何让activity不被外部访问到
你平常用shell干啥
一些linux命令
view如何更新
直到有一天,我的室友,以前做过招聘,他给我分享了一个小技巧。他让我把简历直接发到那个公司员工的邮箱里,不管这个人是什么身份,只要这个人会去读邮件就行。
从那之后,无论我投哪家公司,都会去 LinkedIn(译注:你可以也去微博搜)搜这家公司的开发人员或者 HR,把简历直接发送给那个人。大部分小公司的邮箱格式是「姓名全拼@公司名.com」,对于大公司格式可能就是「花名.姓名@公司名.com」。我还用到了 Rapportive 来保证邮箱地址的准确性。
结果很喜人,我发了 150 多封邮件,居然有三十多封回信。
而且他们给我的建议也很受用。我发现有些公司的 CEO 或者 CTO 会直接回复我,甚至直接面试我。
在 Hack Reactor,我们被告知不要主动说明自己没经验。在自我介绍的时候,我们也会不主动提自己在线学习的经历。
为什么?因为不这样做的话,面试官会马上认为我们是初级开发者,并且给我们打上「没经验」的标签。
记住,你要说服面试官你能做好这份工作。
同时,你要说服你自己,你能做好这份工作。
你可以跟面试官谈论你对编程的热爱,谈你用 React 和 Node 做过的项目,谈你对 JS 的深刻理解。
我会去全国各地面试,只要那个公司邀请我去。我会问面试官问题,从中我了解到了很多新的知识,比如技术团队的结构、他们使用了哪些技术、用到了哪些工具,遇到了哪些挑战,以及他们的系统架构。
建议你在面试的时候问面试官一下问题:
你们最近遇到了什么技术挑战?
你在这个公司最满意的一点是什么?
你们的团队是怎样的结构,工作是怎么分配的?
我把每次面试当做一次学习的机会。每次面试都帮助我提高我的表达能力、面试能力和技术能力。每次面试失败都让我找到我的弱项。
找工作和招员工本来就是一个互相选择的过程,没有最优秀,只有最合适。
对于水平很好,有明确目标的人,要做的就是做好准备工作,充分了解目标公司,提高嗅觉,捕捉每一分信息。举个例子,我对A公司非常感兴趣,而且知道每年都会校招。那么你要做就是关注A公司的招聘官网、微信,加入A公司的招聘社群,同时积极利用已有的校友资源捕捉第一手信息,同时在技术上关注A公司技术团队的微博、博客,及时了解A公司的技术动向,认真研究其使用的技术栈,分析其技术路线和口味。
而对于技术一般,没有明确目标的同学。要做就是广投简历,积累面试经验,提高被选中的概率。这是很简单的数学题,在同样分子的情况下(技术水平),分母越大(面试公司),结果越好(offer越多)。而且面试本来就是一个打怪升级的过程,通过面试积累经验,补足短板,最后拿到名企offer的案例屡见不鲜,重要的善于总结,面试没有回答上来的问题,出来快速用手机记下来,下来一定要好好总结,想想面试官想考察什么,为什么这个知识我不知道,是因为知识点太偏,还是因为属于非知识性的内容,还是因为不熟练,针对不同的问题用不同方式来补足,还有考虑一下如果回答上来了下一步他可能问什么。还是那句话,从面试官的角度去问自己问题。
<<剑指offer>>一本书
国内的比较牛的人:淘宝网UED官方博客。灵玉,大成小胖,承玉,拔赤
微信
一面:JS手写二分搜索算法
给你一段代码,让你发现其中的问题(考察闭包)
实现一个Lazyman(请自行搜索):使用队列或者promise都可以
用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况。
:我直接用了window.getComputedStyle。后来交完之后仔细想想,好像确实有很多情况没考虑到,例如当这个元素的背景色为透明时,它最终的背景色应该为其父元素的背景色。
二面:项目
三面:(1)请问前端优化的手段有哪些?为什么这样做?有没有可能让JS下载解析不阻塞DOM树构建?有什么区别?
CSS文件放在上面,JS文件放在下面。
JS下载解析时会阻塞DOM树的构建,如果放在上面可能会出现白屏的情况。
使用defer或asyn字段。
(2)CSS下载解析会不会阻塞DOM树渲染?优化手段。
CSS-sprit或者将小图使用base64内嵌。
(3)CSS-sprit原理是什么?使用base64虽然会减少请求数,但是会增大文件的大小,以什么为基准去衡量什么时候使用base64?
(4)HTTPS和HTTP有什么区别? HTTPS增加了SSL层。
(5)画出SSL四次握手过程?
(6)请问SSL握手时有对称加密和非对称加密吗?
(7)优化手段?我答将静态内容推向CDN。
(8)现在CDN不稳,时而工作时而崩溃,我有一个首页如何确保每次都能正常显示该首页? CSS inline。
(9)一个柱状图,让我使用html和CSS绘制出来。当时我是用了flex。
(10)手写一个快排算法
(11)CSS和JS动画在刚才那个柱状图中表现出快排的整个过程,其实这个动画是见过的,只不过平时使用的都是canvas。
(1)一个移动页简历,请问如何实现?我主要是使用REM+Media Query,根据不同尺寸的设备进行不同的font-size设置。
(2)REM和EM的区别,如果父元素的font-size也是采用em表示,那么子元素的font-size怎么计算等。
(3)有没有遇到过margin重叠的现象,如何解决?BFC
(5)怎么理解JS模块化?有没有使用过webpack?
(7)你推进过公司的模块化,请问是基于什么背景,你是如何推进的,遇到过什么问题等等。
三面:
(8)是否看过Jquery的源代码怎么进行Object的深复制的?我答看过,是采用递归
(9)什么Jquery对环的考虑只判断当前节点是否为根节点?
(10)现在百度有许多部门,每个部门都有自己的组件库,实现的功能基本相同,但有的用的是原生的JS,有的是使用JQuery,有的是使用React,现在想进行统一,如何解决?我说采用重构,然后他问了问我重构的思路有哪些。
(11)百度有些项目在线上已经很久了,代码比较陈旧,如果你去重构可能会对线上的版本有冲击,你怎么解决这个问题?我答小幅度重构,然后进行回滚等。
(12)现在有一个很急的项目,需要一个组件,刚好网上提供的有该组件,你是如何屏蔽该组件与现有项目的差异? 我的思路是写一个wrapper屏蔽掉该组件与现有库的差异。
(13)如果引入该组件必须引入一个新的库,如React你该如何选择?引入的话有什么好处坏处?我提供了自己的一些看法。
阿里巴巴UC
一面:
(1)对移动前端的了解?我讲了讲移动前端布局,JS方面,性能优化等,
(2)他问我有什么问题吗?我问请问你如何理解前端以及你是如何从pc端转入移动端?他站在黑板上给我讲了20多分钟。包括hybrid技术以及现在流行的RN和Weex,以及阿里现在的业务使用的一些技术以及为什么使用等。
二面
(3)一些前端优化的方法,以及平常遇到过最大的困难是什么,如何解决。有什么难忘的事等。
(4)问我有什么问题?我说为什么你不问我前端的基础知识也不问我前端的项目经验?
唯品会
前两面都是基础面跟百度大概类似。但是它重点问了我web安全的一些知识,xss和csrf。问我如何解决相关的问题?xss的话主要使用转义,csrf的话项目中我主要使用的是jwt(javascript web token)。然后针对jwt细节问了我20多分钟。
第三面是一个产品经理面,说虽然是技术但是还是要了解产品才行。问我有没有用过唯品会app,我说没有。然后问我知道唯品会是干什么的吗?我说一家专做特卖的网站。然后给我一个唯品会的页面问我有什么建议,然后我讲了20多分钟。
第四面是技术总监。你前端基础各方面比较好,但是唯品会的业务性非常强,我没有任何电商方面的经验等,让我过来从头做起之类的。
腾讯:
主要问的有zepto库的使用,移动端布局,优化,JS的一些基础还有localstorage等。重点还问了一下我是如何在项目中开展测试的(单元测试和e2e测试)。ng