Brower

时间 2019-12-04

标签 brower 繁體版

原文原文链接

301 和 302 的区别是什么？

301 永久重定向，(好比baidu.com换成了新域名bd.com,若是我访问旧地址，就会出现301)浏览器会记住（由于永久重定向了，下次在访问的时候，就会直接访问新的地址）
302 临时重定向（临时维护，首页备案，而后跳转到一个临时页面，等备案结束，就取消302）浏览器不会记住，由于颇有可能会恢复。

（必考）GET 和 POST 的区别是什么？

参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。安全（扯淡）。GET 没有 POST 安全（都不安全）
GET 的参数（url查询参数）有长度限制，通常是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）
包。GET 请求只须要发一个包，POST 请求须要发两个以上包（由于 POST 有消息体）（扯淡，GET 也能够用消息体）
GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是无论发多少次请求，结果都同样。）

从输入 URL 到页面展示中间发生了什么？

DNS 查询 DNS 缓存javascript
创建 TCP 链接（三次握手）链接复用php
发送 HTTP 请求（请求的四部分）css
后台处理请求html
- 监听 80 端口
- 根据路由
- 渲染 HTML 模板
- 生成响应
发送 HTTP 响应前端
关闭 TCP 链接（四次挥手）java
解析 HTMLnode
下载 CSS（缓存webpack
解析 CSSweb
下载 JS（缓存面试
解析 JS
下载图片
解析图片
渲染 DOM 树
渲染样式树
执行 JS
DNS解析 DNS解析的过程就是浏览器查找域名对应的 IP 地址；
TCP链接浏览器根据 IP 地址向服务器发起 TCP 链接，与浏览器创建 TCP 三次握手：（1）主机向服务器发送一个创建链接的请求（您好，我想认识您）；（2）服务器接到请求后发送赞成链接的信号（好的，很高兴认识您）；（3）主机接到赞成链接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器二者创建了链接。
发送HTTP请求浏览器根据 URL 内容生成 HTTP 请求报文。HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文，其中包含请求文件的位置、请求文件的方式等等。
服务器处理请求并返回HTTP报文

服务器接到请求后，回想客户端发送HTTP响应报文。HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。服务器会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件，并将获得的 HTML 文件发送给浏览器。

浏览器解析渲染页面浏览器是一个边解析边渲染的过程。在浏览器尚未彻底接收 HTML 文件时便开始渲染、显示网页。在执行 HTML 中代码时，根据须要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML 。
关闭TCP链接或继续保持链接

（1）主机向服务器发送一个断开链接的请求（不早了，我该走了）；

（2）服务器接到请求后发送确认收到请求的信号（知道了）；

（3）服务器向主机发送断开通知（我也该走了）；

（4）主机接到断开通知后断开链接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开链接；

客户端/服务器模型

客户端主动发送要求。
被动地等待来自用户端的要求，处理请求并传回响应
客户端等待，而后处理响应。

三次握手

为何要三次握手? 三次握手: A:我能连你了吗? B: 能够连我,你连吧 A:那我连你了开始发送数据

缘由:由于要保证A/B 均可以收发信息 ,数据才能在AB之间传输

TCP 三次握手：（1）主机向服务器发送一个创建链接的请求（您好，我想认识您）；（2）服务器接到请求后发送赞成链接的信号（好的，很高兴认识您）；（3）主机接到赞成链接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器二者创建了链接。

DOM

什么是DOM？
- DOM 是 JavaScript 操做网页的接口，全称为“文档对象模型”。
- 它的做用是将网页转为一个 JavaScript 对象，从而能够用JS进行各类操做（好比增删内容）。
什么是DOM树？
- 浏览器会根据 DOM 模型，将文档解析成节点。此后HTML中的每一个标签元素，属性，文本都能看作是一个DOM的节点
- 再由这些节点组成一个树状结构（DOM Tree）。
- 最后提供操做这个树的各类方法。
Javascript操做DOM经常使用API总结http://luopq.com/2015/11/30/javascript-dom/

www.cnblogs.com/Ry-yuan/p/6…

5Document.querySelector()

6Document.querySelectorAll()

DOM事件模型

