1. 浏览器存储的方式有哪些？

常见的浏览器存储主要有：
1.属于文档对象模型(DOM)：document.cookie，
2.属于浏览器对象模型(BOM)localStorage，sessionStorage，indexedDB
Cookie
h5之前，存储主要用cookies，缺点是在请求头上带着数据，导致流量增加。大小限制4k
localStorage
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。IE8+支持，每个域名限制5M
sessionStorage
sessionStorage操作的方法与localStroage是一样的，区别在于sessionStorage在关闭页面后即被清空，而localStorage则会一直保存。很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage就比较方便。
注意，刷新页面sessionStorage不会清除，但是打开同域新页面访问不到
区别：
1.  cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2.  存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，
所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，
但比cookie大得多，可以达到5M或更大。
3.  数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.  作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；
localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
6.  Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
7.  Web Storage 的api接口使用更方便，cookie的原生接口不友好，需要自己封装。localStorage 注意点：
localStorage 只能存字符串，存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse()
遇上禁用 setItem 的浏览器，需要使用 try...catch 捕获异常

2.对前后端跨域可以说一下吗？如何解决跨域的？

跨域
**1、Jsonp,只能使用get提交，传输数据量有限**
**2、CORS(Corss-origin resource sharing)跨域资源共享，支持post提交**
**CORS原理，只需要在响应头header中注入Access-Control-Allow-Origin，这样浏览器坚持到，
就可以跨域**
**一、CORS跨域需要浏览器与服务端同时支持，目前所有浏览器都支持，IE不能低于IE10**
**整个CORS通信，浏览器自动完成，对于开发者来说，CORS通信和AJAX通信没有区别，
浏览器一旦发现AJAX请求跨域，
**会自动添加一些附加的头信息**
**因此，实现CORS的关键是服务器，只要服务器实现CORS接口，就可以跨域通信**
**二、两种请求**
**浏览器将CORS请求分为两类，简单请求，非简单请求**
**只要同时满足以下两大条件，就属于简单请求。**
**（1) 请求方法是以下三种方法之一：**
**HEAD**
**GET**
**POST**
**（2）HTTP的头信息不超出以下几种字段：**
**Accept**
**Accept-Language**
**Content-Language**
**Last-Event-ID**
**Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain**
**凡是不同时满足上面两个条件，就属于非简单请求。**
**浏览器对这两种请求的处理，是不一样的。**
**1、简单请求**
**浏览器会自动在头信息中添加一个Origin字段**
**origin字段用来说明，本次请求来至哪个服务器（协议+域名+端口）**
**如果指定的源，不在许可范围之内，会返回一个正常的http回应，浏览器发现这个响应头信息中不包含**
**Access-Control-Allow-Origin字段，就会抛出异常被onerror回调函数捕获，无法通过状态码判断，
因为可能是200**
**如果指定的域名在许可的范围内，服务返回的响应的头信息就会多几个字段**
**Access-Control-Allow-Origin: http://api.bob.com**
**Access-Control-Allow-Credentials: true**
**Access-Control-Expose-Headers: FooBar**
**Content-Type: text/html; charset=utf-8**
**Access-Control-Allow-Origin:**
**该字段必须，它的值要么是请求时Origin自动的值，要么是\*，代表接收所有域名的请求**
**Access-Control-Allow-Credentials：**
**可选，boolean值，代表是否允许发送cookie，这个值只能为true,不发送就删除该字段**
**在AJAX请求中打开withCredentials属性，否则浏览器可能不会发送，如果要发送，请求域名就不能为\***
**Access-Control-Expose-Headers：**
**XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：**
**Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。**
**如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。**
**上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。**
**2、非简单请求**
**非简单请求：是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，**
**或者Content-Type字段的类型是application/json。**
**非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。**
**浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，
以及可以使用哪些HTTP动词和头信息字段。**
**只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。**
**预检请求**
**"预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，**
**表示请求来自哪个源。**
**除了Origin字段，"预检"请求的头信息包括两个特殊字段。**
**（1）Access-Control-Request-Method**
**该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。**
**（2）Access-Control-Request-Headers**
**该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，
上例是X-Custom-Header。**
**如果浏览器否定了"预检"请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。**
**这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，
被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。**
**XMLHttpRequest cannot load http://api.alice.com.**
**Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.**
**三、spring 只需添加CorssOrgine注解实现跨域**
**corssOrgine注解，默认允许所有的域请求**

