面试之浏览器

HTTPS：是以安全为目标的 HTTP 通道，是 HTTP 的安全版。HTTPS 的安全基础是 SSL。SSL 协议位于 TCP/IP 协议与各种应用层协议之间，为数据通讯提供安全支持。SSL 协议可分为两层：SSL 记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL 握手协议（SSL Handshake Protocol），它建立在 SSL 记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

HTTP 与 HTTPS 的区别

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

如何让Chrome浏览器显示小于12px的文字

1. -webkit-text-size-adjust:none;（Chrome 27之后不支持）
2. -webkit-transform:scale(0.8); // 缩放属性

transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;属性就好啦。

如何实现页面每次打开时清除本页缓存

用HTML标签设置HTTP头信息

<HEAD>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">
</HEAD>

说明：HTTP头信息“Expires”和“Cache-Control”为应用程序服务器提供了一个控制浏览器和代理服务器上缓存的机制。HTTP头信息Expires告诉代理服务器它的缓存页面何时将过期。HTTP1.1规范中新定义的头信息Cache-Control可以通知浏览器不缓存任何页面。当点击后退按钮时，浏览器重新访问服务器以获取页面。如下是使用Cache-Control的基本方法：

1. no-cache:强制缓存从服务器上获取新的页面
2. no-store: 在任何环境下缓存不保存任何页面

HTTP1.0规范中的Pragma:no-cache等同于HTTP1.1规范中的Cache-Control:no-cache，同样可以包含在头信息中。

在需要打开的url后面增加一个随机的参数：

（chrome）现在新版的Chrome在developer Tools（F12调出来）的Settings（右下角有个齿轮标志）中有了个Disable cache选项。勾了便可以。

ajax方法：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,

用PHP后端清理

在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

window.location.replace("");

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

1. 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
2. 离线的情况下，浏览器就直接使用离线存储的资源。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

网页验证码是干嘛的，是为了解决什么安全问题

1. 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
2. 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

浏览器是怎样解析CSS选择器的？

浏览器会『从右往左』解析CSS选择器。

我们知道DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上， 因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。 以下这段css为例

<style type="text/css">
.mod-nav h3 span {font-size: 16px;}
</style>

若从左向右的匹配，过程是：

从 .mod-nav 开始，遍历子节点 header 和子节点 div 然后各自向子节点遍历。在右侧 div 的分支中 最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，一颗DOM树的节点动不动上千，这种效率很低。

如果从右至左的匹配：

先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3 由 h3再向上寻找 class="mod-nav" 的节点 最后找到根元素 html 则结束这个分支的遍历。

后者匹配性能更好，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点）；而从左向右的匹配规则的性能都浪费在了失败的查找上面。

什么是Virtual DOM,为何要用Virtual DOM

vdom是什么？为什么存在？

js是图灵完备语言，能实现各种逻辑和算法的语言。

1. 用js模拟dom结构。
2. dom发生变化的对比，放在js层做。
3. 提高重绘的性能

js是图灵完备语言，能实现各种逻辑和算法的语言。

1. dom操作是非常昂贵的
2. js的运行效率是非常高的

如何使用？核心api是什么?

vue 和 vdom 是借用了snabbdom来实现的。

github: https://github.com/snabbdom/snabbdom

使用方法：

1. 引入snabbdom的js文件
2. 初始化snabbdom的patch和h函数
3. 创建虚拟vdom
4. 第一次把vdom渲染到页面
5. 建立新的vdom，newVdom
6. 然后把newVdom和vdom进行对比
7. 最后只改变修改的dom

diff算法？

diff 算法是用来对比两个文件有哪里不同的，是linux的基础的命令。

Vdom为什么要用diff算法？

1. dom操作是昂贵的
2. 找本次修改的dom，其他的节点不动
3. 找出的过程就是diff算法

diff算法核心流程？

1、如何用vnode生成一个dom的节点？

1. patch方法
2. patch(container, vnode)
3. patch(vnode, newVnode)

2、vnode和newVnode的对比 3、修改改变的dom节点

1. replacechildren
2. createElement