web前端—基础知识01讲

HTML语义化

• HTML语义化
  • 含义：用正确的标签去作正确的事，也是将HTML的内容结构化
  • 优势：
    • 便于对浏览器和搜索引擎解析
    • 便于网站的维护和对源代码的理解
  • <meta>添加源数据：有4个特有属性：charset http-equive content name
  • meta标签的定义：The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable来自官方的定义
  • meta标签的用处：Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services
  • meta标签总体就包含两部分：name 和 http-equive
    • 常见的name属性参数
      • 移动端窗口适配问题：<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no ">
      • keyword，用于告诉搜索引擎，该网页的关键字: <meta name="keywords" content="关键字内容">
      • description，网页的描述：<meta name="description" content="这是个人掘金文章">
      • 其余的一些属性用到直接查资料就能够了
    • 常见的http-equiv属性参数：http-equiv至关于http的做用
      • Conten-Type: <meta http-equiv="Content-Type" content="charset=utf-8">，可是咱们更推荐使用HTML5的写法：<meta charset="UTF-8">
      • X-UA-Compatible(浏览器采起何种版本渲染当前页面)：<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 这里的chrome=1不是说IE的技术加强了能够模拟Chrome浏览器，而是与谷歌开发的Google Chrome Frame(谷歌内嵌浏览器框架GCF)有关。这个插件可让用户的IE浏览器外观不变，但用户在浏览网页时实际上使用的是Chrome的内核，而且支持Windows XP及以上系统的IE6/7/8。但前提是浏览器须要GCF，访问网址的时候用：gcf:http://www.example.com这种方式实现网页的访问
      • 其余的一些标签使用的时候查文档就可了，咱们不可能记住全部的标签属性的!
• HTML5新标签
  • HTML5的设计目的：为了在移动设备上支持多媒体，目前大部分浏览器已经具有了HTML5的部分新特性
  • header：定义了文档的头部区域
  • footer:定义section或document的页脚
  • article：定义页面独立的内容区域
  • aside：定义页面的侧边栏内容
  • command：定义命令按钮，好比单选按钮、复选框或按钮
  • details:用于描述文档或文档某个部分的细节
  • summary:标签包含 details 元素的标题
  • dialog: 定义对话框，好比提示框
  • mark: 定义带有记号的文本
  • nav: 定义导航连接的部分
  • progress：定义任何类型的任务的进度
  • section：定义文档中的节（section、区段）。
  • time: 定义时间和日期
  • 将HTML5的元素定义为块级元素，这是为了让不认识HTML5的浏览器认识

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}
复制代码

• 优雅降级和渐进加强
  • 优雅降级：一开始就构建站点的完整功能，而后针对浏览器测试和修复。好比一开始使用 CSS3 的特性构建了一个应用，而后逐步针对各大浏览器进行 hack使其能够在低版本浏览器上正常浏览。
  • 渐进加强：一开始先针对低版本的浏览器构建界面，而后在逐渐升级针对高版本的浏览器进行效果、交互、追加功能达到根号的体验效果
• 背景颜色的渐变属性：
  • 线性渐变：向下/向右/向左/向上/对角线 linear-gradient(to left/90deg, red, blue, green)
  • 径向渐变：有它们的中心定义 radial-gradient(circle/ellipse, red, blue, green)
• 解决IE浏览器不支持HTML5最好的办法就是下面的这种方式
• 注意这是一段注释，由于IE9如下的浏览器是不兼容HTML5的为了解决这个问题，这是咱们须要引入HTML5shiv.js这个脚本。可是在Chrome下是兼容HTML5的，再加载一个js文件是没有必要的，所以下面的写法是能让IE9-的浏览器加载这段代码，支持HTML5的浏览器不须要加载这段代码。这段代码是写在head标签中的

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
复制代码

• 常见浏览器的内核
  • Chrome：Blink
  • FireFox: Gecko
  • safari: Weblit
  • IE: Trident，IE最新的浏览器内核采用的是：ChroniumBlink和Trident两个内核,目前还没发布
  • Opera: Blink
  • 国内一些浏览器使用较多的是webkit

cookie session sessionStorage localStorag它们之间的区别