3.浏览器 cookie 和 session 的认识。

session 是基于 cookie 实现的。cookie 保存在客户端浏览器中，而 session 保存在服务器上。cookie 机制是通过检查客户身上的“通行证”来确定客户身份的话，
那么 session 机制就是通过检查服务器上的“客户明细表”来确认客户身份。session 相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。cookie 和 session 的区别：存在的位置：
cookie 存在于客户端，临时文件夹中；session 存在于服务器的内存中，一个 session 域对象为一个用户浏览器服务
安全性
cookie 是以明文的方式存放在客户端的，安全性低，可以通过一个加密算法进行加密后存放；
session 存放于服务器的内存中，所以安全性好
生命周期(以 20 分钟为例)
cookie 的生命周期是累计的，从创建时，就开始计时，20 分钟后 cookie 生命周期结束；
session 的生命周期是间隔的，从创建时，开始计时如在 20 分钟，没有访问 session，
那么 session 生命周期被销毁。但是，如果在 20 分钟内（如在第 19 分钟时）访问过 session，
那么，将重新计算 session 的生命周期。关机会造成 session 生命周期的结束，但是对 cookie 没有影响
访问范围
cookie 为多个用户浏览器共享；session 为一个用户浏览器独享

4.输入URL发生什么？

1.DNS 域名解析（域名解析成ip地址，走UTP协议，因此不会有握手过程）：
浏览器将 URL 解析出相对应的服务器的 IP 地址（1. 本地浏览器的 DNS 缓存中查找 2. 再向系统DNS缓存发送查询请求 3. 再向路由器DNS缓存 4. 网络运营商DNS缓存 5. 递归搜索），并从 url 中解析出端口号
2.浏览器与目标服务器建立一条 TCP 连接（三次握手）
3.浏览器向服务器发送一条 HTTP 请求报文
4.服务器返回给浏览器一条 HTTP 响应报文
5.浏览器进行渲染
6.关闭 TCP 连接（四次挥手）

5.浏览器渲染的步骤

1.HTML 解析出 DOM Tree
2.CSS 解析出 Style Rules
3.两者关联生成 Render Tree
4.Layout（布局）根据 Render Tree 计算每个节点的信息
5.Painting 根据计算好的信息进行渲染整个页面
浏览器解析文档的过程中，如果遇到 script 标签，会立即解析脚本，停止解析文档（
因为 JS 可能会改变 DOM 和 CSS,如果继续解析会造成浪费）。
如果是外部 script, 会等待脚本下载完成之后在继续解析文档。现在 script 标签增加了 defer 和 async 属性，
脚本解析会将脚本中改变 DOM 和 css 的地方> 解析出来，追加到 DOM Tree 和 Style Rules 上

6.页面渲染优化

基于对渲染过程的了解，推荐一下优化：1.HTML 文档结构层次尽量少，最好不深于 6 层
2.脚本尽量放后边，避免组织页面加载
3.少量首屏样式可以放在便签内
4.样式结构层次尽量简单
5.脚本减少 DOM 操作，减少回流，尽量缓存访问 DOM 的样式信息
6.尽量减少 JS 修改样式，可以通过修改 class 名的方式解决
7.减少 DOM 查找，缓存 DOM 查找结果
8.动画在屏幕外或页面滚动时，尽量停止

7.强制缓存和协商缓存

强制缓存是我们在第一次请求资源时在 http 响应头设置一个过期时间，在时效内都将直接从浏览器进行获取，
常见的 http 响应头字段如 Cache-Control 和 Expires协商缓存是我们通过 http 响应头字段 etag 或者 Last-Modified 等判断服务器上资源是否修改，如果修改则从服务器重新获取，
如果未修改则 304 指向浏览器缓存中进行获取

8.GET 和 POST 请求的区别

