前端开发一面/二面

Posted on by mannuan 3 mins read
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运算符

面向对象

类与实例

类的声明

生成实例

类与继承

如何实现继承

继承的几种方式

通信类

什么是同源策略和限制？

什么？

限制不同源之间进行交互；

源？

协议，域名，端口；

限制？

  1. Cookie, LocalStorage和IndexDB无法读取；
  2. DOM无法获得；

  3. AJAX请求不能发送；

    前后端如何通信？

  4. ajax: 同源；

  5. websocket: 不受同源策略限制；

  6. 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依赖于你这个用户要登录网站；

算法类

排序

堆栈、队列和链表

递归

波兰式和逆波兰式

答题技巧

  • 先理解题目，向面试官求助
  • 伪代码，卡住了，
  • 知识面，写不出来，我知道用什么算法