前端开发一面/二面
Table of Contents
一面/二面
面试技巧
- 准备要充分
- 知识要系统
- 沟通要简洁
- 内心要诚实
- 态度要谦虚
- 回答要灵活
面试模拟
页面布局
- 假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应;
- 解决方案
- 浮动布局,绝对布局,弹性布局,表格布局,网格布局
- 延伸一:优缺点
- 在浮动布局中,浮动元素脱离文档流,要做清除浮动,这个处理不好,会带来很多问题,比如高度塌陷等。但是使用比较简单,兼容性也比较好。
- 绝对布局是脱离文档流的,下面的所有子元素也会脱离文档流,这就导致了这种方法的有效性和可使用性是比较差的。但是很快捷,设置很方便,而且也不容易出问题。
- 弹性布局不能兼容IE8及以下浏览器。但是它解决上述两种方式的不足,比较完美。目前移动端的布局也都是用它。
- 在表格布局中,当其中一个单元格高度超出的时候,两侧的单元格也是会跟着一起变高的,而有时候这种效果不是我们想要的。但是兼容性好;
- 网格布局可以做很多复杂的样式设计;
- 延伸二:改为高度自适应
- 在浮动布局中,浮动元素的高度无法被撑开;
- 为什么文字会出现在左边的方块的上方?浮动布局的原理是哪边可以填充就填哪边;
- 如何解决?创建BFC;
- 在绝对布局中,两边元素的高度无法被撑开;
- 弹性布局没有影响;
- 表格布局没有影响;
- 网格布局不设置行高也可以达到自适应的效果;
- 延伸三:兼容性
- 小结:
- 语义化掌握到位
- 页面布局理解深刻
- CSS基础知识扎实
- 思维灵活且积极上进
- 代码书写规范
- 解决方案
- 上下固定,中间自适应
- 解决方案:绝对布局,弹性布局,表格布局,网格布局
CSS盒模型
- 谈谈你对CSS盒模型的认识?
- 基本概念:标准模型+IE模型
- 标准模型和IE模型的区别(高度和宽度)
- CSS如何设置这两种模型
- JS如何设置获取模型对应的宽和高
- 实例题(根据盒模型解释什么是边距重叠)
- BFC(边距重叠解决方案)
什么是盒模型
所有的HTML元素都可以被认为是盒子。CSS盒模型代表网站的设计和布局。 它由边距(margin),边框(border),填充(padding)和实际内容组成。 属性以相同的顺序工作:顶部(top),右侧(right),底部(bottom)和左侧(left)。 属性工作顺序为顺时针,以上右下左的顺序。
标准模型和IE模型的区别
- 标准模型
- width=内容的宽度
- height=内容的高度
IE模型(是一种怪异模型)
- width=border+padding+内容的宽度
height=border+padding+内容的高度
CSS如何设置这两种模型
box-sizing: content-box, border-box(IE);
JS如何设置获取盒模型对应的宽和高
- dom.style.width/height
- 只能取内联样式的,也就是行内样式
- dom.currentStyle.width/height
- 渲染以后的,比较准确
- 但是只有IE支持
- window.getComputedStyle(dom).width/height;
- 也是渲染以后的
- 所有的浏览器都支持(兼容firefox和chrome)
- dom.getBoundingClientRect().width/height;
- 也是运行完以后获得的
- 通常用来计算一个元素的绝对位置(相对于viewport)
- 可以拿到四个元素:left, top, width, height;
- 兼容性很好,基本都支持
实例题(根据盒模型解释边距重叠)
- 由面试官提出问题,你来回答的方式考察
- 边距重叠的情况
- 父子元素
- 兄弟元素
- 空元素的边距
BFC(边距重叠解决方案)
- BFC的基本概念(相关的还有IFC)
- 块级格式化上下文
- BFC的原理(BFC的渲染规则)
- BCF这个元素的垂直方向的边距会发生重叠
- BFC的区域不会与浮动元素的box重叠
- BFC在页面上是一个独立的容器
- 计算BFC高度的时候,浮动元素也会参与计算
- 如何创建BFC
- float值不为None,当前元素就创建了BFC
- position的值不为static或relative
- display=table-caption,table-cell,table,table-row等;
- overflow不为visiable;也就是auto和hidden;
- BFC使用场景
- 垂直方向边距重叠
- BFC不和float重叠
- 清除浮动,BFC子元素——即使是float也会参与运算
DOM事件类
基本概念:DOM事件的级别
- 提问方式:请用DOM2中的事件如何如何?
事件级别(DOM标准定义的级别)(只要回答出来就行了,这部分不深)
- DOM0: element.onclick = function(){}
- DOM2: element.addEventListener(‘click’, function(){}, false);
- DOM3: element.addEventListener(‘keyup’, function(){}, flase);(增加了鼠标事件和键盘事件等等);
DOM事件模型
指的就是冒泡和捕获 + 提问方式 - 你了解DOM事件模型吗? - DOM事件模型是什么?
DOM事件流
- 捕获阶段,目标元素阶段,冒泡阶段
描述DOM事件捕获的具体流程
window->document->html->body->具体的结构 + 获取html: document.documentElement; + 获取body: document.body
Event对象的常见应用
- event.preventDefault();阻止默认的点击事件执行
- event.stopPropagation();阻止冒泡
- event.stopImmediatePropagation();注册了两个click事件,只触发第一个;
- event.currentTarget;当前所绑定的事件;
- event.target;当前被点击的元素
事件委托
- 常见题目:一个for循环给一个DOM注册了n多个事件,问你怎么优化?
- 解决:把子元素的事件代理都转移到父元素上,你绑定一次事件就可以了;然而你要做响应的时候,你就要区分当前是哪个元素被点击;
- event.target(目前都支持)表示当前被点击的元素,早期版本的IE使用sourceTarget
自定义事件
Event
var eve = new Event('custome');
ev.addEventListener('custom', function(){
console.log('custom');
});
ev.dispatchEvent(eve);//触发事件
- 缺点:只能指定事件名
CustomEvent
- 除了可以指定事件名,后面还可以跟一个{detail:XXX},来指定参数,这个参数可以自定义
使用场景
- 一个按钮,不是一个常规的click,我想给它自己增加一个事件,然后我想在其他地方触发这个事件,而不是用回调的方式去处理;
HTTP协议类
HTTP协议的主要特点
- 无连接: 连接一次就会断掉,不会保持连接;
- 无状态: 客户端和服务端建立连接后传输数据,断开连接,再次建立连接后,无法区分是不是同一个连接;
- 简单快速: 每个资源的URI都是固定的,访问资源只需要输入URI就行了;
灵活: 通过一个http协议就可以完成不同类型的传输;
HTTP报文的组成部分
请求报文
请求行(http方法,页面地址,http协议/版本),请求头(key-value值),空行,请求体;
响应报文
- 状态行(http协议/版本, http状态码),响应头,空行,响应体;
HTTP方法
- GET: 获取资源
- POST: 传输资源
- PUT: 更新资源
- DELETE: 删除资源
HEAD: 获得报文首部
POST和GET的区别
GET在浏览器回退时是无害的,而POST会再次提交请求;
GET请求会被浏览器主动缓存,而POST不会,除非手动设置;
GET请求参数会被完整保留在浏览器历史记录里,而POST中的参数不会被保留;
GET请求在URL中传送的参数是有长度限制的,而POST没有限制;
GET参数通过URL传递,POST放在Request body中;
HTTP状态码
1xx: 指示信息-表示请求已接收,继续处理;
2xx: 成功-表示请求已被成功接收;
3xx: 重定向-要完成请求必须进行更进一步的操作;
4xx: 客户端错误-请求有语法错误或请求无法实现;
5xx: 服务器错误一服务器未能实现合法的请求;
- 200 OK: 客户端请求成功;
- 206 Partial Content: 客户发送了一个带有Range 头的GET请求,服务器完成了它;
- 301 Moved Permanently: 所请求的页面已经转移至新的url;
- 302 Found: 所请求的页面已经临时转移至新的url;
- 304 Not Modified: 客户端有缓冲的文档并发出了一个条件性的请求,服务器告诉客户,原来缓冲的文档还可以继续使用;
- 400 Bad Request: 客户端请求有语法错误,不能被服务器所理解;
- 401 Unauthorized: 请求未经授权,这个状态代码必须和WWW- Authenticate 报头域一起使用;
- 403 Forbidden: 禁止访问请求的页面;
- 404 Not Found: 请求的资源不存在;
- 500 Internal Server Error: 服务器发生不可预期的错误;
503 Server Unavailable: 请求未完成,服务器临时过载或当机;
什么是持久连接?
建立连接后,发完一个请求不断开,还可以继续发;
http1.1开始支持keep-alive
什么是管线化
在持久连接的基础上连续发生多个请求,每个请求之间不用等待上一个请求的响应回到客户端;
管线化机制通过持久连接完成,仅HTTP/1.1支持此技术;
只有GET和HEAD请求可以进行管线化,而POST则有所限制;
初次创建连接时不应启动管线机制,因为对方(服务器)不ー定支持HTTP/1.1版本的协议;
原型链类
创建对象的有几种方法
//字面量
var o1 = {name: 'o1'};
var o2 = new Object({name: 'o2'});
//显式构造函数
var M = function(){
this.name='o3';
}
var o3 = new M();
//Object.create
var P = {name: 'o4'}
var o4 = Object.create(P);
原型、构造函数、实例、原型链
什么是原型链?
从一个实例对象,往上找这个实例相关联的对象,然后这个关联的对象再往上找创造它的相关联的原型对象,以此类推,一直到Object.prototype为止
instanceof的原理
- 比较实例的
__proto__
和构造函数的prototype是不是一个地址,只要在原型链上的构造函数,都是这个实例对象的构造函数,虽然不太严谨,但是instanceof都会返回true,使用constructor比instanceof更加严谨 - 使用constructor来判断实例对象的构造函数是最正确的方法
new运算符
手写new运算符
面向对象
类与实例
类的声明
生成实例
类与继承
如何实现继承
继承的几种方式
通信类
什么是同源策略和限制?
什么?
限制不同源之间进行交互;
源?
协议,域名,端口;
限制?
- Cookie, LocalStorage和IndexDB无法读取;
- DOM无法获得;
AJAX请求不能发送;
前后端如何通信?
ajax: 同源;
websocket: 不受同源策略限制;
cors: 跨域和同源都支持,新的通信协议标准;
如何创建ajax
工作流程
判断存在XMLHttpRequest; new XMLHttpRequest; open确定发送方式; send发送请求; onload; 200,206,304
兼容性处理?
考虑,但是不必记得 事件的触发条件? 事件的触发顺序? 只要进入onload请求中,一定是已经到4这个状态了。 onreadystatechange则需要加判断;
跨域通信的几种方式
- Hash改变页面不刷新
- Search改变会刷新页面
- cors是支持跨域通信的ajax
JSONP的原理
- 前后端协商好回调函数的名称为jsonp
- 创建一个名为jsonp的全局函数
- 创建script标签,设置src属性,url后面添加callback=jsonp的字符串
- 清空全局函数
Hash的原理
- 使用场景: 当前页面A通过iframe或frame嵌入了跨域页面B
- 拿到B的窗口的src,在src后面拼接上要发送的数据(通过JSON.stringify生成)
- B在自己的代码中使用window.onhashchange监听,通过window.location.hash获得,需要经过处理
postMessage的原理
- 窗口A向跨域窗口B发送信息
//B窗口的句柄
Bwindow.postMessage(数据, B的url);
- 在窗口B中进行监听
window.addEventListener("message", function(){
console.log(event.origin);//A窗口的地址
console.log(event.source);//A窗口的句柄
console.log(event.data);//数据
}, false);
Websocket的原理
var ws = new Websocket("wss://..."或者"ws://...");
ws.onopen = function(){}
ws.onmessage = function(){}
ws.onclose = function(){}
CORS原理(是ajax的变种,是一种标准)
CORS为什么就能支持跨域通信了
- 浏览器会拦截ajax请求,如果这个请求跨域的,它会在http头中增加一个origin字段 ```javascript fetch(url, { method: “get” }).then(function(response){
}).catch(function(err){
}); ```
安全类
CSRF
基本概念和缩写
CSRF,通常称为跨站请求伪造,英文名Cross-site request forgery缩写CSRF
攻击原理
实现CSRF攻击的两大因素
- 用户在网站登录过
- 网站存在漏洞接口
防御措施
Token验证
访问网站,服务器自动在你的本地存储token,访问接口的时候,必须带着token
Referer验证
referer指页面来源,服务器判断是不是自己站点的页面来源,如果是才会执行操作
隐藏令牌
类似于token,隐藏在http头部中,不会放在链接中,比较隐蔽,与token本质上区别不大;
XSS
基本概念和缩写
跨域脚本攻击(cross-site scripting)
攻击原理
- 不需要任何的登录认证;
核心原理就是往页面注入脚本;
防御措施
核心宗旨就是让注入的js脚本不可执行;
对比XSS和CSRF的区别
- 攻击方式不一样:XSS向你的页面注入js去运行,然后js函数体中,做他想做的事情;CSRF利用您本身的漏洞,帮你自动执行那些借口,而且CSRF依赖于你这个用户要登录网站;
算法类
排序
堆栈、队列和链表
递归
波兰式和逆波兰式
答题技巧
- 先理解题目,向面试官求助
- 伪代码,卡住了,
- 知识面,写不出来,我知道用什么算法