GET 参数通过 url 传递，POST 放在 body 中。（http 协议规定，url 在请求头中，所以大小限制很小）
GET 请求在 url 中传递的参数是有长度限制的，而 POST 没有。原因见上↑↑↑
GET 在浏览器回退时是无害的，而 POST 会再次提交请求
GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置
GET 比 POST 更不安全，因为参数直接暴露在 url 中，所以不能用来传递敏感信息
对参数的数据类型，GET 只接受 ASCII字符，而 POST 没有限制
GET 请求只能进行 url(x-www-form-urlencoded)编码，而 POST 支持多种编码方式
GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。对于 GET 方式的请求，浏览器会把 http 的 header 和 data 一并发送出去，服务器响应200（返回数据）。
而对于 POST，浏览器先发送 header，服务器响应100 continue，浏览器再发送 data，服务器响应200 ok（返回数据）

9.HTTP1.0 / 1.1 / 2.0 及HTTPS

HTTP1.1 是当前使用最为广泛的HTTP协议HTTP1.0 和 HTTP1.1 相比
HTTP1.0 定义了三种请求方法： GET, POST 和 HEAD 方法。HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。
缓存处理：在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。
带宽优化及网络连接的使用：HTTP1.0中，存在一些浪费带宽的现象，例如客户端只是需要某个对象的一部分，而服务器却将整个对象送过来了，并且不支持断点续传功能，HTTP1.1则在请求头引入了range头域，它允许只请求资源的某个部分，即返回码是206（Partial Content），这样就方便了开发者自由的选择以便于充分利用带宽和连接。
错误通知的管理：在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。
Host头处理：在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名（hostname）。但随着虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机（Multi-homed Web Servers），并且它们共享一个IP地址。HTTP1.1的请求消息和响应消息都应支持Host头域，且请求消息中如果没有Host头域会报告一个错误（400 Bad Request）。
长连接：HTTP 1.1支持长连接（PersistentConnection）和请求的流水线（Pipelining）处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启Connection： keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。通过设置http的请求头部和应答头部，保证本次数据请求结束之后，下一次请求仍可以重用这一通道，避免重新握手。
HTTP2.0 和 HTTP1.X 相比
新的二进制格式（Binary Format）：HTTP1.x的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认0和1的组合。基于这种考虑HTTP2.0的协议解析决定采用二进制格式，实现方便且健壮。
多路复用（MultiPlexing）：即连接共享，即每一个request都是是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id将request再归属到各自不同的服务端请求里面。
header压缩：如上文中所言，对前面提到过HTTP1.x的header带有大量信息，而且每次都要重复发送，HTTP2.0使用了专门为首部压缩而设计的 HPACK 算法，使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。
服务端推送（server push）：服务端推送能把客户端所需要的资源伴随着index.html一起发送到客户端，省去了客户端重复请求的步骤。正因为没有发起请求，建立连接等操作，所以静态资源通过服务端推送的方式可以极大地提升速度。例如我的网页有一个sytle.css的请求，在客户端收到sytle.css数据的同时，服务端会将sytle.js的文件推送给客户端，当客户端再次尝试获取sytle.js时就可以直接从缓存中获取到，不用再发请求了。
HTTPS 与 HTTP 相比
HTTPS协议需要到CA申请证书，一般免费证书很少，需要交费。
HTTP协议运行在TCP之上，所有传输的内容都是明文，HTTPS运行在SSL/TLS之上，SSL/TLS运行在TCP之上，所有传输的内容都经过加密的。
HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
HTTPS可以有效的防止运营商劫持，解决了防劫持的一个大问题。
HTTPS 介绍：HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。握手过程的简单描述如下：1.浏览器将自己支持的一套加密规则发送给网站。2.网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里面包含了网站地址，加密公钥，以及证书的颁发机构等信息。3.获得网站证书之后浏览器要做以下工作：a. 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。b. 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书中提供的公钥加密。c. 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有信息发送给网站。4.网站接收浏览器发来的数据之后要做以下的操作：a. 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是否与浏览器发来的一致。b. 使用密码加密一段握手消息，发送给浏览器。5.浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且可以正常的加密解密数据。其中非对称加密算法用于在握手过程中加密生成的密码，
对称加密算法用于对真正传输的数据进行加密，而HASH算法用于验证数据的完整性。由于浏览器生成的密码是整个数据加密的关键，因此在传输的时候使用了非对称加密算法对其加密。
非对称加密算法会生成公钥和私钥，公钥只能用于加密数据，因此可以随意传输，而网站的私钥用于对数据进行解密，所以网站都会非常小心的保管自己的私钥，防止泄漏。
TLS握手过程中如果有任何错误，都会使加密连接断开，从而阻止了隐私信息的传输。正是由于HTTPS非常的安全，攻击者无法从中找到下手的地方，于是更多的是采用了假证书的手法来欺骗客户端，
从而获取明文的信息。