• cookies
  • 服务器保存在浏览器上的一小段文本信息，浏览器每次向服务器发出请求就会赋上这段文本
  • 每一个cookie的大小通常是不会超过4KB，通常单个域名下设置的cookie最好不要超过20个，由于超过限制后，有可能就会被忽略
  • cookie包含如下几方面的信息
    • cookie的名字
    • cookie的值
    • cookie的过时时间(expires)，若是咱们不设置默认是浏览器窗口关闭的时候过时
    • 所属域名（默认是当前的域名）
    • 生效的路径，默认是当前的路径
  • 两个网址只要域名相同，端口相同就能够共享cookie，注意这里是不要求协议相同的，也就是说http://example.com 和https://example.com是能够贡献cookie
• session
  • 存储于服务器端的数据
• sessionStorage
  • 生命周期存在于标签页或窗口，用于本地存储一个会话（session）中的数据，这些数据会随着窗口或者标签页的关闭而被清空
• localStorage
  • 生命周期是永久的，除非用户主动清除浏览器上存储的 localStorage信息，不然它将会永久存在
  • Storage.length返回保存的数据项个数
  • Storage.setItem('key','value')方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。若是键名已经存在，该方法会更新已有的键值。该方法没有返回值。注意点：这两个参数都是字符串若是不是字符串会转化为字符串在存入浏览器
  • Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。若是键名不存在，该方法返回null
  • Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名做为参数，若是键名不存在，该方法不会作任何事情。
  • Storage.clear()方法用于清除全部保存的数据。该方法的返回值是undefined
  • Storage.key()接受一个整数做为参数（从零开始），返回该位置对应的键值
  • Storage存储的数据发生变化的时候，会触发storage事件，咱们能够指定这是事件指定的监听函数window.addEventListener('storage', onStorageChange);
• cookie webStorage它们之间的区别：
  • 共同点：
    • 都是保存在浏览器端，且是同源的！
  • 不一样点：
    • cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。
    • 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。
    • 数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。
    • 做用域不一样，sessionStorage不能在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。WebStorage的api接口使用更方便。

css经常使用的单位

• px:像素单位,计算机屏幕上一个点为1px
• %: 百分比的形式
• rem:相对单位。相对于根元素 html 的 font-size，假如 html为font-size:12px，那么，在其当中的 div 设置为 font-size: 2rem，就是当中的 div 为 24px。
• em:相对单位。相对于父元素计算，假如某个 p元素为font-size:12px，在它内部有个span标签，设置 font-size: 2em，那么，这时候的 span 字体大小为：12 * 2 = 24px
• rpx: 微信小程序相对单位。1rpx = 屏幕宽度 / 750 px。在 750px 的设计稿上，1rpx = 1px

CSS基本知识

• 权重问题：!important -> 行内样式 -> #id -> .class -> 元素和伪元素 -> * -> 继承 -> 默认
• CSS3的新特性：
  • animate
  • transition
  • translate
  • gradient渐变属性：background:linear-gradient(red,green);
  • resize:表示界面是否应该有用户去调整大小

什么是BFC

• 定义：Block Formatting Content “块级格式化上下文”，它是页面的一块渲染区域，有一套渲染规则决定了子元素如何布局，以及和其余元素之间的关系
• BFC的触发条件：dispaly:inline-block; position:absolute/fixed;

js原型和原型链

• 面试题：面试题

• 实现原理图

做用域和闭包

• ES5中只有函数做用域和全局做用域，在ES6中新增长了块级做用域
• ES5模拟实现模块化，核心思想是使用当即执行的函数。
• new关键字的实现原理
  • 建立一个空对象，做为将要返回的对象实例
  • 把这个空对象的原型，指向构造函数的prototype属性
  • 将这个空对象赋值给函数内部的this关键字
  • 开始执行构造函数内部的代码
• 闭包作的做用：
  • 实现公有变量----->累加器
  • 实现对象的封装----->封装私有变量
  • 模块发开发----->防止污染全局变量
• js代码执行的三部曲：语法分析 预编译 解释执行
• 函数声明---->总体提高，变量----->声明提高，可是它们只能解决最基本的问题。重点仍是函数的预编译环节
• 函数预编译的步骤：
  • 建立AO或Go对象
  • 找形参和变量声明，将形参和变量声明赋值为AO对象的属性
  • 函数形参和实参相统一
  • 在函数体里找函数声明，赋值给AO对象的属性

