备战校招第十天

发表于 分类于
  • 面向对象实现继承
  • HTTP 协议类
  • 通信类
  • 安全类
  • 渲染机制类
  • 提升页面性能
  • 错误监控

面向对象实现继承

第一种：借助构造函数实现

可以调用父类构造函数，但获取不到父类原型对象上的方法和属性

1
2
3
4
5
6
7
8
9
10
11
12
13
function P1() {
  this.name = "P1";
}
P1.prototype.say = function () {
  console.log("say hello");
};
function C1() {
  P1.call(this);
  this.type = "c1";
}
var o1 = new C1();
console.log("o1 :>> ", o1);
console.log('o1.say :>> ', o1.say());

第二种：利用原型链实现

缺点：原型链中的原型对象是共用的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function P2() {
  this.name = "P2";
  this.play = [1, 2, 3];
}
function C2() {
  this.type = "c2";
}
C2.prototype = new P2();
var o2 = new C2();
var o3 = new C2();
// 理想状态应该是只有 o2.play 发生变化，但实际上 o3.play 也发生了变化
o2.play.push(4);
console.log("o2 :>> ", o2);
console.log("o3 :>> ", o3);

第三种：组合继承

将前两种方法组合，解决了之前的缺点，但父类被调用了两次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function P3() {
  this.name = "P3";
  this.play = [1, 2, 3];
}
function C3() {
  // 父类调用第一次
  P3.call(this)
  this.type = "C3";
}
// 父类调用第二次
C3.prototype = new P3();
var o4 = new C3();
var o5 = new C3();
o4.play.push(4);
console.log("o4 :>> ", o4);
console.log("o5 :>> ", o5);

第四种：组合继承优化1

无法判断是子类创建的对象还是父类创建的对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function P4() {
  this.name = "P4";
  this.play = [1, 2, 3];
}
function C4() {
  P4.call(this)
  this.type = "C4";
}
C4.prototype = P4.prototype;
var o6 = new C4();
var o7 = new C4();
o6.play.push(4);
console.log("o6 :>> ", o6);
console.log("o7 :>> ", o7);

第五种：组合继承优化2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function P5() {
  this.name = "P5";
  this.play = [1, 2, 3];
}
function C5() {
  P5.call(this)
  this.type = "C5";
}
C5.prototype = Object.create(P5.prototype);
C5.prototype.constructor = C5
var o8 = new C5();
var o9 = new C5();
o8.play.push(4);
console.log("o8 :>> ", o8);
console.log("o9 :>> ", o9);

第六种：ES6 class 定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class P6 {
  constructor() {
    this.name = "P6"
    this.play = [1,2,3]
  }
}
class C6 extends P6 {
  constructor() {
    super()
    this.type = "C6"
  }
}
var o10 = new C6()
var o11 = new C6()
o10.play.push(4)
console.log('o10 :>> ', o10);
console.log('o11 :>> ', o11);

HTTP协议类

http主要特点

  • 简单
  • 快速
  • 无连接
  • 无状态

http报文组成部分

请求报文

  • 请求行：http方法、 页面地址、 http协议以及版本
  • 请求头：key-value值
  • 空行：分割请求头和请求体
  • 请求体

响应报文

  • 状态行： http协议版本、状态码
  • 响应头：和请求头类似
  • 空行
  • 响应体

http 方法

  • GET
  • POST
  • PUT
  • DELETE
  • HEAD

get和post区别

  • 在浏览器回退时，get无害，post则会再次提交请求
  • url地址，get可以被收藏，post不行
  • 缓存，get会主动缓存，post不回，需手动设置
  • get请求只能进习惯url编码，post支持多种编码
  • get请求会在历史记录中，post不会
  • get请求在URL中传递参数有长度限制，post没有限制
  • 参数的数据类型，get只接受ASCII自负，post没有限制
  • get比post更不安全，因为参数直接暴露在url中，所以不能传递敏感信息
  • get参数通过url传递，post放在请求体中

http 状态码

1xx：指示信息，表示请求已接受，继续处理

2xx：成功，表示请求已成功被接收

3xx：重定向

4xx：客户端错误

5xx：服务器错误

通信类

跨域通信

  • JSONP
  • Hash
  • PostMessage
  • Websocket
  • CORS

安全类

XSS

跨站脚本攻击

  • 存储型XSS：跨站代码存储在数据库
  • 反射型XSS：恶意代码在url中
  • DOM型XSS：DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

原理

页面注入脚本，执行恶意 js 代码

防御措施

  • 输入内容过滤
  • 转译html
  • cookie设置http-only，防止恶意获取cookie
  • 少用直接渲染或者执行html的js代码，比如：document.write()、innerHTML、vue中的v-html等

CSRF

跨站请求伪造

原理

用户登陆A网站，A网站下发cookie。用户登陆B网站，B网站诱导用户点击链接，用户点击链接，访问A网站并携带cookie。

image-20200802155816883

防御措施

  • token 验证
  • referer 验证

渲染机制类

DOCTYPE

DTD是 XML文件的文档类型定义（Document Type Definition）可以看成一个或者多个XML文件的模板，在这里可以定义XML文件中的元素、元素的属性、元素的排列方式、元素包含的内容等等。

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

html5

1
<!DOCTYPE html>

html4.01 strict

该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。允许框架集（Framesets）。

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

浏览器渲染过程

image-20200802163318185

Reflow 重排

定义

当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为重排（又称为回流）。

触发reflow
  • 增加、删除、修改DOM节点是，会导致reflow或repaint
  • 移动DOM位置或者动画执行时
  • 修改CSS样式时
  • Resize 窗口时，或者滚动的时候
  • 修改网页的默认字体时

Repaint 重绘

定义

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

触发repaint

DOM改动

CSS改动

减少repaint频率
  • 使用 DocumentFragment
  • virtual dom

提升页面性能

资源压缩合并，减少http请求

非核心代码异步加载

  • 动态脚本加载
  • defer：html解析完之后执行，如果是多个则按照顺序执行
  • async：加载完之后立即执行，如果是多个，执行顺序与加载顺序无关

浏览器缓存

请查看备战校招第三天

CDN加速

预解析DNS

浏览器默认会进行a标签dns解析，但https协议的可能会默认不解析，下面这行代码强制开启a标签dns解析

1
<meta http-equiv="x-dns-prefetch-control" content="on" />

预解析

1
<link rel="dns-prefetch" href="//host_name_to_prefetch.com" />

错误监控

前端错误的分类

  • 即时运行错误
  • 资源加载错误

错误的捕获方式

运行时错误捕获方式

  • try..catch
  • window.onerror

资源加载错误

  • object.onerror
  • performance.getEntries()
  • window.Error 事件捕获（冒泡获取不到）

上报错误的基本原理

  • Ajax 通信方式上报

  • 利用 Image 对象上报

    1
    (new Image()).src="https://baidu.com/uploadError?type=1"