10.介绍下304过程

a. 浏览器请求资源时首先命中资源的Expires 和 Cache-Control，Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效，
可以通过Cache-control: max-age指定最大生命周期，状态仍然返回200，但不会请求数据，在浏览器中能明显看到from cache字样。b. 强缓存失效，进入协商缓存阶段，首先验证ETagETag可以保证每一个资源是唯一的，资源变化都会导致ETag变化。
服务器根据客户端上送的If-None-Match值来判断是否命中缓存。c. 协商缓存Last-Modify/If-Modify-Since阶段，客户端第一次请求资源时，服务服返回的header中会加上Last-Modify，
Last-modify是一个时间标识该资源的最后修改时间。再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。
服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

11.HTTP 状态码

-1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态码
100 - 继续请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分
101 - 切换协议请求者已要求服务器切换协议，服务器已确认并准备切换
-2xx（成功）表示成功处理了请求的状态码
200 - 成功服务器已经成功处理了请求。通常，这表示服务器提供了请求的网页
201 - 已创建请求成功并且服务器创建了新的资源
202 - 已接受服务器已接受请求，但尚未处理
203 - 非授权信息服务器已经成功处理了请求，但返回的信息可能来自另一来源
204 - 无内容服务器成功处理了请求，但没有返回任何内容
205 - 重置内容服务器成功处理了请求，但没有返回任何内容
206 - 部分内容服务器成功处理了部分GET请求
-3xx（重定向）表示要完成请求，需要进一步操作；通常，这些状态代码用来重定向
300 - 多种选择针对请求，服务器可执行多种操作。服务器可根据请求者（user agent）选择一项操作，或提供操作列表供请求者选择
301 - 永久移动请求的网页已永久移动到新位置。服务器返回此响应（对GET或HEAD请求的响应）时，会自动将请求者转到新位置
302 - 临时移动服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求
303 - 查看其它位置请求者应当对不同的位置使用单独的GET请求来检索响应时，服务器返回此代码
304 - 未修改自上次请求后，请求的网页未修改过。服务器返回此响应，不会返回网页的内容
305 - 使用代理请求者只能使用代理访问请求的网页。如果服务器返回此响应，还表示请求者应使用代理
307 - 临时性重定向服务器目前从不同位置的网页响应请求，但请求者应继续使用原有的位置来进行以后的请求
-4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理
400 - 错误请求服务器不理解请求的语法
401 - 未授权请求要求身份验证。对于需要登录的网页，服务器可能返回此响应
403 - 禁止服务器拒绝请求
404 - 未找到服务器找不到请求的网页
405 - 方法禁用禁用请求中指定的方法
406 - 不接受无法使用请求的内容特性响应请求的网页
407 - 需要代理授权此状态码与401（未授权）类似，但指定请求者应当授权使用代理
408 - 请求超时服务器等候请求时发生超时
409 - 冲突服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息
410 - 已删除如果请求的资源已永久删除，服务器就会返回此响应
411 - 需要有效长度服务器不接受不含有效内容长度标头字段的请求
412 - 未满足前提条件服务器未满足请求者在请求者设置的其中一个前提条件
413 - 请求实体过大服务器无法处理请求，因为请求实体过大，超出了服务器的处理能力
414 - 请求的URI过长请求的URI（通常为网址）过长，服务器无法处理
415 - 不支持媒体类型请求的格式不受请求页面的支持
416 - 请求范围不符合要求如果页面无法提供请求的范围，则服务器会返回此状态码
417 - 未满足期望值服务器未满足“期望”请求标头字段的要求
-5xx（服务器错误）这些状态码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错
500 - 服务器内部错误服务器遇到错误，无法完成请求
501 - 尚未实施服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码
502 - 错误网关服务器作为网关或代理，从上游服务器无法收到无效响应
503 - 服务器不可用服务器目前无法使用（由于超载或者停机维护）。通常，这只是暂时状态
504 - 网关超时服务器作为网关代理，但是没有及时从上游服务器收到请求
505 - HTTP版本不受支持服务器不支持请求中所用的HTTP协议版本页的内容

