前端面试题-浏览器/服务端/网络

时间 2019-12-13

标签端面试题浏览器服务网络栏目浏览器繁體版

原文原文链接

同源策略是什么？

javascript跨域通讯

同源：两个文档同源需知足javascript

协议相同
域名相同
端口相同

跨域通讯：js进行DOM操做、通讯时若是目标与当前窗口不知足同源条件，浏览器为了安全会阻止跨域操做。跨域通讯一般有如下方法css

若是是log之类的简单单项通讯，新建<img>,<script>,<link>,<iframe>元素，经过src，href属性设置为目标url。实现跨域请求
若是请求json数据，使用<script>进行jsonp请求
现代浏览器中多窗口通讯使用HTML5规范的targetWindow.postMessage(data, origin);其中data是须要发送的对象，origin是目标窗口的origin。window.addEventListener('message', handler, false);handler的event.data是postMessage发送来的数据，event.origin是发送窗口的origin，event.source是发送消息的窗口引用
内部服务器代理请求跨域url，而后返回数据
跨域请求数据，现代浏览器可以使用HTML5规范的CORS功能，只要目标服务器返回HTTP头部Access-Control-Allow-Origin: *便可像普通ajax同样访问跨域资源

所谓的跨域问题是因为浏览器的同源策略限制的，当协议域名端口号不一样即为跨域，对于协议和端口来讲，前端不能解决。解决跨域的几种方式：html

JSONP 跨域：

这种方式跨域是经过script标签引入js文件，这个js文件又会返回一个js函数调用，也就是请求后经过callback的方式回传结果优势：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本浏览器
缺点：只支持get请求

CORS 跨域

其原理是使用自定义的http头部请求，让浏览器与服务器之间进行沟通，从而决定请求或响应是否成功
优势：
1.支持全部类型的http请求
2.比jsonp有更好的错误处理机制
3.被大多数浏览器所支持

h5的postMessage方法

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可使用它来向其它的window对象发送消息，不管这个window对象是属于同源或不一样源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。这种方法不能和服务端交换数据，只能在两个窗口（iframe）之间交换数据

前端面试查漏补缺--(三) 跨域及常看法决办法前端

get/post区别

表单的method属性设置post时发送的是post请求，其他都是get请求
get请求经过url地址发送请求参数，参数能够直接在地址栏中显示，安全性较差；post是经过请求体发送请求参数，参数不能直接显示，相对安全
get请求URL地址有长度限制，根据浏览器的不一样，限制字节长度不一样，post请求没有长度限制

补充get和post请求在缓存方面的区别

get请求相似于查找的过程，用户获取数据，能够不用每次都与数据库链接，因此可使用缓存。
post不一样，post作的通常是修改和删除的工做，因此必须与数据库交互，因此不能使用缓存。所以get请求适合于请求缓存。

http/https区别

https协议须要到ca申请证书，通常免费证书较少，于是须要必定费用。
http是超文本传输协议，信息是明文传输，https则是具备安全性的ssl加密传输协议。
http和https使用的是彻底不一样的链接方式，用的端口也不同，前者是80，后者是443。
http的链接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全

你了解的http状态码

1** 信息，服务器收到请求，须要请求者继续执行操做(101，升级为websocket协议)
2** 成功，操做被成功接收并处理(206,部份内容，分段传输)
3** 重定向，须要进一步操做以完成请求(301,302重定向；304命中缓存)
4** 客户端错误，请求包含语法错误或没法完成请求(401,要求身份验证；403，服务器理解客服端需求，可是禁止访问)
5** 服务器错误，服务器在处理请求的过程当中发生了错误

应用程序存储和离线web应用

HTML5新增应用程序缓存，容许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。 1.为html元素设置manifest属性:<html manifest="myapp.appcache">，其中后缀名只是一个约定，真正识别方式是经过text/cache-manifest做为MIME类型。因此须要配置服务器保证设置正确 2.manifest文件首行为CACHE MANIFEST，其他就是要缓存的URL列表，每一个一行，相对路径都相对于manifest文件的url。注释以#开头 3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指须要加载和存储在缓存中的资源，第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，若是从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。如下是一个文件例子：html5

CACHE MANIFEST

CACHE:
myapp.html
myapp.css
myapp.js

FALLBACK:
videos/ offline_help.html

NETWORK:
cgi/

客户端存储localStorage和sessionStorage

localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
同源文档能够读取并修改localStorage数据，sessionStorage只容许同一个窗口下的文档访问，如经过iframe引入的同源文档。
Storage对象一般被当作普通javascript对象使用：经过设置属性来存取字符串值，也能够经过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除全部数据，length表示已存储的数据项数目，key(index)返回对应索引的key

localStorage.setItem('x', 1); // storge x->1
localStorage.getItem('x); // return value of x

// 枚举全部存储的键值对
for (var i = 0, len = localStorage.length; i < len; ++i ) {
    var name = localStorage.key(i);
    var value = localStorage.getItem(name);
}

localStorage.removeItem('x'); // remove x
localStorage.clear();  // remove all data

cookie及其操做

cookie是web浏览器存储的少许数据，最先设计为服务器端使用，做为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
经过读写cookie检测是否支持
cookie属性有名，值，max-age，path, domain，secure；
cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，经过设置max-age=seconds属性告诉浏览器- cookie有效期
cookie做用域经过文档源和文档路径来肯定，经过path和domain进行配置，web页面同目录或子目录文档均可访问
经过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串以下
读取document.cookie得到'; '分隔的字符串，key=value,解析获得结果

document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

document.cookie = 'name=aaa; path=/; domain=domain; secure';
// 要改变cookie的值，须要使用相同的名字、路径和域，新的值
// 来设置cookie，一样的方法能够用来改变有效期

// 设置max-age为0能够删除指定cookie

//读取cookie，访问document.cookie返回键值对组成的字符串，
//不一样键值对之间用'; '分隔。经过解析得到须要的值