面试课程笔记

面试 笔记

HTTP 协议类

主要特点：

• 无连接：我连接一次，之后就会断掉，不会保持连接
• 无状态： 客户端和服务端是两种身份，每次服务端无法分辨上次和这次的访问是否是同一个身份，单从 HTTP 协议是无法分辨连接的客户端身份的
• 灵活： 通过一个 HTTP 协议可以完成不同的数据类型传输
• 简单快速：每个资源 uri 是固定的，处理起来非常简单

报文的组成部分

两个部分： 请求报文 响应报文

请求报文：

• 请求行：HTTP方法 页面地址 HTTP 协议以及版本
• 请求头：KEY VALUE 值来告诉服务端我要什么内容
• 空行：请求头结束，下一部分是请求体部分
• 请求体：

响应报文 同上

• 状态行：
• 响应头
• 空行
• 响应体

HTTP 方法

• GET 获取
• POST 传输
• PUT 更新资源
• DELETE 删除资源
• HEAD 获得报文首部

GET POST 的区别

• GET 在浏览器回退时是无害的，而 POST 会在此请求请求 *
• GET 产生的 URL 地址可以被收藏，POST 不可以
• GET 请求会被浏览器主动缓存，而 POST 不会，除非手动设置 *
• GET 请求支持能进行 url 编码，POST 支持多种编码方式
• GET 请求参数会被完整保留在历史记录，而 POST 的参数不会被保留 *
• GET 请求在 URL 中传送的参数是有长度限制的，POST 没有限制 *
• 对参数的数据类型，GET 只接受 ASCII 字符，POST 没有限制
• GET 比 POST 更不安全，因为参数直接暴露在 URL 上，所以不能用来传递敏感信息
• GET 参数通过 URL 传递，POST 放在请求体中 *

HTTP 状态码

• 1xx 知识信息
• 2xx 成功 200 成功 206 Range 完成
• 3xx 重定向 302 临时 301 永久 304 缓存
• 4xx 客户端错误 400语法错误 401 请求未授权 403 被禁止 404 资源不存在
• 5xx 服务器错误 500服务器错误 503服务器临时过载

持久连接

HTTP 协议采用「请求-应答」模式，普通情况下，每个请求/应答都新建一个连接，完成之后立即断开
Keep-Alive 模式： 1.1 版本 才支持的，使客服端到服务器端的连接持续有效，当出现对服务器的后继请求时，避免了建立或者重新建立连接。

管线化

持久连接的情况下，把请求打包发送过去，响应打包发送回来。
请求1->请求2->请求3
- 仅1.1支持
- GET 和 HEAD 可以管鲜花，POST 有所限制
- 初次连接时不应该应用管线机制，因为服务器不一定支持
- 不会影响响应到来顺序
- 不会带来大幅度的性能提升，chrome firefox 默认不开启管线化支持

原型链类

创建对象的方法

var o1 = {name: 'o1'}
var o2 = new Object({name: 'o2'})
var M = function(name) {this.name = name}
var o2 = new M('o3')
var p = {name: 'p'}
var o4 = Object.create(p)

原型、构造函数、实例、原型链

通信类

什么是同源策略及限制

同源策略限制从一个源加载的文档或脚本来自另一个源的资源进行交货。
（同源：同样的端口 协议 域名）
这是一个用于隔离潜在恶意文件的关键的安全机制。

• Cookie、LocatStroage 和 IndexDB 无法读取
• DOM 无法获得
• AJAX 请求不能发送

前后端如何通信

• Ajax 同源下面的通信方式
• WebSocket 不受同源限制
• CORS 新的通信协议标准

如何创建 Ajax

• XMLHttpRequest 对象的工作流程： 第一步第二步干嘛
• 兼容性处理：高阶浏览器才支持，老版的不支持（我忘了 IE 下面的对象是什么了，问一下可不可以忽略 IE 兼容性）
• 事件的触发条件
• 事件的触发顺序

跨域通信的几种方式

• JSONP 原理、怎么实现
• Hash hash 变动，页面不刷新（search 改变刷新页面）
• postMessage （HTML5中新增的标准）
• WebSocket 本身就不受跨域限制
• CORS 新出的标准（支持跨域通讯的 Ajax），在 HTTP 请求头中加一个 Origin

JSONP

在 postmessage cors 之前
利用 script 标签的异步加载来实现的
1. 本地注册一个全局函数 callback 回调函数
2. 给服务端传一个 callback 名称，参数
3. 服务器传递回来一个内容 jsonp({data:xxx})
4. script.onload监听标签是否加载完成
5. 结束之后及时溢出 script 的 DOM 对象
6. 删除 callback 函数