12.Web性能优化

一、尽量减少前端HTTP请求
浏览器并发线程数有限，所以针对资源文件的优化，一般有：

1、合并脚本文件和CSS文件
2、 CSS Sprites利用CSS background相关元素进行背景图绝对定位,把多个图片合成一个图片。

二、浏览器缓存

在用户浏览网站的不同页面时，很多内容是重复的，比如相同的JS、CSS、图片等。如果我们能够建议甚至强制浏览器在本地缓存这些文件，将大大降低页面产生的流量，从而降低页面载入时间。
1、添加Expires头和Cache-Control
Expires头，浏览器端根据过期时间选择是否加载最新的版本。缺点是：需要服务器和客户端时间的严格同步，
HTTP1.1引入了Cache-Control头来克服Expires头的限制。Cache-Control使用max-age制定组件被缓存多久，使用秒为单位，例如Cache-Control：max-age=3600；表示组件将被缓存60分钟。如果max-age和Expires同时出现，则max-age有更高的优先级，浏览器会根据max-age的时间来确认缓存过期时间。
2、Last-Modified
在上次传输中，服务器给浏览器发送了Last-Modified或Etag数据，再次浏览时浏览器将提交这些数据到服务器，验证本地版本是否最新的，如果为最新的则服务器返回304代码，告诉浏览器直接使用本地版本，否则下载新版本。一般来说，有且只有静态文件，服务器端才会给出这些数据。

三、页面压缩

· 1、GZIP

o IE和Firefox浏览器都支持GZIP解码。后端服务器容器对数据GZIP压缩之后在传输到客户端，浏览器拿到数据后根据 Content-Encoding：gzip 进行解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。

· 2，HTML压缩

· 3，JS压缩混淆

· 4，CSS压缩

· 5，图片压缩，展示尺寸和图片尺寸吻合

四、HTML代码结构优化

1，正确布置行内脚本

· 尽可能使用外部脚本和样式文件

· 脚本尽可能移到底部

· 脚本放在顶部带来的问题，
1）使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞
2）在下载脚本时会阻塞并行下载
放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。所以要综合考虑情况。

· Script延迟加载 defer属性(IE & FF3.1+)、setTimeout

· 风险：行内(内联)脚本在样式表后面。
所有主流浏览器都会保持CSS和JavaScript的顺序。在样式表完全下载、解析及应用之后，内联脚本才能执行。同时，必须在内联脚本执行后，剩余资源才能下载。
CSS的下载解析可以和其他资源并发执行。

2，少用iframe

优点：可以和主页面并行加载
缺点： iframe会阻塞onload事件解决：onload事件后设置iframe的src，或者JS创建iframe节点
和主页面使用同一个连接池
避免src为空—为空默认为主页面地址

3，减少DOM结构的层级
DOM层级越深会增加 CSS rule Tree 和 Dom Tree 匹配构造的性能
4，减少Cookie的大小
5，尽量用div取代table，或者将table打破成嵌套层次深的结构
table会影响页面呈现的速度，只有table里的内容全部加载完才会显示。

五、组件分成多个域

主要的目的是提高页面组件并行下载能力。但不要跨太多域名，建议采用2个子域名。

六、图片懒加载
七、图片，脚本，数据预加载

