浏览器

1. 从输入 url 到展示的过程

浏览器根据请求的 URL 交给 DNS 域名解析， 找到真实 IP， 向服务器发起请求；
服务器交给后台处理完成后返回数据， 浏览器接收文件（HTML、 JS、 CSS、 图象 浏览器对加载到的资源（HTML、 JS、 CSS 等） 进行语法解析， 建立相应的内部数据结构（如HTML 的 DOM Tree）；
载入解析到的资源文件， 渲染页面， 完成。
具体
DNS 解析:将域名解析成 IP 地址
TCP 连接： TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接： TCP 四次挥手
TCP 三次握手结束后， 开始发送 HTTP 请求报文。 请求报文由请求行（ requestline）、 请求头（ header）、 请求体
1.请求行包含请求方法、 URL、 协议版本
2.请求头包含请求的附加信息， 由关键字值对组成， 每行一对， 关键字和值用英文冒号“ :” 分隔。 比如： Host， 表示主机名， 虚拟主机;Connection,HTTP/1.1 增加的， 使用 keepalive， 即持久连接， 一个连接可以发多个请求； User-Agent， 请求发出者， 兼容性以及定制化需求。
3.请求体， 可以承载多个请求参数的数据， 包含回车符、 换行符和请求数据， 并不是所有请求都具有请求数据
首先浏览器发送过来的请求先经过控制器， 控制器进行逻辑处理和请求分发,接着会调用模型,这一阶段模型会获取 redis db 以及 MySQL 的数据， 获取数据后将渲染好的页面， 响应信息会以响应报文的形式返回给客户端， 最后浏览器通过渲染引擎将网页呈现在用户面前。
根据 HTML 解析出 DOM 树
根据 CSS 解析生成 CSS 规则树
结合 DOM 树和 CSS 规则树， 生成渲染树
根据渲染树计算每一个节点的信息

2.重绘与回流

当元素的样式发生变化时， 浏览器需要触发更新， 重新绘制元素。 这个过程中， 有两种类型
的操作， 即重绘与回流。
重绘(repaint): 当元素样式的改变不影响布局时， 浏览器将使用重绘对元素进行更新， 此时
由于只需要 UI 层面的重新像素绘制， 因此 损耗较少
回流(reflow): 当元素的尺寸、 结构或触发某些属性时， 浏览器会重新渲染页面， 称为回流。
此时， 浏览器需要重新经过计算， 计算后还需要重新页面布局， 因此是较重的操作。 会触发
回流的操作:
o 页面初次渲染
o 浏览器窗口大小改变
o 元素尺寸、 位置、 内容发生改变
o 元素字体大小变化
o 添加或者删除可见的 dom 元素
o 激活 CSS 伪类（例如： :hover）
o 查询某些属性或调用某些方法
clientWidth、 clientHeight、 clientTop、 clientLeft
offsetWidth、 offsetHeight、 offsetTop、 offsetLeft
scrollWidth、 scrollHeight、 scrollTop、 scrollLeft
getComputedStyle()
getBoundingClientRect()
scrollTo()
回流必定触发重绘， 重绘不一定触发回流。 重绘的开销较小， 回流的代价较高。

4.如何减少重绘和回流

通过 classname 或 cssText 一次性修改样式, 而非一个一个改
离线模式: 克隆要操作的结点, 操作后再与原始结点交换, 类似于虚拟 DOM
避免频繁直接访问计算后的样式, 而是先将信息保存下来
绝对布局的 DOM, 不会造成大量 reflow
p 不要嵌套太深, 不要超过六层。

5. 内存泄露

意外的全局变量: 无法被回收
定时器: 未被正确关闭， 导致所引用的外部变量无法被释放
事件监听: 没有正确销毁 (低版本浏览器可能出现)
闭包: 会导致父级中的变量无法被释放
dom 引用: dom 元素被删除时， 内存中的引用未被正确清空
可用 chrome 中的 timeline 进行内存标记， 可视化查看内存的变化情况， 找出异常点。

6.localStorage 与 sessionStorage 与 cookie 的区别总结?

共同
点: 都保存在浏览器端, 且同源localStorage 与 sessionStorage 统称 webStorage,保存在浏览器,不参与服务器通信,大小为5M.
生命周期不同: localStorage 永久保存, sessionStorage 当前会话, 都可手动清除
作用域不同: 不同浏览器不共享 local 和 session, 不同会话不共享 session
Cookie: 设置的过期时间前一直有效, 大小 4K.有个数限制, 各浏览器不同, 一般为 20 个.携带在 HTTP 头中, 过多会有性能问题.可自己封装, 也可用原生.

7.浏览器如何阻止事件传播， 阻止默认行为?

阻止事件传播(冒泡): e.stopPropagation() 阻止默认行为: e.preventDefault()

8.浏览器事件机制中事件触发三个阶段