一：DOM leave1 好比onclick只是一个属性,能够被覆盖,因此一个元素只能有一个onclick事件写在字符串里至关于运行字符串里的代码

二： DOM L2中,事件注册（事件监听队列）

**三：**事件触发时传播的方式： 先捕获到最底层， 再冒泡到最上层

冒泡：addEventListener的第三个参数传入 false 或者不传参数儿子，爸爸，爷爷
捕获：addEventListener的第三个参数传入 true 爷爷，爸爸，儿子

冒泡和捕获的执行顺序不受代码顺序控制。只有同一个元素的事件队列才受于代码中的事件绑定顺序有关
阻止冒泡 event.stopPropagation()。stopPropagation,中止传播,不要再告诉父母了,不要再往上执行冒泡事件了
禁止默认效果与阻止冒泡

aTag.addEventListener("click",function(e){
	   e.preventDefault();//禁止默认效果
	   e.stopPropagation();//阻止冒泡
	});
复制代码

事件触发通常来讲会按照上面的顺序进行，可是也有特例，若是给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 如下会先打印冒泡而后是捕获
node.addEventListener('click',(event) =>{
    console.log('冒泡')
},false);
node.addEventListener('click',(event) =>{
    console.log('捕获 ')
},true)

复制代码

四：事件委托（事件代理）

事件代理若是一个节点中的子节点是动态生成的，那么子节点须要注册事件的话应该注册在父节点上

<ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let ul = document.querySelector('##ul')
        ul.addEventListener('click', (event) => {
            console.log(event.target);//li
            console.log(event.currentTarget)//ul
        })
    </script>
复制代码

事件代理的方式相对于直接给目标注册事件来讲，有节省内存的优势 event.target和event.currentTarget的区别： event.target是点击到的最底层的那个元素 event.currentTarget是注册事件注册在那个元素上，那个元素就是currentTarget，因此通常是父元素

跨域

1 jsonp

真名的名字应该是:动态标签跨域请求!即利用动态标签script进行跨域请求的技术。面试官：说说jsonp： 为何要用jsonp？ jsonp要解决的是浏览器的跨域数据访问的问题。（两个不一样域名的网站）。因为同源策略，不一样域名不能发请求。可是HTML的<script>元素是一个例外，script标签的请求是不受域名限制的，而Ajax是受域名限制的。 如何使用jsonp？

请求方:mataotao.com的前端(浏览器),一个网站的前端 响应方:jack.com的后端(服务器)，另外一个网站的后端 过程：

请求方动态建立一个<script>标签。src指向响应方，同时传一个查询参数?callback=xxxfn
由于<script>获得响应后会当即执行响应过来的内容。因此响应方根据查询参数构造形如xxxfn("后台传过来的数据")这样的响应。把要传的数据写在callback函数的参数里。
请求方浏览器接收到响应后, 就会执行xxxfn('后台传过来的数据')来获得后台传过来的数据，并处理。

这就是jsonp

jsonp为何不能用post请求 jsonp是经过动态建立script实现的，而script标签发送的是get请求。（缺点，get不安全） 优缺点： JSONP 使用简单且兼容性不错，可是只限于 get 请求

返回的状态码: 2开头:成功 3开头:重定向 4开头:客户端错误 5开头:服务器错误

Ajax

用 form 能够发get或post或其余请求，可是会刷新页面或新开页面用 a 能够发 get 请求，可是也会刷新页面或新开页面用 img 能够发 get 请求，可是只能以图片的形式展现用 link 能够发 get 请求，可是只能以 CSS、favicon 的形式展现用 script 能够发 get 请求，可是只能以脚本的形式运行。上面几个均可以发请求，可是各有缺点。

说说Ajax： Ajax 是JS 能够用直接发起任意HTTP 请求的技术。

AJAX 经过原生的XMLHttpRequest对象发出 HTTP 请求
从服务器获取响应数据后，能够局部更新当前网页，而不用刷新。使用方法：

具体来讲，AJAX 包括如下几个步骤。

建立 XMLHttpRequest 实例
发出 HTTP 请求
接收服务器传回的数据
更新网页数据

面试问题:请使用原生JS发送Ajax请求 通常面试大几率会问这个问题,写不对必定过不了面试