浅拷贝和深拷贝

• 只有数组和对象是须要深拷贝的，其他的数据类型浅拷贝彻底能够实现，包括函数。

数组的去重

• 利用数组的的indexOf()方法实现去重
• 利用对象键值对的关系实现去重
• 利用ES6的Set数据结构和数组的扩展操做符实现

//set配合数组的扩展操做符的实现方式
let arr = [1,2,3,4,1,2,3,2,3,4,2,7,6,57,'hello','hello',0,0,0,0];
let set = new Set(arr);
console.log([...set]);
复制代码

模块化和组件化

• CommonJs：它是有node发扬光大，js也是正式进入模块的开发思想中
• ES6中提出模块化
  • 在ES6以前最主要的模块加载方法就是：commonJS和AMD，commonJS使用与服务器，AMD使用与浏览器，ES6实现的模块方案，彻底能够替换commonJS和AMD，实现浏览器服务端通用的模块解决方案。
  • ES6的模块设计思想是尽可能的静态化，在编译的时候就能肯定各个模块的依赖关系以及输入和输出的变量，而commonJS和AMD则是在运行的时候肯定这些
  • import具备提高的效果，它会默认提高到文件的最顶端
  • export default用来指定模块的默认输出，一个模块只能有一个默认输出，因此import后面才是能够不加{}，的
  • 跨模块常量，能够被多个文件引用对应的值，export const A = 1;//通常咱们使用大写表示
  • import是静态的加载，所以没法实现Node.js的require方法，由于require是在运行是加载
  • ES6模块和commonJS模块的差别：
    • commonJS模块输出的是一个值的拷贝，而ES模块是值的引用，也就是说在commonJS中一但输出一个值，模块内部的数据的变化就不会影响这个值

//require到底加载那个path，在编译的时候是没法知道的，只有在运行的时候才能知道加载的是那一个path，所以这给import形成了必定的障碍
//为了解决这个问题最新的提案是引入import()函数，完成动态加载
const path = './' + fileName;
const myMoudle = require(path);
复制代码

• 前端工程化:工程化是一种思想而不是某种技术,通俗一点就是：前端工程化就是用作工程的思惟看待和开发本身的项目
• 前端工程化中具体的包含了前端模块化和前端组件化
• 模块化的特色：
  • 避免变量污染和变量名冲突，由于每个模块至关于就是一个当即执行的函数
  • 更好的分离，按需加载
  • 提升代码的复用率
  • 提升代码的维护性
  • 依赖关系的管理

异步加载js脚本

• 默认状况下浏览器是同步加载js脚本的，可是这样作最大的缺点就是若是某一个脚本长时间不能加载完，就会出现浏览器卡死的现象，这是很是很差的体验效果，所以为了解决这个问题咱们引入了异步加载的方式，async和defer,渲染引擎遇到就会直接跳过，直接执行后面的代码
• async:一但下载完，渲染引擎就会中止，执行这个脚本，而后再开始渲染
• defer:要等到整个页面在内存中渲染结束（DOM结构渲染完成，以及其余脚本执行完成）才会执行
• 而window.onload是在文档加载完成后当即触发，执行对应的函数。注意点：window.onload不能同时追加多个函数，一个script中只能有一个，若是出现多个后面的会覆盖前面的

面向对象和面向过程

防抖和节流

• 任务频繁触发的状况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行
• 参考资料
• 节流：指定的时间间隔内只会执行一次，和防抖仍是有必定区别的
• 重绘和回流：
  • 当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时因为只须要 UI 层面的从新像素绘制，所以损耗较少。
  • 回流是指会影响布局的状况，对DOM的开销是比较大的，回流必定会引发重绘的，可是重绘不必定会引发回流
  • 注意点:为了不大量的回流，所以咱们引入了防抖函数和节流函数尽量的去避免回流带来的开销

浏览器解析url的具体过程