事件捕获阶段: 从 dom 树节点往下找到目标节点, 不会触发函数
事件目标处理函数: 到达目标节点
事件冒泡: 最后从目标节点往顶层元素传递, 通常函数在此阶段执行.
addEventListener 第三个参数默认 false(冒泡阶段执行),true(捕获阶段执行)

9.什么是跨域？ 为什么浏览器要使用同源策略？ 你有几种方式可以解决跨域问题？ 了解预检请求嘛？

跨域是指一个域下的文档或脚本试图去请求另一个- 域下的资源
防止 XSS、 CSFR 等攻击, 协议+域名+端口不同
jsonp; 跨域资源共享（CORS） (Access control); 服务器正向代理等
预
检请求: 需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

10.为什么操作 DOM 慢？

DOM 本身是一个 js 对象, 操作这个对象本身不慢, 但是操作后触发了浏览器的行为, 如repaint 和 reflow 等浏览器行为, 使其变慢。

11.什么情况会阻塞渲染？

js 脚本同步执行
css 和图片虽然是异步加载, 但 js 文件执行需依赖 css, 所以 css 也会阻塞渲染

12.浏览器内核

浏览器内核可以分成两部分： 渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。
浏览器的内核的不同对于网页的语法解释会有不同， 所以渲染的效果也不相同。 所有网页浏览器、 电子邮件客户端以及其它需要编辑、 显示网络内容的应用程序都需要内核

渲染引擎

渲染引擎负责取得网页的内容（ HTML、 XML、 图像等等）、 整理讯息（ 例如加入 CSS 等），以及计算网页的显示方式， 然后会输出至显示器或打印机。

JS 引擎

JS 引擎则是解析 Javascript 语言， 执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确， 后来 JS 引擎越来越独立， 内核就倾向于只指渲染引擎。

13. 常见的 DOCTYPE 声明有几种？

HTML中常见声明类型共有8种，分别是html5有1种，HTML 4.01和XHTML 1.0都有3种，XHTML 1.1有1种 1.HTML5 声明——》

2.HTML 4.01和XHTML 1.0

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

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

　　　　framesets该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

3.XHTML 1.1规定了一种声明， 等同于 XHTML 1.0 Strict，但允许添加模型。

14. 请描述一下 cookie、 sessionStorage、 localStorage的区别？

存储大小： cookie 数据不能超过 4k， sessionStorage 和 localStorage， 可以达到 5M 或更大数据有效期： sessionStorage 关闭标签就去清除； localStorage 需要手动清除；
cookie 在设置的 cookie 过期时间之前一直有效请求数据， cookie 可以作为请求参数去请求服务器接口， 即 cookie 在浏览器和服务器间来回传递
作用范围： cookie 只属于某个路径下， 需要设置路径， 同源窗口共享，
sessionStorage 不在不同的浏览器窗口中共享， localStorage 在所有同源窗口中都是共享的
如何实现浏览器内多个标签页之间的通信
localstorage、 cookies 等本地存储方式
使用 url 带参数做页面间的跳转
可以把数据传给后端， 在另一个页面再去请求后端的接口拿数据

网络

1.http 和 https

HTTPS 协议需要到 CA （ Certificate Authority， 证书颁发机构） 申请证书，
一般免费证书较少， 因而需要一定费用
HTTP 是超文本传输协议， 信息是明文传输， HTTPS 则是具有安全性的 SSL 加密
传输协议。
HTTP 和 HTTPS 使用的是完全不同的连接方式， 用的端口也不一样， 前者是 80，
后者是 443。
HTTP 的连接很简单， 是无状态的。 HTTPS 协议是由 SSL+HTTP 协议构建的可进
行加密传输、 身份认证的网络协议， 比 HTTP 协议安全。 (无状态的意思是其数
据包的发送、 传输和接收都是相互独立的。 无连接的意思是指通信双方都不长久
的维持对方的任何信息。 )

2.http 状态码

1**: 服务器收到请求, 需请求者进一步操作
2**: 请求成功
3**: 重定向, 资源被转移到其他 URL 了
4**: 客户端错误, 请求语法错误或没有找到相应资源
5**: 服务端错误, server error
301: 资源(网页等)被永久转移到其他 URL, 返回值中包含新的 URL, 浏览器会自动定向到新
URL
302: 临时转移. 客户端应访问原有 URL
304: Not Modified. 指定日期后未修改, 不返回资源
403: 服务器拒绝执行请求
404: 请求的资源(网页等)不存在
500: 内部服务器错误

3.TCP 和 UDP 协议

TCP（ Transmission Control Protocol： 传输控制协议； 面向连接， 可靠传输
UDP（ User Datagram Protocol）： 用户数据报协议； 面向无连接， 不可靠传输

5. TCP三次握手

6. 为什么 TCP 连接要建立三次连接？

