面试准备
分析职位要求等
一面/二面
面试技巧
准备要充分(基础知识)
知识要系统(前端知识碎)
沟通要简洁(理论知识 一语中的)
内心要诚实(不会可以请教面试官)
态度要谦虚(不要嘚瑟)
回答要灵活(不要把话说满 掌握多少就说多少)
延伸:
问题1:这五种方案各自有什么优点和缺点?
浮动:
缺点:
脱离文档流,需要清除浮动。如果处理不好,会带来很多问题。
优点:
兼容性比较好。如果清除浮动处理地好,浮动与周边元素的关系处理地好,兼容性比较好。
绝对定位:
优点:
快捷,配合js使用非常快,不容易出问题。
缺点:
脱离文档流,导致子元素也脱离文档流,实使用性比较差。
Flexbox:
解决了上述两个布局的不足,比较完美。移动端一般用flexbox布局。
表格布局:
缺点:
历史上:麻烦,操作繁琐,对SEO不够友好。
比如中间单元格高度超出时,两边的单元格也会调整到同样的高度。(有些情况不需要)
优点:
三栏布局用表格布局轻易解决,兼容性好,pc上IE8不支持flex,此时可以用表格布局
网格布局:
新出的技术
对新技术有追求,主动学习的意识
问题2:假设高度未知,以上五种方案哪个还适用?哪个已经不适用了?
浮动:不作处理不能用了
提问:为啥下面中间的内容超出来了
答:浮动的基本原理,中间内容向左浮动的时候被左侧的红块挡住了
内容超出以后,在下面排的时候,左侧没有了遮挡物(没有float的元素),就在左侧渲染了
提问:怎么让黄色继续向下延伸,不影响红色和蓝色?
答:创建BFC(CSS盒模型中解说)
表格布局和flexbox布局一样,中间被撑高,两边也被撑到相同的高度
网格布局:超出,超出部分无背景
综上所述:浮动、绝对定位、网格都不能用
表格布局、flexbox可以继续使用
问题3:这五种方案的兼容性如何?应用到业务中,最优你会选择哪一个?
页面布局小结:
语义化掌握到位(不要通篇div)
页面布局理解深刻(每个原理,代码理解清楚)
CSS基础知识扎实
思维灵活且积极上进(方案多)
代码书写规范(缩进,命名)
页面布局的变通
三栏布局
左右高度固定,中间自适应(五种)
上下高度固定,中间自适应(4种方法,除了浮动不行)
两栏布局
左宽度固定,右自适应(五种)
右宽度固定,左自适应(五种)
上高度固定,下自适应(4种,除了浮动不行)
下高度固定,上自适应(4种,除了浮动不行)
CSS盒模型
题目:谈谈你对CSS盒模型的认识
基本概念:标准模型+IE模型
标准模型包括:content padding border margin
标准模型和IE模型的区别:计算宽度和高度的不同(怎么不同 怎么计算)
CSS默认的模型是哪一种,如何设置成类外一种
JS如何设置获取盒模型对应的宽和高(几种方法)
问题2:标准魔性和IE模型区别
标准模型和IE模型计算宽高是不同的
标准模型的宽高就是content的宽高
IE模型的宽高是content+padding+border
问题4:JS如何获取盒模型对应的宽和高
CSS三种写法:内联CSS、页级CSS、外联CSS
内联CSS
页级CSS
外联CSS
dom.style.width/height
只能取出内联样式的宽和高,外联和页级的样式取不出来
dom.currentStyle.width/style
计算的是浏览器渲染出来的样式,所以以上三种CSS写法都能取出
缺点:只支持IE浏览器
window.getComputedStyle(dom).width/height
跟上面一样,但是能兼容火狐和谷歌浏览器
dom.getBoundingClientRect().width/height
也是能拿到及时渲染的样式,以viewport(视窗)左顶点为基准,能得到width、height、top、left
知道以上四种的区别,以及哪个通用性更强
问题5:实例题(根据盒模型解释边距重叠)
父元素套了一个子元素,子元素高度为100px,子元素与父元素上边距的距离是10px
问题6:BFC(边距重叠解决方案)
BFC的基本概念(类似的IFC)
Block Formatting Context,BFC 块级格式化上下文
BFC的原理(BFC的渲染规则)
如何创建BFC
BFC的使用场景(见代码)
DOM事件
基本概念:DOM事件的级别(不会直接问,会问,请用DOM2中的事件……)
DOM事件模型(捕获和冒泡)
DOM事件流
描述DOM事件捕获的具体流程
Event对象的常见应用
自定义事件
事件级别:
False指定了冒泡还是捕获,false是冒泡阶段触发
DOM2中IE是attachEvent
DOM3增加了一些事件类型,键盘、鼠标
事件模型:
事件流
比如:用户点击了鼠标左键,怎么传到页面上,怎么响应。
目标阶段:比如按钮
描述DOM事件捕获的具体流程
取body标签可以用document.body
取html标签(document.html取不到),用document.documentElement取
提问:冒泡的具体流程
Event对象的常见应用
第一个:阻止默认事件(a标签不跳转)
第二个:阻止冒泡
第三个:比如一个按钮注册了两个事件ab,现在想要在点击时,执行a,不执行b,在a的响应函数中加入此句就可以了
第四个:当前绑定的事件,比如代理中的父级元素
第五个:事件委托(代理),当前点击的是哪个标签
自定义事件(模拟事件)
Event和CustomEvent都可以用来自定义事件
唯一的区别:Event只能定义一个名字
CustomEvent可以在后面再加一个object,定义其他参数(自学)
HTTP协议
简单快速:每个资源固定,访问只要输入统一资源符(uii)
灵活:可以完成不同数据类型的传输
无连接:连接一次就断掉,不会保持连接
无状态:客户端请求服务端后,下次再过来无法区分,没有保存状态(无法确定联机者身份)
请求行:http方法、页面地址、http协议以及版本
请求头:key :value值,告诉服务端我要哪些内容,要注意什么类型
空行:分割请求头和请求体
请求体:
第一行:状态行
其他:响应头
空行和响应体:没体现
记住3-4个
记住1,3,5,6,9
206:比如:视频、音频文件很大
301:永久重定向
302:临时重定向
http1.1才支持持久连接
第二个是管线化
特点(第1点)和原理
第1,2,3要记住
创建对象有几种方法
第1种方式:字面量
第2种方式:通过构造函数
第3种方式:Object.create方法
这里有一个疑问:为什么o4跟其他三个不一样,没有name属性?
答:因为o4是通过原型链创建的,p是o4原型对象,o4.proto===p的结果是true.
name属性是在o4的原型对象p中,所以也能被o4继承。o4.name=p
原型、构造函数、实例、原型链
Instanceof的原理
原理:判断实例对象__proto__属性与构造函数的prototype属性是不是同一个引用
Instanceof沿着原型链往下走,往下判断
New运算符
面向对象
提问方式1:直接提问面向对象的相关内容?(下面列的)
提问方式2:一个对象继承自某个类,问它的原型链
继承的本质是原型链
JS的继承有几种方式,这几种方式各有什么优缺点?
面向对象—》继承—》继承方式—》不同点(原型链的掌握)
继承方式:
(1) 借助构造函数实现继承
将父级Parent1构造函数的this,指向子函数Child1
缺点:Parent1原型链中的属性和方法没有被Child1继承
(2) 借助原型链实现继承
弥补了“借助构造函数实现继承”的不足,可以继承父类原型对象中的方法
将Child2的原型对象指向Parent2的实例
缺点:如果有两个实例,改变一个实例的属性,另一个也会改变(原因:两个实例共用原型对象)
缺点2:无法判断c2是由Child2直接实例化而来的,还是Parent2直接实例化来的。
(3)组合继承(以上两种组合)
Parent3.call(this);//继承了父类构造体内的属性和方法
Child3.prototype = new Parent3();//继承了父类原型对象的属性和方法
可以解决以上两种方式的问题,既可以继承父类原型中的方法,两个实例也不会互相影响
缺点:在创建一个Child3实例时,Parent3这个构造函数被执行了两次
(4)组合继承的优化
Parent4.call(this);已经实现了继承构造体内的属性和方法
Child4.prototype = Parent4.prototype;只需要能够继承父类原型对象中的属性和方法就可以了,可以实现。
缺点:
第一行代码的执行结果都是true,因此无法判断s3是由Child4直接实例化而来的,还是Parent4直接实例化来的。
第二行代码:执行结果是Parent4。
因为
Parent4.prototype中的constructor属性指向Parent4
而Child4.prototype 等于Parent4.prototype;
所以Child4.prototype的constructor属性也指向Parent4
(5)组合继承的优化2
通过Object.create创建一个中间对象,将父类和子类的原型对象分割开来
并且中间对象的原型对象是父类的原型对象Parent5.prototype
O4的原型对象就是p
加上这句,指定Child5原型对象的constructor对象指向Child5
提问:为什么不能在Child4.prototype = Parent4.prototype;后面加上上面这一句?
答:因为Child4.prototype和Parent4.prototype指向同一个对象,如果改变Child4.prototype的constructor属性,父类的constructor属性也会改变,就影响父类了。
第一行都是true
第二行是Child5
面试的时候几种都写下来,可以主动提出说说缺点
通信
什么是同源策略及限制(3种)
前后端如何通信(ajax及其他)
如何创建Ajax(不用第三方库,原生代码写)
跨域通信的几种方式
什么是同源策略及限制
源:协议、域名、端口(默认80)
三个中有一个不一样就不同源
前后端如何通信
Ajax:只能在同源情况下通信
WebSocket:不受同源策略的限制
CORS:支持跨域通信,也支持同源通信
如何创建Ajax
兼容性处理:高级浏览器才支持,老版IE不支持(XMLHttpRequest只有高级浏览器中支持,低版本中要用xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);)
事件的触发条件:
事件的触发顺序:
跨域通信的几种方式
Hash是url中#后面的东西
Hash改变,页面不会刷新
Search改变是会刷新页面的,所以search不能做快捷通信
postMessage是html5中实现跨域通信的方式
CORS:可以理解为支持跨域通信的ajax
五种都要说,不能遗漏
JSONP
原理:利用Script标签的异步加载来实现的
www.imooc.com的script标签的地址域名不是www.imooc.com,就是利用这个原理
各种跨域通信方式:https://www.cnblogs.com/qianguyihao/p/8523576.html
面试会问:JSONP的原理是什么?怎么实现的?
在CORS和postMessage以前,我们一直都是通过JSONP来做跨域通信的
JSONP的原理:
通过
给服务端传递一个回调的名:callbackName
Window[callbackName]定义一个全局的函数
createScript创建一个script标签
script.onload监听脚本的响应事件,加载完成onload
Hash
postMessage
webSocket
不会让写代码,知道就行
CORS:
安全
用户是网站A的一个注册用户(有用户名密码),
用户登录网站A,网站A核查用户名密码是否正确,如果正确,下发cookie,保存在用户浏览器中,
用户之后又访问了网站B,B中有一个指向网站A(存在漏洞的接口)的引诱点击(链接),
用户点击这个链接,就会访问网站A,浏览器觉得是网站A,就会自动上传cookie
网站A核实是合法用户,就执行了该接口的动作
比如:新浪微博出现CSRF攻击,多了很多粉丝
能被攻击的两大因素:
用户必须在网站A登录过,如果没登录过,A会提醒登录
网站A中的某一个接口存在漏洞
Token验证
上面在用户点击“引诱点击”时只是自动上传了cookie,没有手动上传一个token
Token是访问或者注册网站A时,服务器向本地发送的,用户在访问网站A各个接口的时候,如果没有带Token,不会通过验证
如果像上面那样点击“引诱点击”,只会传cookie,不会传token,所以就避免了攻击
Referer验证
Referer页面来源,
服务器判断来的页面是不是自己站点下的页面,如果是的话,执行动作,如果不是,一律拦截
隐藏令牌
与Token有点像,但是是隐藏在比如说http的头中,不会放在链接上,就会比较隐蔽
对比两者的差别:
XSS向页面注入js运行,js函数体内放想要做的事情
CSRF是利用网站本身的漏洞,执行网站的接口(依赖于用户登录)
快速排序:
算法步骤:
(1) 在数列中取出一个数作为“基准”
(2) 分区过程:将比“基准”大的数放到基准的右边,小的放到左边
(3) 对左右区间重复第二步,直到各个区间只有一个数
选择排序:
通俗来说就是你们中间谁最小谁就出列,站到队列的最后边,然后继续对着剩余的无序数组说你们中间谁最小谁就出列,站到队列的最后边,一直到最后一个,继续站到最后边,这样数组就有了顺序,从小到大。
希尔排序
二面/三面
浏览器、js引擎
渲染机制:浏览器是怎么渲染页面的
JS运行机制:JS引擎和浏览器怎么交互的
页面性能:卡不卡,流畅不流畅
错误监控:监控错误的能力
渲染机制
DTD:告诉浏览器我是什么文档类型,浏览器根据这个选择什么样的引擎来渲染它
DOCTYPE:直接告诉浏览器什么是DTD,告诉浏览器当前的文档是什么文档类型
DOCTYPE有几种,3种
Html5, html4.01 Strict, html4.01 Transitional
不用详细记住,知道区别就行了
HTML经过HTML Parser转换成DOM Tree
CSS经过CSS Parser转换成Style Rules (CSSOM)
DOM Tree和Style Rules经过整合得到Render Tree(要渲染的树的结构出来了)
Render Tree不知道html内容,位置
Layout知道要渲染的DOM的位置、宽高等
Painting画图
Display能够看到
面试:组织语言,说出来
随便说两条
如何尽量减少repaint?
不要将多个节点添加到浏览器上,(repaint多次)
可以将多个节点放在一个document片段中
一次将document片段放入浏览器中(repaint一次)
JS运行机制
单线程 异步 异步队列
同步任务 alert
异步任务 setTimeout
先同步再异步
输出A
还是只输出A
While是同步任务
连续输出4个4
i=0时,将setTimeout交给定时器
i=1时,将setTimeout交给定时器
i=2时,将setTimeout交给定时器
i=3时,将setTimeout交给定时器
for的时间小于1s
此时i=4
定时器1s时间到了,将console.log(i)放入异步队列,轮询机制将该语句放入主线程执行
所以一共输出4个4
页面性能
a标签在高级浏览器中默认打开了DNS预解析,https很多浏览器默认关闭DNS预解析
第一句话:强制打开a标签的DNS预解析
第二句话:放到head里可以实现预解析
动态脚本加载(动态创建节点):创建script标签,再添加到head中
defer,asyns在创建script标签时,添加这两个属性
强缓存:浏览器问都不问服务器,如果本地缓存有,直接用本地缓存的
协商缓存:本地有,浏览器不确定要不要用;与服务器协商一下,能不能用
Expires:绝对时间,服务器和浏览器时间有偏差
Cache-Control:相对时间,在拿到资源3600s内不会再去请求服务器
如果服务器两个时间都发了,以后者的时间为准
Last-Modified If-Modified-Since:同一个值
上次服务器下发的,请求服务器时带的(服务器要对比)
如果时间变了,但是内容没有变,Etag可以解决
Etag (hash值) 服务器下发给浏览器的
如果过了强缓存的时间,浏览器问服务器能不能用,服务器在http中加一个key:value值,If-None-Match是key,value就是Etag
提问:跟浏览器缓存相关的http头有哪些?
就是上面几个加粗的关键词
错误监控
两种问法:如何监测JS错误?
如何保证你的产品质量(还是错误监控)?
Window.onerror只能捕获即时运行错误,不能捕获资源加载错误
资源加载错误不会冒泡,比如script标签出现错误,不会冒泡到window
Performance.getEntries获取所有已加载资源的加载时长,间接拿到没有加载资源的错误
Error事件捕获:虽然冒泡不行,但是捕获可以
延伸问题:
请求已经发送出去了