• DNS域名解析过程:DNS就是指域名系统，就是将咱们输入的网址解析为网址对应的IP地址

  

  • 用户在浏览器地址栏输入如：www.example.com的时候经历了下面这些过程。
  • 浏览器先检查自身缓存中有没有被解析过的这个域名对应的ip地址，若是有，解析结束。同时域名被缓存的时间也可经过TTL属性来设置。
  • 若是浏览器缓存中没有，浏览器会检查操做系统缓存中有没有对应的已解析过的IP地址。而操做系统也有一个域名解析的过程。在windows中可经过c盘里一个叫hosts的文件来设置，若是你在这里指定了一个域名对应的ip地址，那浏览器会首先使用这个ip地址。
  • 若是至此尚未命中域名，才会真正的请求本地域名服务器（LDNS）来解析这个域名，这台域名服务器通常在你的城市的某个角落，距离你不会很远，而且这台服务器的性能都很好，通常都会缓存域名解析结果，大约80%的域名解析到这里就完成了。
  • 若是本地域名服务器(LDNS)仍然没有命中，就直接跳到根域名服务器(Root Server) 请求解析
  • 根域名服务器返回给LDNS一个所查询的顶级域名服务器（gTLD Server，国际顶尖域名服务器，如.com .cn .org等）的地址
  • 本地服务器再向顶级域名服务器发起请求
  • 顶级域名服务器接受到请求后，查找并返回网站域名注册所对应的域名服务器的地址。
  • 域名服务器会查找域名和IP地址对应的地址映射表，返回一个目标IP地址和一个TTL（time To Live）值
  • 本地服务器接受到IP地址和TTL值，进行缓存，缓存的时间有TTL控制
  • 本地域名服务器将解析的结果返回给用户，用户根据TTL值缓存在本地服务器中，此时域名解析过程结束
  • 注意点：TTL是IP协议包中的一个值，它告诉网络数据包在网络中的时间是否太长而被丢弃。目的仍是为了加快域名的解析。
• TCP的三次握手：
  • 什么是TCP：TCP是一种面向链接的、可靠的、基于字节流的传输层通讯协议。每一条TCP链接都有两个端点，咱们把这种端点叫作套接字（socket），它的定义为：端口号拼接到IP地址后面造成套 接字，例如：咱们的IP地址为：192.168.1.1，端口号为：80，那咱们获得的套接字为：192.168.1.1:80
  • TCP报文首部
    • 源端口和目的端口，各占2个字节，分别写入源端口和目的端口
    • 序号，占4个字节，TCP链接中传送的字节流中的每一个字节都按顺序编号。例如，一段报文的 序号字段值是 301，而携带的数据共有100字段，显然下一个报文段（若是还有的话）的数据 序号应该从401开始
    • 确认号，占4个字节，用于对对方发来的TCP报文段的响应，其值为收到的TCP报文段的序号值 加1。例如：B收到A发送过来的报文，其序列号字段为501，而数据长度是200字节，这代表B 正确的接收到了A发送的到700位置的数据，所以B指望收到A的下一个数据序号是701，因而B 在发送给A的确认报文 中把确认号值为701
    • 4位头部长度：标志该TCP头部具备多长，单位为字节(4字节)
    • 6位保留：表示保留从此使用
    • 6个标志位：
      • 紧急URG：当URG = 1时，代表紧急指针字段有效。告诉系统此报文段中有紧急数据
      • 确认ACK：仅当ACK=1时，确认号字段才有效。TCP规定，在链接创建后全部报文的传输都必须把ACK置1；
      • 推送PSH：推送PSH，当两个应用进程进行交互式通讯时，有时在一端的应用进程但愿在键入一个命令后当即就能收到对方的响应，这时候就将PSH=1；
      • 复位RST: 当RST=1，代表TCP链接中出现严重差错，必须释放链接，而后再从新创建链接
      • 同步SYN:在链接创建时用来同步序号。当SYN=1，ACK=0，代表是链接请求报文，若赞成链接，则响应报文中应该使SYN=1，ACK=1；
      • 终止FIN:表示通知对方要关闭链接(携带FIN标志的TCP报文段为结束报文段)
    • 窗口：占2个字节，指通知接收方，发送此报文你须要多大的空间来接受
    • 校验和：占2个字节，校验首部和数据这两部分
    • 紧急指针：占2字节，指出本报文中紧急数据的字节数
    • 选项信息：长度可变，定义一些其余的可选的参数

      

  • 三次握手：
    • 第一次握手：起初客户端和服务端都是处于close关闭转态，client将标志位SYN（报文首部同步位）置为1，随机产生一个seq（初始序列号）=x,并将该数据包发送给server,client进入SYN-SENT（同步已发送）状态，等待server的确认
    • 第二次握手：server收到请求报文后，有SYN=1得知，client创建了链接，server将SYN和ACK都置为1，ack = x + 1,随机产生一个值seq = y,并将该数据包发送给client确认链接请求，server进入SYN—RCVD转态，此时操做系统为该TCP链接分配TCP缓存和变量
    • 第三次握手：client收到确认信息后，检查seq是否为x+1,ACK是否为1，若是正确则将标志位ACK置为1，ack =y+1;而且此时操做系统为该TCP链接分配TCP缓存和变量，并将该数据包发送给 Server，Server 检查 ack 是否为 y + 1，ACK 是否为 1，若是正确则链接创建成功，Client 和 Server 进入 established 状态，完成三次握手，随后 Client 和 Server 就能够开始传输数据。