八、图片base64
九、根据业务实际情况优化，保证首屏加载时间。
前端优化可以避免我们造成无谓的服务器和带宽资源浪费，但随着网站访问量的增加，仅靠前端优化已经不能解决所有问题了，后端程序处理并发请求的能力、程序运行的效率、硬件性能以及系统的可扩展性，将成为影响网站性能和稳定的关键瓶颈所在。

13.什么是重绘？回流

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流，就是在页面第一次加载的时候。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

注：回流必将引起重绘，而重绘不一定会引起回流。

—不同的条件下发生重排的范围及程度会不同：

1.页面初始渲染

2.改变字体，改变元素尺寸（宽、高、内外边距、边框，改变元素位置等

各种情况：

设置 style 属性的值

激活 CSS 伪类，比如 :hover

操作 class 属性

css3的某些属性（https://csstriggers.com/ 结合此链接查看哪些属性会触发重排、哪些属性会触发重绘以及哪些属性会触发合成；）

（注意：如果修改属性不影响布局则不会发生重排）

3…改变元素内容（文本或图片等或比如用户在input框中输入文字）

4.添加/删除可见DOM元素（注意：如果是删除本身就display:none的元素不会发生重排；visibility:hidden的元素显示或隐藏不影响重排）

5.fixed定位的元素,在拖动滚动条的时候会一直回流

调整窗口大小（Resizing the window）

7.计算 offsetWidth 和 offsetHeight 属性【注释2】

【注释2：flush队列】

浏览器是聪明的，当对以下属性进行操作的时候：

包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。

浏览器不会马上操作它们，而是会先缓存在队列中，有一定时间顺序去执行这些操作，但是在这过程中我们需要去获取在该队列中的属性时，浏览器为取得正确的值就会触发重排。这样就使得浏览器的优化失效了。

所以，在多次使用这些值时应进行缓存。

如何减少回流，重绘？

**1.**修改html元素中对应的class名，利用class替换样式

【代码示例】

<style type = "text/css" >
.changeStyle{width: 200px;height: 200px;}
</style >
< script type = "text/javascript" >$(document).ready(function (){var el = $('id');//1el.css('width', '200px');el.css('height', '200px');//2el.css({'width' : '200px;','height' : '200px;'});//3 el.addClass('changeStyle');});
</script >

2. csstext（利用cssText属性合并所有改变，然后一次性写入）

【代码示例】

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!’));
\----------------------------------------------------------------------------
// 不好的写法
var left = 1;
var top = 1;
el.style.left = left + "px";
el.style.top = top + "px";
// 比较好的写法
el.className += " className1";
// 比较好的写法
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

4.3 display:none（隐藏元素，应用修改，重新显示）

【代码示例】

var list = document.getElementById("list");
list.style.display = 'none’;
appendDataToElement(list,data);
list.style.display = 'block';

4 cloneNode （将原始元素拷贝到一个脱离文档的节点中,修改副本,完成后再替换回去；）

【代码示例】

var old = document.getElementById("list");
var clone = old.cloneNode(true);
appendDataToElement(clone,data);
old.parentNode.replaceChild(clone,old);

**5.**document.createDocumentFragment()；（使用文档片段（document fragment）在当前DOM之外构建一个子树，再插回去）

【代码示例】

var fragment = document.createDocumentFragment();
var list = document.getElementById("list");
for (var i = 0; i< 10; i++)
{var _li = document.createElement("li");_li.onmouseover = function (){this.style.backgroundColor = "#22b909";this.style.width = "120px";this.style.height = "50px";}_li.onmouseout = function (){this.style.backgroundColor = "";this.style.width = "100px";this.style.height = "40px";}fragment.appendChild(_li);
}
list.appendChild(fragment);

6 使用trsansform

CSS的最终表现分为以下四步：Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers

按照中文的意思大致是查找并计算样式 -> 排布 -> 绘制 -> 组合层。

由于transform是位于Composite Layers层，而width、left、margin等则是位于Layout层，在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers，

所以相对而言使用transform实现的动画效果肯定比使用改变位置(margin-left等)这些更加流畅。

14.浏览器渲染过程

浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式.
dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。

注意： visibility:hidden隐藏的元素还是会包含到render tree中的，因visibility:hidden 会影响布局(layout)，会占有空间。