下面四句代码必定要记住:

myButton.addEventListener("click",(e)=>{
  //这四句必定要记住
  let request = new XMLHttpRequest();
  request.onreadystatechange = ()=>{
    request.onreadystatechange = ()=>{
      if(request.readyState ===4){//Ajax状态码为4
        console.log("请求和响应都完毕了");
        if ( request.status>=200&&request.status<300){//响应成功（http状态码）
          console.log(request.responseText);//打印响应的第四部分,字符串
        }else if(request.status>=400){
          console.log("响应失败");
        }
      } 
    }
  }
  request.open('GET','/xxx')//配置request.参数分别为方法和路径
  request.setRequestHeader('content-type','x-www-form-urlencoded')//设置响应头必定要写在
  request.send("a=1&b=2");//发送请求
  //这四句必定要记住
})

复制代码

XMLHttpRequest.readyState返回一个整数，表示实例对象的当前状态。该属性只读。它可能返回如下值。

0，表示 XMLHttpRequest 实例已经生成，可是实例的open()方法尚未被调用。 1，表示open()方法已经调用，可是实例的send()方法尚未调用，仍然可使用实例的setRequestHeader()方法，设定 HTTP 请求的头信息。 2，表示实例的send()方法已经调用，而且服务器返回的头信息和状态码已经收到。 3，表示正在接收服务器传来的数据体（body 部分）。 4，表示服务器返回的数据已经彻底接收，或者本次接收已经失败。

同源策略

协议+域名+端口彻底相同才叫同源如下三种行为受到限制: （1）没法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。

（2）没法接触非同源网页的 DOM。

（3）没法向非同源地址发送 AJAX 请求（能够发送，但浏览器会拒绝接受响应）。

解决： cookie 浏览器经过document.domain属性来检查是否同源。 A 网页的网址是http://w1.example.com/a.html，B 网页的网址是http://w2.example.com/b.html（一级域名同样，二级不同）

// 两个网页都须要设置
document.domain = 'example.com';
复制代码

这时候a设置一个cookie，b就能够读到这个cookie

AJAX: jsonp CORS（“跨域资源共享”）:Access-Control-Allow-Origin

Content-Type: text/html; charset=utf-8

同源策略和CORS（跨域）

什么是同源策略？ 用 form、a、img、link、script、均可以跨域发送请求。可是只有 协议+域名+端口 如出一辙才容许发 AJAX 请求。 为何要有同源策略? 简单地说就是例如使用form发送请求后,就会刷新页面,因此原页面没有了,就认为是安全的.可是Ajax能够吧响应内容读取了.而且显示在本页面上.因此出现安全性问题。

Ajax没法跨域报的错误：

CORS的英文Cross-Origin Resource Sharing，即跨域(源,站)资源共享（跨域）那么如何使用CORS突破同源策略解决Ajax的没法跨域发送请求的问题？

只要服务器端设置响应头就能够实现跨域：

response.setHeader('Access-Control-Allow-Origin','http://mataotao.com:8001')
复制代码