• TCP链接的释放（四次挥手）
  • 第一次挥手：客户端发出链接释放报文，而且中止发送数据，释放数据报文首部，FIN=1，其序列号为：seq=u，此时的客户端进入FIN-WAit-1状态
  • 第二次挥手：服务器收到链接释放报文后，发送确认报文ACK=1，ack= u+1，而且带上本身的序列号，此时服务端进入关闭等待状态CLOSED-WAIT，此时服务端通知高层应用进程，此时客户端到服务端的链接就释放了，这是出于半关闭状态，即客户端已经没有数据要发送了，可是服务端仍是能够向服务客服端端发送数据的这个事件还要持续一段时间就是咱们的CLOSE-WAiT
  • 第三次挥手：服务端将最后的数据发送完毕后，向客户端发送连接释放报文，FIN=1，ack=u + 1,因为在半关闭状态，服务器极可能有发送了一些数据，等数据发送完毕以后，服务器进入最后确认转态，等待客户端的确认，
  • 第四次挥手：客户端收到服务器的释放报文后必须向服务器发出ACK=1，ack = w + 1,本身的序列号是seq= w+ 1,此时的客户端进入了事件等待转态，注意:此时的TCP链接仍是没有断开，必须通过2 * MSL(最长报文段寿命)后断开链接，此时客户端才进入CLOSED状态
  • 服务端收到客户端发的确认信息后当即进入CLOSED状态，能够看到服务端结束TCP的时间要比客服端早

    

  • 为何客户端最后还要等待2MSL？
    • 保证客户端发送的最后一个ACK报文可以到达服务器，由于这个ACK报文可能丢失
    • 站在服务器的角度看来，我已经发送了FIN+ACK报文请求断开了，客户端尚未给我回应，应该是我发送的请求断开报文它没有收到，因而服务器又会从新发送一次

ES6

• let const var它们之间的区别
• 变量的解构赋值
• 字符串的扩展
• 数值的扩展
• 函数的扩展
• 数组的扩展
• 对象的扩展
• Symbol
• Set和Map数据结构
• Promise
• async和await
• Class的继承
• Module的语法和Module的加载实现
• 编程风格

Vue

• MVVM
• vue的声明周期
  • 声明周期参考案例
  • diff算法
• 双向数据绑定
• virtual DOM
• template编译
• nextTick
• 父子组件的通讯
• 兄弟组件之间的通讯
• keep-alive:keep-alive是vue内置的一个组件，能够在切换组件的时候将状态保存在内存中，避免从新渲染DOM，它是一个抽象组件，自身是不会渲染成DOM
• vue-router
• VueX
• vue中的跨域解决：使用代理的方式在config/index.js中配置

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.cn" 
    target: 'http://f.apiplus.cn', //源地址 
    changeOrigin: true, //改变源，容许跨域 
    pathRewrite: { 
      '^/api': '' //路径重写，能够理解成 用/api代替target的地址
      } 
  } 
}
复制代码

浏览器相关的知识

网络协议

• 网络的分层
  • OSI的七层：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
  • TCP/Ip的四层协议（一般咱们都是按照五层划分的）：物理层、数据链路层、网络层、传输层、应用层
• HTTP和HTTPS
  • HTTP传输的数据都是未加密的，也就是明文传输，传入隐私信息是很是不安全的
  • HTTPS：是以安全为目标的传输通道。是在HTTP下加入SSL层实现的，SSL：指安全套阶层，是为网络通讯传输安全和数据安全传输的一种安全协议