Hash

在页面 A 通过 iframe 或者 frame 嵌入一个跨域的页面 B

var B = document.getElementsByTagName('iframe')
B.src = B.src + "#" + 'data';

在 B 中

window.onhashchange = function() {
    var data = window.location.hash
    // 如果有其他的需要处理
}

postMessage

窗口 A(http://a.com)向跨域的窗口 B(http://B.com)发送消息
Awindow.postMessage('data', 'http://B.com')
在 B 窗口监听

window.addEventListener('message', function(event) {
    console.log(event.origin) // https://a.com
    console.log(event.source) // Awindow
    console.log(event.data) // data
}, false)

WebSocket

var ws = new WebSocket('wss:// a.org')
ws.onopen = function(e) {
    console.log('Connection open ...')
    ws.send('hello')
}
ws.onmessage = function(e) {
    console.log(e.data)
    ws.close()
}
ws.onclose = function(e) {
    console.log('connection closed')
}

CORS

浏览器会拦截 ajax 请求，如果浏览器认为这是跨域的，会在 HTTP 头中加一个 origin 再发送

fetch('/some/url', {
    method: 'get',
}).then((res)=>{
}).catch((err)=>{
})

安全类

CSRF

• 基本概念和缩写
• 攻击原理
• 防御措施

跨站请求伪造 Cross-site request forgery

攻击原理

防御措施

• Token 验证
• Referer 验证：判断页面来源
• 隐藏令牌：在 header 上藏一个参数

XSS

基本概念

攻击原理

向你页面注入脚本，提交 script 标签，

防御措施

让 xss 注入不可执行

区别

xss 向页面注入 script 标签，在 script 里面做想做的事情
csrf 利用本身的漏洞，自动执行接口，依赖用户需要登录网站

名称 原理 防御措施

算法

• 排序
• 堆栈、队列、链表
• 递归
• 波兰式和逆波兰式

排序

• 快速排序
• 选择排序
• 希尔排序

堆栈、队列、列表

• 堆栈
• 队列
• 链表

递归

• 递归

波兰式和逆波兰式

• 建议放弃

二面

渲染机制

• 什么是 DOCTYPE 及作用
• 浏览器渲染过程
• 重排 Reflow
• 重绘 Repaint
• 布局 Layout

DOCTYPE

DTD（document type definition，文档类型定义）是一系列的语法规则，用来定义 XML 或者 (X)HTML的文件类型，浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式。
DOCTYPE用来生命文档类型和 DTD 协议的，一个主要用途是文件的合法验证，如果不合法，name 浏览器解析时就会出现一些差错。
直接告诉浏览器，当前文档是哪个 DTD。

常见的 DOCTYPE

• HTML5
• HTML4.01 Strict 不包括展示型和启用的元素，比如 font
• HTML4.01 Transitional 包含所有的 HTML 元素和属性

渲染过程

重排

DOM 结构中的各个元素都有自己的盒子模型，这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程叫重排 reflow
触发条件：
- 增加删除修改 DOM 节点时，reflow+repaint
- 移动 DOM 位置，或者做动画的时候
- 修改 CSS 样式的时候
- Resize 窗口的时候，可能会
- 修改网页默认字体的时候

重绘 repaint

当各种盒子的位置、大小、属性（颜色、字体大小）确定下来之后，浏览器于是把这些元素都按照各自的特性绘制一遍，于是内容出现了。这个过程叫 repaint
触发条件：
- DOM 改动
- CSS 改动
如何尽量降低 repaint 频率？
先创建一个片段，然后一并塞进去，最后再加入页面上

JS运行机制

JS 的单线程
任务队列：同步任务队列，异步任务
Event Loop
哪些语句会放入异步任务队列
理解语句放入异步任务队列的时机

页面性能

提升页面性能的方法：
- 资源压缩合并，减少 HTTP 请求
- 非核心代码异步加载 -> 异步加载的方式 -> 异步加载的区别
- 利用浏览器缓存 -> 换准的分类 -> 缓存的原理
- 使用 CDN
- 预解析 DNS

// 强制打开 https 页面的 a 标签预解析
<meta http-equiv="x-dns-prefetch-control" content="on">
// 预解析 DNS
<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

异步加载

1. 异步加载的方式
   
   1. 动态脚本加载 js 异步加载
   2. defer
   3. async
2. 异步加载的区别
   
   1. defer 是在 HTML 解析完之后才会执行，如果是多个，按照加载的顺序依次执行
   2. async 是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

浏览器缓存

1. 缓存的分类
   

错误监控