为了防止失效的连接请求又传送到主机， 因而产生错误。如果使用的是两次握手建立连接， 假设有这样一种场景， 客户端发送了第一个请求连接并且没有丢失， 只是因为在网络结点中滞留的时间太长了， 由于 TCP 的客户端迟迟没有收到确认报文， 以为服务器没有收到， 此时重新向服务器发送这条报文， 此后客户端和服务器经过两次握手完成连接， 传输数据， 然后关闭连接。此时此前滞留的那一次请求连接， 网络通畅了到达了服务器， 这个报文本该是失效的， 但是， 两次握手的机制将会让客户端和服务器再次建立连接， 这将导致不必要的错误和资源的浪费。如果采用的是三次握手， 就算是那一次失效的报文传送过来了， 服务端接受到了那条失效报文并且回复了确认报文， 但是客户端不会再次发出确认。 由于服务器收不到确认， 就知道客户端并没有请求连接。

7. TCP四次挥手

8. 为什么要 4 次挥手？

TCP 协议是一种面向连接的、 可靠的、 基于字节流的传输层通信协议， 是一个全双工模式：
1、 当主机 A 确认发送完数据且知道 B 已经接受完了， 想要关闭发送数据口（当然确认信号还是可以发）， 就会发 FIN 给主机 B。
2、 主机 B 收到 A 发送的 FIN， 表示收到了， 就会发送 ACK 回复。
3、 但这是 B 可能还在发送数据， 没有想要关闭数据口的意思， 所以 FIN 与 ACK
不是同时发送的， 而是等到 B 数据发送完了， 才会发送 FIN 给主机 A。
4、 A 收到 B 发来的 FIN， 知道 B 的数据也发送完了， 回复 ACK， A 等待 2MSL 以 后， 没有收到 B 传来的任何消息， 知道 B 已经收到自己的 ACK 了， A 就关闭链接，
B 也关闭链接了。
确保数据能够完成传输\

9. HTTP 版本

10. OSI模型，以及各层的作用

OSI 分层	（7 层）： 物理层、 数据链路层、 网络层、 传输层、 会话层、 表示层、应用层
TCP/IP 分层（4 层）	： 网络接口层、 网际层、 运输层、 应用层。
五层协议	（5 层）： 物理层、 数据链路层、 网络层、 运输层、 应用层。

每一层的作用如下：
物理层： 通过媒介传输比特,确定机械及电气规范（比特 Bit）
数据链路层： 将比特组装成帧和点到点的传递（帧 Frame）
网络层： 负责数据包从源到宿的传递和网际互连（包 PackeT）
传输层： 提供端到端的可靠报文传递和错误恢复（段 Segment）
会话层： 建立、 管理和终止会话（会话协议数据单元 SPDU）
表示层： 对数据进行翻译、 加密和压缩（表示协议数据单元 PPDU）
应用层： 允许访问 OSI 环境的手段（应用协议数据单元 APDU）

11. 进程和线程的区别

进程： 是并发执行的程序在执行过程中分配和管理资源的基本单位， 是一个动态概念， 竞争
计算机系统资源的基本单位。
线程： 是进程的一个执行单元， 是进程内科调度实体。 比进程更小的独立运行的基本单位。
线程也被称为轻量级进程。
一个程序至少一个进程， 一个进程至少一个线程

12.什么是 XXS 攻击？

即跨站脚本攻击（Cross Site Scripting） ， 它 是 web 程序中常见的漏洞。 原理 攻击者往 web 页面里插入恶意的 HTML 代码（Javascript、css、html 标签等） ， 当用户浏览该页面时 ， 嵌入其中的 HTML 代码会被执行 ， 从而达到恶意攻击用户的目的。
XSS 类型：
一般可以分为： 持久型 XSS 和非持久性 XSS
持久型 XSS 就是对客户端攻击的脚本植入到服务器上， 从而导致每个正常访问
到的用户都会遭到这段 XSS 脚本的攻击。 (如上述的留言评论功能)
非持久型 XSS 是对一个面的 URL 中的某个参数做文章， 把精心构造好的恶意
脚本包装在 URL 参数重， 再将这个 URL 发布到网上， 骗取用户访问， 从而进行
攻击。

13. CSRF 攻击?

CSRF(Cross-site request forgery), 中文名称： 跨站请求伪造
CSRF 可以简单理解为： 攻击者盗用了你的身份， 以你的名义发送恶意请求， 容易造成个人隐私泄露以及财产安全
防范：
post 请求
使用 token
验证码

14. DDOS 攻击

利用目标系统网络服务功能缺陷或者直接消耗其系统资源， 使得该目标系统无法
提供正常的服务。
DDoS 攻击通过大量合法的请求占用大量网络资源， 以达到瘫痪网络的目的。 具体有几种形式：
通过使网络过载来干扰甚至阻断正常的网络通讯； 通过向服务器提交大量请求，
使服务器超负荷； 阻断某一用户访问服务器； 阻断某服务与特定系统或个人的
通讯。