• HTTP状态码
  • 100开头的：指示信息，表示信息已接收
  • 200开头的：请求成功。
  • 300开头的：请求重定向。
  • 400开头的：请求错误,也就是服务器彻底解析不了这个路径。
  • 500开头的：服务器错，服务器解析了这个路径，可是在解析过程当中出现了错误。
• 常见的HTTP请求字段
  • referrer:用于指定该请求是从哪一个页面跳转来的，常被用于分析用户来源，
  • referrer-policy取值为：no-referrer-when-downgrade表示 当发生降级（好比从 https:// 跳转到 http:// ）时，不传递 Referrer 报头。可是反过来的话不受影响。一般也会看成浏览器的默认安全策略。
  • HTTP具体的一些参考
  • content-Encoding: Gzip表示服务器使用了Gzip的压缩方式，目的也是为了优化性能

性能优化

• 网络方面：减小http请求（合并js文件、合并css文件、css sprite、使用base64表示简单的图片，字体图标）
• 减小资源的体积：gzip压缩（主要是针对HTML的）js混淆（主要是删除代码中的空格）、丑化（将js中的变量名用简单的变量名代替）、css压缩、图片压缩。这些事情在如今的前端开发中通通交给webpack帮咱们处理。
• 缓存：DNS缓存、CDN部署与缓存(这个是很是重要的)、http缓存。
• 渲染和DOM方面：HTML结构不要滥用标签， CSS文件通常放在HTML文件头部，JS采用异步加载的方式，尽可能避免直接操做DOM，虚拟DOM就是很好的解决方案。
• 数据方面：
  • 图片加载处理：图片预加载和图片懒加载，首屏进度条的提示
  • 异步请求的优化：使用正常的json数据格式进行交互、部分经常使用数据的缓存、数据埋点和统计、合理的使用webworker给js建立多线程环境

基础算法

视口适配问题

跨域问题

• 同源政策
  • 目的：保证用户的信息安全和防止恶意的网站窃取信息
  • 同源政策的限制：
    • 没法获取非同源下的cookie localStorage IndexedDB
    • 没法接触非同源网页的DOM
    • 没法向非同源网页发送ajax请求，注意是能够发送的可是会被浏览器拒绝
• 跨域的几种解决方式
  • jsonp
    • 原理：网页经过添加一个script标签，向服务器请求json数据，这种方法不受同源政策的限制，服务器接受到请求后，将数据放在一个指定的回调函数中传回客服端，核心就是客户端传 递一个callback函数给服务器
  • 动态script脚本的方式
    • 原理：动态脚本的方式和jsonp的方式有点像，只不过这个script标签是咱们本身写的
  • 基于jquery的跨域：jquery已经帮咱们把跨域封装到了ajax方法上面，咱们能够直接方便的使用，咱们只需将ajax传入的对象中设置datatype:'jsonp',而后为jsonpCallback:指定一个函数
  • 基于iframe的跨子域实现原理：主要是经过document.domain实现的，两个页面都经过强制的设置document.domain为基础主域
  • window.name + iframe实现跨域
  • WebSocket:WebSocket是一种全双工通讯协议，同时也容许跨域通讯，经过ws://(非加密)或者wss://(加密)做为协议前缀，该协议不实行同源政策，只要服务器支持就能够实现跨域资源请求，里面有一个很是重要的字段origin：表示请求源发自那个域名
  • CORS（跨域资源分享）：是W3C的标准，属于跨域ajax请求的根本解决方式，相比json只能发个get请求，CORS容许任何类型的请求，浏览器默认是实现了CORS,只要咱们确保服务器端是实现了CROS的接口便可
    • 解决的问题：它容许浏览器向跨域的服务器发出XMLHttpRequest请求，从而克服了ajax只能同源请求的限制
    • 实现CORS的关键在服务器实现CROS的接口，就能够实现通讯，客服端浏览器会默认加进去的不须要咱们处理
    • CORS请求分为两类：简单请求和非简单请求
    • 只要同时知足下面两个条件就属于简单请求
      • 请求条件是GET POST HEAD
      • http的信息头不超过规定的几种，具体查文档实现
  • Node.js中间件代理跨域：node + express + http-proxy-middleware