这句话是CORS跨域(突破同源策略)的核心,即容许别的网站(例如http://mataotao.com:8001)跨域向我发Ajax请求,而且容许响应。

为何不使用jsonp，而是用CORS来跨域？ CORS相对于JSONP,CORS能够发任意请求,而JSONP只能发送get请求

JSON 和 JS 对象互转

要实现从对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'
复制代码

要实现从 JSON 转换为对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
复制代码

Cookie

Cookie 是服务器保存在浏览器的一小段文本信息。浏览器每次向服务器发出请求，就会自动附上这段信息。 Cookie的做用过程:

第一次登陆的时候,服务器经过 Set-Cookie 响应头设置 Cookie,而后以响应的形式发给浏览器
浏览器获得响应中Cookie 以后，以后每次请求这个域名都要带上这个 Cookie
以后服务器读取当时本身设置的 Cookie 就知道用户的信息（好比用户名，是不是同一个浏览器等）

COokie的做用：

分辨两个请求是否来自同一个浏览器
用来保存一些状态信息，例如：保存登陆、购物车等须要记录的信息。

HTTP 回应：Cookie 的生成(服务器端生成cookies)

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

[page content]
复制代码

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly
复制代码

HTTP 请求：Cookie 的发送(浏览器发送Cookie)

浏览器向服务器发送 HTTP 请求时，每一个请求都会带上相应的 Cookie。也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使用 HTTP 头信息的Cookie字段。

Cookie: foo=bar
复制代码

上面代码会向服务器发送名为foo的 Cookie，值为bar。

Cookie字段能够包含多个 Cookie，使用分号（;）分隔。

Cookie: name=value; name2=value2; name3=value3
复制代码

下面是一个Http请求的例子。

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
复制代码

读、写、删除、Cookie

读document.cookie，前提是该 Cookie 不能有HTTPOnly属性。
document.cookie写入 Cookie 的例子以下。

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';
复制代码

Cookie 的删除删除一个现存 Cookie 的惟一方法，是设置它的expires属性为一个过去的日期。

session

什么是session？

服务器经过Cookie发送给客户端一个sessionID
sessionID对应服务器里的一小块内存，这里保存着用户的信息，例如登陆信息，购物车信息等。
每次用户访问服务器的时候，服务器经过浏览器发送来的cookie里的sessionID去读取对应的内存里的信息，以此来知道用户的隐私信息。

Storage

window.sessionStorage和window.localStorage接口用于脚本在浏览器保存数据。

基本使用

设置

window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');
复制代码

获取

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')
复制代码

清除

localStorage.removeItem('key');
window.localStorage.clear()
复制代码

总结

注意只能存字符串类型的。

LocalStorage 跟 HTTP 无关(而cookie是http的一个头)
发送HTTP请求时 不会带上 LocalStorage 的值
只有相同域名的页面才能互相读取 LocalStorage（没有同源那么严格）
每一个域名 localStorage 最大存储量为 5Mb 左右（每一个浏览器不同）
经常使用场景：记录有没有提示过用户（没有用的信息，不能记录密码）
LocalStorage 永久有效，除非用户主动清理缓存

区别：SessionStorage 在用户关闭页面（会话结束）后就失效。其他的和localstorage同样

Cookie和Storage对比：

HTTP缓存

HTTP缓存有利于web性能优化。HTTP缓存能够重复利用以前获取的资源而不用反复请求，以达到性能优化的目的。方法

1 Cache-Control

在响应里设置响应头 Cache-Control: max-age=30 意思就是30秒以内，浏览器再访问相同的URL的时候，就不发请求，直接从内存里拿到已经缓存的main.js。问题：那么js和css更新了怎么办？浏览器请求时发现是相同的URL才使用缓存，那么能够设置查询参数，例如第二个版本的js能够写<script src="./main.js?v=2"></script>,来保证URL的不一样，从新获取新的js文件。这样便可以缓存好久，又能够随时更新.(总结：设置查询参数，保证URL的不一样)

Expires

Expires 是之前用来控制缓存的http头，Cache-Control是新版的API。
如今首选 Cache-Control。
若是在Cache-Control响应头设置了 "max-age" 或者 "s-max-age" 指令，那么 Expires 头会被忽略。
响应头设置方式： Expires: Wed, 21 Oct 2015 07:28:00 GMT
Expires 响应头包含日期/时间，即在此时候以后，响应过时。注意：由于过时标准的时间用的是本地时间，因此不靠谱，因此要游侠使用Cache-Control代替Expires

答面试官：与Cache-Control的区别就是：

Cache-Control设置过时时间长度
Expires 设置过时时间点

MD5是消息摘要算法。用于确保信息传输完整一致。能够判断两次信息传输是否完整一致。

ETag

例如

咱们请求一个js文件。设置的ETage响应头为这个JS文件的MD5值
那么，下一次请求这个JS的时候，浏览器会把上一次响应的那个ETage的值放到If-None-Match请求头里面发送请求。
若是MD5同样，说明文件没改过，那么返回304

304 Not Modified： HTTP 304 未改变说明无需再次传输请求的内容，也就是说能够使用缓存的内容。

HTTP 304 ：没有响应体

ETag与 Cache-Control的区别

因为CSS的请求是用缓存（Cache-Control）的，因此直接不发请求
而js用的ETag，有请求也有响应，只不过若是MD5同样，那么就不下载响应体。

MVC

MVC是一种代码组织形式,只是组织代码的思想.给面试官将MVC

MVC处理的逻辑顺序。

MVC就是把代码分为三块

V(view)只负责看得见的东西.
M(model)只负责跟数据相关的操做,不会出现DOM,不会出现任何的html/css操做.例如model里只会有初始化数据库,获取数据方法fetch(),保存数据的方法save()
C(controller)只负责把这些view和model组合起来,找到view,找到model,使用model完成数据修改业务,并修改view的显示 V:视图

M,V,C在代码中能够用对象或者类来表示

webpack

曾使用 webpack3 用 babel-loader 把 ES6 转译为 ES5 用 sass-loader 把 SCSS 转译为 CSS 做用：

自从出现模块化之后，文件变多。每一个 JS 文件都要发送请求响应，会致使加载速度变慢。Webpack 最主要的目的就是为了解决这个问题，将全部小文件打包成一个或多个大文件。
可使用各类前端新技术的工具，babel，sass。

安全

XSS

XSS（Cross-site scripting)即跨站点script 举例