1.1 dom树结构,cssom,renderTree
CSSOM : 样式表解析完毕后，系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括：ID哈希表、类名称哈希表、标记名哈希表等，还有一种通用哈希表，适合不属于上述类别的规则。如果选择器是ID，规则就会添加到ID表中；如果选择器是类，规则就会添加到类表中。

注意：此处的cssom（样式结构体）尚有疑问。

1.2 cssom和dom树怎么匹配结合成renderTree ？

（以dom节点匹配cssom）

从本渲染结点开始，判断此结点是否与选择器链表的当前选择器相匹配。如果匹配，判断此选择器与下一个选择器的关系：如果为NONE，表示本选择器是选择器链的最后一个，返回成功；如果关系为AND (比如：#id.class)，选择下一个选择器与本渲染结点继续比较；如果关系为CHILD，表示本选择器是下一个选择器的子结点，返回下一个选择器与下一个渲染结点的匹配结果；否则，关系为DESCENDANT，选择器和渲染结点各指向下一个结点，然后将渲染结点继续回溯，直到第一个满足回溯后的选择器的结点，此时将继续判断回溯后的选择器和回溯后的渲染结点是否匹配。

15.Http和Https的区别？

· https协议需要到CA （Certificate Authority，证书颁发机构）申请证书，一般免费证书较少，因而需要一定费用。

· http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

· http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

· http的连接很简单，是无状态的。Https协议是由SSL+Http协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。(无状态的意思是其数据包的发送、传输和接收都是相互独立的。无连接的意思是指通信双方都不长久的维持对方的任何信息。)

16.浏览器的三次握手。

第一次握手：客户端发送网络包，服务端收到了。这时候服务端的都结论：客户端的发送能力、服务端的接受能力正常。

第二次握手：服务端收到网络包会给客户端响应，这时候服务端发送网络包，客户端收到了，此时的服务端得出结论：服务端的发送能力没有问题，因为客户端没有给服务端响应。

第三次握手：客户端收到网络包后，给服务端响应，这时候客户端给服务端发送网络包，服务端收到了，此时服务端得出结论：客户端的发送、接受能力没有问题，自己的发送，接受能力也没有问题。

17.浏览器的四次挥手

建立一个连接需要三次握手，而终止一个连接要经过四次挥手，这是由于TCP的半关闭造成的，所谓的半关闭就是TCP提供了连接的一端在结束它的发送后还能接收来自另一端数据的能力。

TCP 的连接的拆除需要发送四个包，因此称为四次挥手，客户端或服务端均可主动发起挥手动作。

**第一次挥手：**客户端A发送一个FIN.用来关闭客户A到服务器B的数据传送
第二次挥手：服务器B收到这个FIN. 它发回一个ACK，确认序号为收到的序号+1。和SYN一样，一个FIN将占用一个序号
**第三次挥手：**服务器B关闭与客户端A的连接，发送一个FIN给客户端A
**第四次挥手：**客户端A发回ACK报文确认，并将确认序号设置为序号加1

18.浏览器渲染过程？

浏览器把获取到的html代码解析成1个Dom树，html中的每个tag都是Dom树中的1个节点，根节点就是我们常用的document对象。dom树里面包含了所有的html tag，包括display:none隐藏，还有用JS动态添加的元素等。
浏览器把所有样式(主要包括css和浏览器的样式设置)解析成样式结构体，在解析的过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式.
dom tree和样式结构体(cssom)结合后构建呈现树(render tree),render tree有点类似于dom tree，但其实区别有很大，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中。

注意： visibility:hidden隐藏的元素还是会包含到render tree中的，因visibility:hidden 会影响布局(layout)，会占有空间。

1.1 dom树结构,cssom,renderTree

CSSOM : 样式表解析完毕后，系统会根据选择器将CSS规则添加到对应的哈希表中。这些哈希表包括：ID哈希表、类名称哈希表、标记名哈希表等，还有一种通用哈希表，适合不属于上述类别的规则。如果选择器是ID，规则就会添加到ID表中；如果选择器是类，规则就会添加到类表中。

注意：此处的cssom（样式结构体）尚有疑问。

1.2 cssom和dom树怎么匹配结合成renderTree ？

（以dom节点匹配cssom）

中的，因visibility:hidden 会影响布局(layout)，会占有空间。

1.1 dom树结构,cssom,renderTree

注意：此处的cssom（样式结构体）尚有疑问。

1.2 cssom和dom树怎么匹配结合成renderTree ？

（以dom节点匹配cssom）

Http、浏览器面试题相关推荐

太阳花浏览器_一道浏览器面试题，就能看出你的前端功底
作为前端工程师,几乎每天都要和浏览器打交道. 理解浏览器是如何工作的,对我们做业务的技术选型.架构设计等都有非常重要的作用,让我们可以准确评估 Web 开发项目的可行性,站在更高维度审视页面,以及在快 ...
前端HTTP、浏览器面试题
浏览器存储的方式有哪些特性 cookie localStorage sessionStorage indexedDB 数据生命周期一般由服务器生成,可以设置过期时间除非被清理,否则一直存在页面 ...
「查缺补漏」高频考点浏览器面试题
前言想要成为一名合格的前端工程师,掌握相关浏览器的工作原理是必备的,这样子才会有一个完整知识体系,要是「能参透浏览器的工作原理,你就能解决80%的前端难题」. 这篇梳理的话,更多的是对浏览器工作原理 ...
2345 php笔试题,2345浏览器笔试题
1. 2345phper 用js dom取出text1中字符串的后五位填到text2中. 2.HTTP中304的意思? 3.MySql怎么防注入?用php写出过程. 4.有一张表shop,我们将对pr ...
自学前端1年，靠着这份面试题和答案，我找到了20K工作
马上就是毕业季了,找工作的人多起来了.很多前端朋友想趁此换工作机会,毕竟通过面试实现跳槽涨薪一直是程序员的一个目标,我是如何拿到大厂offer并成功实现涨薪的呢? 今天给大家分享我拿到大厂offer的 ...
2014-百度阿里华为笔试题
8月15日,百度2道面试题: 1.来自<编程之美>的概率题:一个桶里面有白球.黑球各100个,现在按下述规则取球:的 i .每次从通里面拿出来两个球: ii.如果取出的是两 ...
最新百度阿里华为腾讯谷歌面试笔试题及解析
最新百度阿里华为腾讯谷歌面试笔试题及解析 8月15日,百度2道面试题: 1.来自<编程之美>的概率题:一个桶里面有白球.黑球各100个,现在按下述规则取球:的 i .每次从通里面拿 ...
百度阿里华为腾讯谷歌面试笔试题及解析
8月15日,百度2道面试题: 1.来自<编程之美>的概率题:一个桶里面有白球.黑球各100个,现在按下述规则取球:的 i .每次从通里面拿出来两个球: ii.如果取出的是两 ...
【转】２０１４百度阿里华为腾讯谷歌面试笔试题及解析
原文: http://www.cnblogs.com/JuneWang/p/3773880.html 已知memcpy的函数为: void* memcpy(void *dest , const voi ...
前端面试题：不积跬步无以至千里；不积小流无以成江海；程序人生的精彩需要坚持不懈、脚踏实地的积累。
前言 HTML面试题 CSS面试题 CSS的性能优化:–transform与position的区别.硬件加速工作原理及注意事项 JavaScript面试题 ES6面试题 var.let.const之间 ...

Http、浏览器面试题

1. 浏览器存储的方式有哪些？

2.对前后端跨域可以说一下吗？如何解决跨域的？

3.浏览器 cookie 和 session 的认识。

4.输入URL发生什么？

5.浏览器渲染的步骤

6.页面渲染优化

7.强制缓存和协商缓存

8.GET 和 POST 请求的区别

9.HTTP1.0 / 1.1 / 2.0 及HTTPS

10.介绍下304过程

11.HTTP 状态码

12.Web性能优化

13.什么是重绘？回流

14.浏览器渲染过程

15.Http和Https的区别？

16.浏览器的三次握手。

17.浏览器的四次挥手

18.浏览器渲染过程？

Http、浏览器面试题相关推荐

最新文章

热门文章