恶意用户 A 在网站提交留言为<script>console.log(document.cookie)</script>，这段代码被上传到服务器。
B访问网站的留言，这段脚本在 B 的浏览器直接执行，恶意用户 H 的脚本就能够任意操做 B 的 cookie。有了 cookie，恶意用户 H 就能够伪造 B 的登陆信息。

产生缘由：前端的代码在显示留言的时候，操做DOM的时候innerHTML方法，或者用了jQuery中的$p.html(content)方法。

解决办法：

前端尽可能使用innerText（jQuery就是用text()方法，不要本身）
将 < >'' ' 这些可疑的符号转义，如<变成 < （HTML实体）

CSRF攻击

（CSRF的全名为Cross-site request forgery）伪造跨站请求过程：

假设给用户赚钱的请求连接是：www.game.com/Transfer.ph…
而后若是客户端已经验证并登录www.game.com网站，此时客户端浏览器保存了游戏网站的验证cookie（已登陆，而且浏览器保存了须要登陆的cookie）
客户端再tab另外一个页面进行访问恶意攻击者的网站，并从恶意攻击者的网站构造的连接（好比构造一个img标签，url就是构造的虚假的连接，例如是http://www.game.com/Transfer.php?toUserId=100&vMoney=1000）来访问游戏网站（再开一个网页，这个网页里有一个img标签，url是假的）
浏览器将会携带该游戏网站的cookie进行访问，1000块游戏币就转给那个虚假的userid了（由于已经登陆了，浏览器里保存了cookie，因此浏览器会带着这个cookie访问这个假的img的连接）

对于get请求能够很轻松的攻击，对于post，攻击者可诱导用户进入带 Form 表单可用POST方式提交参数的页面。

解决方法：

服务端在收到路由请求时，生成一个随机数，在渲染请求页面时把随机数埋入页面（通常埋入 form 表单内，）
服务端设置setCookie，把该随机数做为cookie或者session种入用户浏览器
当用户发送 GET 或者 POST 请求时带上_csrf_token参数（对于 Form 表单直接提交便可，由于会自动把当前表单内全部的 input 提交给后台，包括_csrf_token）
后台在接受到请求后解析请求的cookie获取_csrf_token的值，而后和用户请求提交的_csrf_token作个比较，若是相等表示请求是合法的。

解决方法： 一Token字符串验证。总结：

服务器请求的时候，生成一个随机数
而后埋到要提交的form表单里，方法是生成一个input标签页（）
服务端设置setCookie，把该随机数做为cookie保存到客户端浏览器里
在发送请求的时候把cookie里的token随机数和form表单里的随机数进行比较，若是一致，就经过验证

二让用户本身填写验证码

性能优化

HTTP缓存
CSS引用写在<head></head>,script标签写在body闭合标签前面，先加载内容与样式。
图：懒加载，雪碧图。
压缩代码：css去掉回车，空格。
CDN：静态文件放在CDN。
webpack，将几个小文件组成大文件，减小请求次数。