前端基础互联网 DNS 服务器浏览器

internet表示的意思是互联网，又称网际网络，根据音译也被叫做因特网(Internet)、英特网，是网络与网络之间所串连成的庞大网络。这些网络以一组通用的协议相连，形成逻辑上的单一且巨大的全球化网络，在这个网络中有交换机、路由器等网络设备、各种不同的连接链路、种类繁多的服务器和数不尽的计算机、终端。使用互联网可以将信息瞬间发送到千里之外的人手中，它是信息社会的基础。

域名系统（DNS）是按层级划分的分布式命名系统，用以访问连接到互联网或私有网络中的计算机、服务、资源。它通过域名关联各种信息，这些域名被分配至每个参与实体（participating entities）上。它最突出的特点在于：将便于人们记忆的域名解析成数字表示的 IP 地址，IP 地址则符合全世界计算机服务器和设备的需求。网域名称系统是大多数互联网服务功能的重要组成部分，因为它是互联网主要的地址录服务。

DNS的常见用法：将服务器名称和 IP 地址进行关联,但它还可以将邮件地址和邮件服务器进行关联,以及为各种信息关联相应的名称。

浏览器搜索自身的DNS缓存：
首先浏览器会去搜索自身的DNS缓存，看缓存有没有过期，过期的话缓存的解析就结束了（chrome缓存的时间只有一分钟，查看chrome的缓存可打开：chrome://net-internals/#dns ）。搜索操作系统自身的DNS缓存：如果浏览器没有找到缓存或者缓存过期失效，浏览器就会搜索操作系统自身的缓存，没有找到或者失效，解析结束（操作系统的缓存：window系统是一天，mac系统严格根据DNS协议中的TTL）。读取本地的hosts文件：若操作系统的缓存也没有找到或失效，浏览器就会去读取本地的hosts文件（Hosts文件也可以建立域名到IP地址的绑定关系，可以通过编辑Hosts文件来达到名称解析的目的。 例如，我们需要屏蔽某个域名时，就可以将其地址指向一个不存在IP地址，以达到屏蔽的效果）。浏览器发起一个DNS的系统调用：hosts中没有找到对应的配置项的话，浏览器发起一个DNS的调用（向本地主控DNS服务，一般来说是你的运营商提供的）。

 服务器：vscode啊安装live server插件

服务器英文名称为“Server”，指的是网络环境下为客户机(Client)提供某种服务的专用计算机，服务器安装有网络操作系统(如Windows 2000 Server、Linux、Unix等)和各种服务器应用系统软件(如Web服务、电子邮件服务)的计算机
搭建nodejs服务器步骤:

1.安装nodejs服务(从官网下载安装)，node相当于apache服务器

2.在自己定义的目录下新建服务器文件如 server.js
例如，我在E:\PhpProject\html5\websocket下创建了server.js文件

var http = require(‘http’);//引入http模块

//开启服务，监听8888端口
//端口号最好为6000以上
var server = http.createServer(function(req,res){
/*
req用来接受客户端数据
res用来向客户端发送服务器数据
*/

console.log('有客户端连接');//创建连接成功显示在后台//一参是http请求状态，200连接成功
//连接成功后向客户端写入头信息
res.writeHeader(200,{'content-type' : 'text/html;charset="utf-8"'
});res.write('这是正文部分');//显示给客户端
res.end();

}).listen(8888);

console.log(‘服务器开启成功’);
3.在cmd控制台中cd切换进server.js所在的目录，然后执行node server.js命令
当控制台显示”服务器开启成功”则说明node服务器已经建立

4.在浏览器中访问服务器
在浏览器中输入
localhost:8888 ，浏览器显示“这是正文部分”。
查看cmd控制台，显示 “有客户端连接”
可在多个浏览器窗口中进行以上操作，每个浏览器窗口均会对应一次“有客户端连接”

以上步骤完成，node服务搭建完毕。下面是如何通过搭建的node服务访问本地站点的 text/html文本文件

访问本地站点文件

1.在自定义的目录下创建node服务文件server2.js

var http = require(‘http’);
var fs = require(‘fs’);//引入文件读取模块

var documentRoot = ‘E:/PhpProject/html5/websocket/www’;
//需要访问的文件的存放目录

var server= http.createServer(function(req,res){

var url = req.url; //客户端输入的url，例如如果输入localhost:8888/index.html//那么这里的url == /index.html var file = documentRoot + url;console.log(url);//E:/PhpProject/html5/websocket/www/index.html fs.readFile( file , function(err,data){/*一参为文件路径二参为回调函数回调函数的一参为读取错误返回的信息，返回空就没有错误二参为读取成功返回的文本内容*/if(err){res.writeHeader(404,{'content-type' : 'text/html;charset="utf-8"'});res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');res.end();}else{res.writeHeader(200,{'content-type' : 'text/html;charset="utf-8"'});res.write(data);//将index.html显示在客户端res.end();}});

}).listen(8888);


console.log('服务器开启成功');

2.创建index.html文件

如果要访问index.html文件，当然你得先有这个文件，不然服务器读取失败，返回404
3.在cmd控制台cd切换到 server2.js的目录下执行node server2.js命令
开启服务器

4.在浏览器输入localhost:8888/index.html访问该文件

浏览器

一，dom事件流和事件委托
DOM (文档对象模型)结构是一个树型结构。
当一个 HTML 元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为 DOM 事件流。

传播按顺序分为三个阶段：捕获阶段、目标阶段、冒泡阶段。
1，捕获：事件的处理将从 DOM 层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了 useCapture 属性为 true (默认为 falsy 值): element.addEventListener(eventType, fn, useCapture)那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。
2，目标：事件到达目标元素后，进入当前目标阶段，执行函数代码，之后它会接着通过 DOM 节点再进行冒泡。

3，冒泡：当事件在某一 DOM 元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的 DOM 节点层次，直到它遇到依附有该事件类型处理器的节点。在冒泡过程中的任何时候都可以终止事件的冒泡(调用事件的 stopPropagation 方法)，如果不停止事件的传播，事件将一直通过 DOM 冒泡直至到达文档根。

值得注意的是：
有些 DOM 事件是没有冒泡的，比如：blur、focus、mouseenter、mouseleave
并且scroll (滚动事件),浏览器禁止终止该事件冒泡。
其中，如果目标阶段的节点绑定了多个事件，它们不区分捕获和冒泡，事件触发的顺序为代码执行的顺序。
而且 event.stopPropagation()在目标阶段不会生效。简单来说，
如果目标阶段有 a、b、c 三个触发事件会按注册顺序执行，在 b 事件里设置 event.stopPropagation()并不会影响 c 事件的触发。
但是如果在 b 事件里设置 event.stopImmediatePropagation()后，事件触发到 b 之后就会停止触发后面的所有事件。
这就是立即停止！

那么事件委托就来了：
事件委托也叫事件委派，就是利用 DOM 的冒泡事件流，注册最少的监听器，实现对 DOM 节点的所有子元素进行事件群控。
一般来讲，如果一个元素需要注册事件，那我们会直接为此元素注册事件处理程序。那如果有更多的元素，比如一百个，甚至更多；
比如我们需要为一百个 li 元素注册想同的点击事件，那就要用循环遍历，注册一百个事件处理程序。在 JS 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与 DOM 节点进行交互，访问 DOM 的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间；同时，对象越多，内容占用就越大。如果要用事件委托，就会将所有的操作放到 JS 程序里面，与 DOM 的操作就只需要交互一次，从而提高性能。
只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有的元素都绑定事件，减少内存占用空间，提升性能。
动态新增的元素无需重新绑定事件。

假设有一个列表，要求点击列表项弹出对应的字段：
<ul id="myLink"><li id="1">aaa</li><li id="2">bbb</li><li id="3">ccc</li>
</ul>
不使用事件委托
var myLink = document.getElementById('myLink');
var li = myLink.getElementsByTagName('li');for(var i = 0; i < li.length; i++) {li[i].onclick = function(e) {var e = event || window.event;var target = e.target || e.srcElement;alert(e.target.id + ':' + e.target.innerText);  };
}代码存在问题：
给每一个列表都绑定事件，消耗内存
当有动态添加的元素时，需要重新给元素绑定事件
。

使用委托：

function delegate(element, eventType, selector, fn) {element.addEventListener(eventType, e => {let el = e.targetwhile (!el.matches(selector)) {if (element === el) {el = nullbreak}el = el.parentNode}el && fn.call(el, e, el)})return element}

二，加载顺序三渲染过程
1.浏览器加载和渲染html的顺序

浏览器加载和渲染html的顺序
IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）
如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时IE的下载过程会启用单独连接进行下载。
并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。阻塞加载
样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
JS、CSS中如有重定义，后定义函数将覆盖前定义函数
2. JS的加载

不能并行下载和解析（阻塞下载）
当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以就会阻塞其他的下载和呈现.

那我们用什么方法吗？
1 页面减肥。页面的肥瘦是影响加载速度最重要的因素删除不必要的空格、注释。将inline的script和css移到外部文件，可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥
2 减少文件数量。减少页面上引用的文件数量可以减少HTTP连接数。许多JavaScript、CSS文件可以合并最好合并，
3 减少域名查询。DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
缓存重用数据。使用缓存吧
4 优化页面元素加载顺序。首先加载页面最初显示的内容和与之相关的JavaScript和CSS，然后加载DHTML相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
5 减少inline JavaScript的数量。浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大，不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
6 用现代CSS和合法的标签。使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片，使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥
7 根据用户浏览器明智的选择策略。IE、Firefox、Safari等等等等

HTML页面加载和解析流程

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了＜/html＞的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；
浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面.

四，事件循环
由来：js是单线程非阻塞脚本语言，其运行机制就是事件循环。
JS是从上到下一行一行执行。
如果某一行执行报错，则停止执行下面的代码。
先执行同步代码，再执行异步代码
同步代码，调用栈执行后直接出栈
异步代码，放到Web API中，等待时机，等合适的时候放入回调队列（callbackQueue），等到调用栈空时eventLoop开始工作，轮询
微任务执行时机比宏任务要早
微任务在DOM渲染前触发，宏任务在DOM渲染后触发

微任务是由ES6语法规定的
宏任务是由浏览器规定的

五，什么是跨域？

在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。
同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

9种跨域解决方案

1）原生JS实现：<script>var script = document.createElement('script');script.type = 'text/javascript';// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';document.head.appendChild(script);// 回调执行函数function handleCallback(res) {alert(JSON.stringify(res));}</script>
服务端返回如下（返回时即执行全局函数）：handleCallback({"success": true, "user": "admin"})

，jquery Ajax实现：$.ajax({url: 'http://www.domain2.com:8080/login',type: 'get',dataType: 'jsonp',  // 请求方式为jsonpjsonpCallback: "handleCallback",  // 自定义回调函数名data: {}
});
3）Vue axios实现：this.$http = axios;
this.$http.jsonp('http://www.domain2.com:8080/login', {params: {},jsonp: 'handleCallback'
}).then((res) => {console.log(res);
})
后端node.js代码：var querystring = require('querystring');
var http = require('http');
var server = http.createServer();server.on('request', function(req, res) {var params = querystring.parse(req.url.split('?')[1]);var fn = params.callback;// jsonp返回设置res.writeHead(200, { 'Content-Type': 'text/javascript' });res.write(fn + '(' + JSON.stringify(params) + ')');res.end();
});server.listen('8080');
console.log('Server is running at port 8080...');
jsonp的缺点：只能发送get一种请求。

2 跨域资源共享（CORS）

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器将CORS跨域请求分为简单请求和非简单请求。

只要同时满足一下两个条件，就属于简单请求

(1)使用下列方法之一：

head
get
post
(2)请求的Heder是

Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain
不同时满足上面的两个条件，就属于非简单请求。浏览器对这两种的处理，是不一样的。

简单请求

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。

GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0…
上面的头信息中，Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。

CORS请求设置的响应头字段，都以 Access-Control-开头:

1）Access-Control-Allow-Origin：必选

它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

2）Access-Control-Allow-Credentials：可选

它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

3）Access-Control-Expose-Headers：可选

CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

预检请求

预检"请求用的请求方法是OPTIONS，表示这个请求是用来询问的。请求头信息里面，关键字段是Origin，表示请求来自哪个源。除了Origin字段，"预检"请求的头信息包括两个特殊字段。

OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0…
1）Access-Control-Request-Method：必选

用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。

2）Access-Control-Request-Headers：可选

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。

预检请求的回应

服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

HTTP回应中，除了关键的是Access-Control-Allow-Origin字段，其他CORS相关字段如下：

1）Access-Control-Allow-Methods：必选

它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。

2）Access-Control-Allow-Headers

如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。

3）Access-Control-Allow-Credentials：可选

该字段与简单请求时的含义相同。

4）Access-Control-Max-Age：可选

用来指定本次预检请求的有效期，单位为秒。

前端设置：原生ajax：
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookie
xhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);}
};
jquery ajax：
$.ajax({...xhrFields: {withCredentials: true    // 前端设置是否带cookie},crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie...
});
2）服务端设置：nodejs代码
var http = require('http');
var server = http.createServer();
var qs = require('querystring');server.on('request', function(req, res) {var postData = '';// 数据块接收中req.addListener('data', function(chunk) {postData += chunk;});// 数据接收完毕req.addListener('end', function() {postData = qs.parse(postData);// 跨域后台设置res.writeHead(200, {'Access-Control-Allow-Credentials': 'true',     // 后端允许发送Cookie'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域（协议+域名+端口）/* * 此处设置的cookie还是domain2的而非domain1，因为后端也不能跨域写cookie(nginx反向代理可以实现)，* 但只要domain2中写入一次cookie认证，后面的跨域接口都能从domain2中获取cookie，从而实现所有的接口都能跨域访问*/'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie});res.write(JSON.stringify(postData));res.end();});
});server.listen('8080');
console.log('Server is running at port 8080...');

3、nginx代理跨域

nginx代理跨域，实质和CORS跨域原理一样，通过配置文件设置请求响应头Access-Control-Allow-Origin…等字段。

1）nginx配置解决iconfont跨域

浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入以下配置。

location / {add_header Access-Control-Allow-Origin *;
}

2）nginx反向代理接口跨域

跨域问题：同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

实现思路：通过Nginx配置一个代理服务器域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。

nginx具体配置：

#proxy服务器
server {listen       81;server_name  www.domain1.com;location / {proxy_pass   http://www.domain2.com:8080;  #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index  index.html index.htm;# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*add_header Access-Control-Allow-Credentials true;}
}

4 nodejs中间件代理跨域

node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。


1）非vue框架的跨域使用node + express + http-proxy-middleware搭建一个proxy服务器。前端代码：
var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookie
xhr.withCredentials = true;// 访问http-proxy-middleware代理服务器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();中间件服务器代码：
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();app.use('/', proxy({// 代理跨域目标接口target: 'http://www.domain2.com:8080',changeOrigin: true,// 修改响应头信息，实现跨域并允许带cookieonProxyRes: function(proxyRes, req, res) {res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');res.header('Access-Control-Allow-Credentials', 'true');},// 修改响应信息中的cookie域名cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
}));app.listen(3000);
console.log('Proxy server is listen at port 3000...');
2）vue框架的跨域node + vue + webpack + webpack-dev-server搭建的项目，跨域请求接口，直接修改webpack.config.js配置。开发环境下，vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域。webpack.config.js部分配置：module.exports = {entry: {},module: {},...devServer: {historyApiFallback: true,proxy: [{context: '/login',target: 'http://www.domain2.com:8080',  // 代理跨域目标接口changeOrigin: true,secure: false,  // 当代理某些https服务报错时用cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改}],noInfo: true}
}

5、document.domain + iframe跨域此方案仅限主域相同，子域不同的跨域应用场景。实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。1）父窗口：(http://www.domain.com/a.html)<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>document.domain = 'domain.com';var user = 'admin';
</script>
1）子窗口：(http://child.domain.com/a.html)<script>document.domain = 'domain.com';// 获取父窗口中变量console.log('get js data from parent ---> ' + window.parent.user);
</script>

6、location.hash + iframe跨域实现原理： a欲与b跨域相互通信，通过中间页c来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。1）a.html：(http://www.domain1.com/a.html)<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>var iframe = document.getElementById('iframe');// 向b.html传hash值setTimeout(function() {iframe.src = iframe.src + '#user=admin';}, 1000);// 开放给同域c.html的回调方法function onCallback(res) {alert('data from c.html ---> ' + res);}
</script>
2）b.html：(http://www.domain2.com/b.html)<iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
<script>var iframe = document.getElementById('iframe');// 监听a.html传来的hash值，再传给c.htmlwindow.onhashchange = function () {iframe.src = iframe.src + location.hash;};
</script>
3）c.html：(http://www.domain1.com/c.html)<script>// 监听b.html传来的hash值window.onhashchange = function () {// 再通过操作同域a.html的js回调，将结果传回window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));};
</script>

7、window.name + iframe跨域window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。1）a.html：(http://www.domain1.com/a.html)var proxy = function(url, callback) {var state = 0;var iframe = document.createElement('iframe');// 加载跨域页面iframe.src = url;// onload事件会触发2次，第1次加载跨域页，并留存数据于window.nameiframe.onload = function() {if (state === 1) {// 第2次onload(同域proxy页)成功后，读取同域window.name中数据callback(iframe.contentWindow.name);destoryFrame();} else if (state === 0) {// 第1次onload(跨域页)成功后，切换到同域代理页面iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';state = 1;}};document.body.appendChild(iframe);// 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）function destoryFrame() {iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);}
};// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){alert(data);
});
2）proxy.html：(http://www.domain1.com/proxy.html)中间代理页，与a.html同域，内容为空即可。3）b.html：(http://www.domain2.com/b.html)<script>window.name = 'This is domain2 data!';
</script>

通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

8、postMessage跨域postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：页面和其打开的新窗口的数据传递
多窗口之间消息传递
页面与嵌套的iframe消息传递
上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数：data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
1）a.html：(http://www.domain1.com/a.html)<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       var iframe = document.getElementById('iframe');iframe.onload = function() {var data = {name: 'aym'};// 向domain2传送跨域数据iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');};// 接受domain2返回数据window.addEventListener('message', function(e) {alert('data from domain2 ---> ' + e.data);}, false);
</script>
2）b.html：(http://www.domain2.com/b.html)<script>// 接收domain1的数据window.addEventListener('message', function(e) {alert('data from domain1 ---> ' + e.data);var data = JSON.parse(e.data);if (data) {data.number = 16;// 处理后再发回domain1window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');}}, false);
</script>

9、WebSocket协议跨域WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。
原生WebSocket API使用起来不太方便，我们使用http://Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。1）前端代码：<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');// 连接成功处理
socket.on('connect', function() {// 监听服务端消息socket.on('message', function(msg) {console.log('data from server: ---> ' + msg); });// 监听服务端关闭socket.on('disconnect', function() { console.log('Server socket has closed.'); });
});document.getElementsByTagName('input')[0].onblur = function() {socket.send(this.value);
};
</script>
2）Nodejs socket后台：var http = require('http');
var socket = require('socket.io');// 启http服务
var server = http.createServer(function(req, res) {res.writeHead(200, {'Content-type': 'text/html'});res.end();
});server.listen('8080');
console.log('Server is running at port 8080...');// 监听socket连接
socket.listen(server).on('connection', function(client) {// 接收信息client.on('message', function(msg) {client.send('hello：' + msg);console.log('data from client: ---> ' + msg);});// 断开处理client.on('disconnect', function() {console.log('Client socket has closed.'); });
});

六缓存
前端缓存主要是分为HTTP缓存和浏览器缓存。
HTTP缓存是HTTP请求传输时用到的缓存，主要在服务器代码上设置；
而浏览器缓存则主要由前端开发在前端js上进行设置。
缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

基本的网络请求就是三个步骤：请求，处理，响应。

后端缓存主要集中于“处理”步骤，通过保留数据库连接，存储处理结果等方式缩短处理时间，尽快进入“响应”步骤。当然这不在本文的讨论范围之内。

而前端缓存则可以在剩下的两步：“请求”和“响应”中进行。在“请求”步骤中，浏览器也可以通过存储结果的方式直接使用资源，直接省去了发送请求；而“响应”步骤需要浏览器和服务器共同配合，通过减少响应内容来缩短传输时间。

我们可以在 Chrome 的开发者工具中，Network -> Size 一列看到一个请求最终的处理方式：如果是大小 (多少 K，多少 M 等) 就表示是网络请求，否则会列出 from memory cache, from disk cache 和 from ServiceWorker。

它们的优先级是：(由上到下寻找，找到即返回；找不到则继续)

Service Worker
Memory Cache
Disk Cache
网络请求

memory cache 是内存中的缓存，(与之相对 disk cache 就是硬盘上的缓存)。按照操作系统的常理：先读内存，再读硬盘。
几乎所有的网络请求资源都会被浏览器自动加入到 memory cache 中。但是也正因为数量很大但是浏览器占用的内存不能无限扩大这样两个因素，memory cache 注定只能是个“短期存储”。常规情况下，浏览器的 TAB 关闭后该次浏览的 memory cache 便告失效 (为了给其他 TAB 腾出位置)。而如果极端情况下 (例如一个页面的缓存就占用了超级多的内存)，那可能在 TAB 没关闭之前，排在前面的缓存就已经失效了。

disk cache 也叫 HTTP cache，顾名思义是存储在硬盘上的缓存，因此它是持久存储的，是实际存在于文件系统中的。而且它允许相同的资源在跨会话，甚至跨站点的情况下使用，例如两个站点都使用了同一张图片。
disk cache 会严格根据 HTTP 头信息中的各类字段来判定哪些资源可以缓存，哪些资源不可以缓存；哪些资源是仍然可用的，哪些资源是过时需要重新请求的。当命中缓存之后，浏览器会从硬盘中读取资源，虽然比起从内存中读取慢了一些，但比起网络请求还是快了不少的。绝大部分的缓存都来自 disk cache。

上述的缓存策略以及缓存/读取/失效的动作都是由浏览器内部判断 & 进行的，我们只能设置响应头的某些字段来告诉浏览器，而不能自己操作。举个生活中去银行存/取钱的例子来说，你只能告诉银行职员，我要存/取多少钱，然后把由他们会经过一系列的记录和手续之后，把钱放到金库中去，或者从金库中取出钱来交给你。

但 Service Worker 的出现，给予了我们另外一种更加灵活，更加直接的操作方式。依然以存/取钱为例，我们现在可以绕开银行职员，自己走到金库前(当然是有别于上述金库的一个单独的小金库)，自己把钱放进去或者取出来。因此我们可以选择放哪些钱(缓存哪些文件)，什么情况把钱取出来(路由匹配规则)，取哪些钱出来(缓存匹配并返回)。
Service Worker 能够操作的缓存是有别于浏览器内部的 memory cache 或者 disk cache 的。我们可以从 Chrome 的 F12 中，Application -> Cache Storage 找到这个单独的“小金库”。除了位置不同之外，这个缓存是永久性的，即关闭 TAB 或者浏览器，下次打开依然还在(而 memory cache 不是)。有两种情况会导致这个缓存中的资源被清除：手动调用 API cache.delete(resource) 或者容量超过限制，被浏览器全部清空。
如果 Service Worker 没能命中缓存，一般情况会使用 fetch() 方法继续获取资源。这时候，浏览器就去 memory cache 或者 disk cache 进行下一次找缓存的工作了。注意：经过 Service Worker 的 fetch() 方法获取的资源，即便它并没有命中 Service Worker 缓存，甚至实际走了网络请求，也会标注为 from ServiceWorker。

如果一个请求在上述 3 个位置都没有找到缓存，那么浏览器会正式发送网络请求去获取内容。之后容易想到，为了提升之后请求的缓存命中率，自然要把这个资源添加到缓存中去。具体来说：
根据 Service Worker 中的 handler 决定是否存入 Cache Storage (额外的缓存位置)。
根据 HTTP 头部的相关字段(Cache-control, Pragma 等)决定是否存入 disk cache
memory cache 保存一份资源的引用，以备下次使用。

强制缓存的含义是，当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回；不存在则请求真的服务器，响应后再写入缓存数据库。
强制缓存直接减少请求数，是提升最大的缓存策略。它的优化覆盖了文章开头提到过的请求数据的全部三个步骤。如果考虑使用缓存来优化网页性能的话，强制缓存应该是首先被考虑的。
可以造成强制缓存的字段是 Cache-control 和 Expires。

Expires
这是 HTTP 1.0 的字段，表示缓存到期时间，是一个绝对的时间 (当前时间+缓存时间)，如Expires: Thu, 10 Nov 2017 08:45:11 GMT
在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。但是，这个字段设置时有两个缺点：由于是绝对时间，用户可能会将客户端本地的时间进行修改，而导致浏览器判断缓存失效，重新请求该资源。此外，即使不考虑自信修改，时差或者误差等因素也可能造成客户端与服务端的时间不一致，致使缓存失效。
写法太复杂了。表示时间的字符串多个空格，少个字母，都会导致非法属性从而设置失效。
Cache-control
已知Expires的缺点之后，在HTTP/1.1中，增加了一个字段Cache-control，该字段表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求这两者的区别就是前者是绝对时间，而后者是相对时间。如下：Cache-control: max-age=2592000

当强制缓存失效(超过规定时间)时，就需要使用对比缓存，由服务器决定缓存内容是否失效。流程上说，浏览器先请求缓存数据库，返回一个缓存标识。之后浏览器拿这个标识和服务器通讯。如果缓存未失效，则返回 HTTP 状态码 304 表示继续使用，于是客户端继续使用缓存；如果失效，则返回新的数据和缓存规则，浏览器响应数据后，再把规则写入到缓存数据库。
总的来说：当浏览器要请求资源时，

调用 Service Worker 的 fetch 事件响应
查看 memory cache
查看 disk cache。这里又细分：
如果有强制缓存且未失效，则使用强制缓存，不请求服务器。这时的状态码全部是 200
如果有强制缓存但已失效，使用对比缓存，比较后确定 304 还是 200

发送网络请求，等待网络响应
把响应内容存入 disk cache (如果 HTTP 头信息配置可以存的话)
把响应内容的引用存入 memory cache (无视 HTTP 头信息的配置)
把响应内容存入 Service Worker 的 Cache Storage (如果 Service Worker 的脚本调用了 cache.put())

七控制台调试技巧：
1、HTMl + CSS阶段
html代码的单独调试就不说了，这俩一般都是一起出现

在这个阶段，你需要学会的是

怎么查看页面上一个节点的样式？
怎么在调试工具上直接改变页面上一个节点的样式？
首先，使用cmd（ctrl） + alt + i 打开chrome devtool

你会弹出一个页面，在html，css阶段，我们要学会的是element这个tab。
1.找到样式不一样的地方，用chrome调试工具选择节点
2.这时我们就可以在调试工具里看到节点相关的所有css属性了
如果觉得不一样，或者需要修改的地方，直接双击编辑就好了，修改的地方会实时显示在页面里
3当然，刷新就会重新读取代码，你临时修改的这些东西就没了，千万不要以为在这就是直接写代码就可以了！！！
及时尝试，及时修改代码！！！

2.JS部分
这个部分应该有编程基础的人都会很熟悉了，就是普通编程语言的调试操作，但是不一样的是

只要有浏览器，你就能进行js编程和调试，完全不用装任何其他软件和环境

首先打开控制台，打开console的tab，然后输入语句即可。
但是！！！！！！
.最有效的调试方法–断点调试
咱个例子，我们做些修改

debugger就是断点的意思

用打开这个简单的文件，然后打开控制台，刷新页面

会发现程序停在断点的位置，就像这样，这时就可以看到触发断点时各个变量的值，当然，我们也可以让断点运行，让程序单步运行等等，来看看右边的工具栏。
前端常见报错原因详解
1、xxx is not defined

xxx 没有定义

2、xxx is not a function

xxx 不是一个函数
xxx此时是undefined

3、Cannot read property ‘xxx’ of undefined

不能读取undefined的xxx属性

xxx前面的变量是undefined

4、Cannot set property ‘xxx’ of null

不能给null设置xxx属性

xxx前面的变量是null

5、Invalid or unexpected token

标点符号可能是中文

6、Unexpected token a in JSON at position 0

使用JSON.parse进行解析json字符串时，解析的内容不合法

7、XMLHttpRequest cannot load http://XXXXXX. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://XXXXXX’ is therefore not allowed access.

使用ajax请求数据时，产生跨域了

8、Illegal break statement

出现了非法语句

9、SyntaxError(语法错误)

SyntaxError是解析代码时发生的语法错误
// 变量名错误
var 1a;
// 缺少括号
console.log (‘hello’;

10、ReferenceErro（引用错误）

ReferenceError是引用一个不存在的变量时发生的错误。

unknownVariable
// ReferenceError: unknownVariable is not defined

另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。

console.log() = 1
// ReferenceError: Invalid left-hand side in assignment this = 1
// ReferenceError: Invalid left-hand side in assignment

上面代码对函数console.log的运行结果和this赋值，结果都引发了ReferenceError错误

11、RangeError（范围错误）

RangeError是当一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

new Array(-1)
// RangeError: Invalid array length
(1234).toExponential(21)
// RangeError: toExponential() argument must be between 0 and 20

12、TypeError（类型错误）

TypeError是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

new 123
//TypeError: number is not a func var obj = {}; obj.unknownMethod()
// TypeError: undefined is not a function

上面代码的第二种情况，调用对象不存在的方法，会抛出TypeError错误。

13、URIError（URI错误）

URIError是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

decodeURI(’%2’)
// URIError: URI malformed

14、EvalError（eval错误）

eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再在ES5中出现了，只是为了保证与以前代码兼容，才继续保留。

以上这6种派生错误，连同原始的Error对象，都是构造函数。开发者可以使用它们，人为生成错误对象的实例。

new Error(“出错了！”);
new RangeError(“出错了，变量超出有效范围！”);
new TypeError(“出错了，变量类型无效！”);

上面代码表示新建错误对象的实例，实质就是手动抛出错误。可以看到，错误对象的构造函数接受一个参数，代表错误提示信息（message）。

15、错误举例

找不到引入的.js文件

引用的.js文件找不到，chrome报错信息如下：
GET file:///D:/JavaBooks/js/jquery%20validation/src-gzh/jquery.validate-1.7.src net::ERR_FILE_NOT_FOUND

可能原因：.js文件名字拼写错误（比如，少了文件后缀.js）

js函数缺少括号)，函数体缺少大括号}

如果函数缺少括号或者函数体缺少括号，浏览器debug时都会提示报错信息。这里分2种情况：
1、一般报错信息都在报在错误的地方，这种情况比较好说。
2、但是有的时候会报在其他的地方，这个时候要明白的是，报错信息缺少括号这一点是确定无疑的，现在就是要定位到具体是哪一行报错。

例如
报错函数/函数体缺少括号，报错的地方不是函数/函数体的末尾，而是报在调用该函数的地方。

css代码使用了//注释，导致有的div内容出不来，然后也不报错

css注释，只能使用/* 注释内容 */，而不能使用双斜杠//。

定义了多个同名的变量

浏览器会报错。

文档未加载完毕，就开始执行js代码导致的错误

文档/DOM未加载完毕，就开始执行js代码。

比如，js代码写在html代码的前面，而且document.getElementById(‘traffic’)这样来访问DOM（即文档的元素），那么这个时候就会报TypeError: a is null（火狐浏览器，注：a变量没用，只会起误导作用）或者Uncaught TypeError: Cannot read property ‘click2’ of null（谷歌浏览器）。

js 对象的函数未定义

浏览器报错，说对象的函数未定义，这个时候可以肯定的一点是，当前这个对象是没有这个函数的

前端基础互联网 DNS 服务器浏览器相关推荐

前端基础，html,css,浏览器基础知识
1.什么是Html? Hyper Text Markup Language超文本标记语言. Html准确来说不是编程语言,而是一种标记语言.是网页制作的必备编程语言. &quo ...
DNS服务器构建（一）-—构建域名缓存服务器
构建域名缓存服务器大家都知道,平时我们访问某个网站输入的一般都是字符串(域名)如:www....com等等,但是在互联网中标识不同的主机的并不是这些字符串,而是主机具体的IP地址,所以我们其实是通过 ...
优秀公共DNS服务器推荐
选择最优秀的 DNS 服务器,不仅为你提供安全的上网环境,而且还能加速你的网速.目前互联网上提供了大量匿名.公共.免费的 DNS 服务器,因此挑选适合自己的最佳选项可能并不简单.国外科技媒体 BGR ...
使用dns服务器信息的方法,保护DNS服务器十大最有效方法
DNS软体是骇客热衷攻击的目标,它可能带来安全问题.本文提供了10个保护DNS服务器最有效的方法. 一. 使用DNS转发器 DNS转发器是为其他DNS服务器完成DNS查询的DNS服务器.使用DNS转 ...
DNS服务器怎么保护呢
DNS服务器怎么保护呢服务器的目的是减轻DNS处理的压力,并且DNS服务器还保留内部域DNS资源记录,因此这非常重要,那么您知道如何保护DNS服务器吗?因此,让我们看一下如何保护DNS服务器. 1. ...
探索浏览器(二)向DNS服务器查询Web服务器的IP地址
1.IP地址基础知识 (1)尽管浏览器能解析网址并生成HTTP消息,但它本身是不能发送网络消息的,这必须委托给操作系统来实现.在此之前,我们要查询网址中的服务器域名找到对应的IP地址.所以任务又可以细 ...
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
说一下http和https? http:超文本传输协议,是一个基于请求与响应.无状态的应用层协议,以明文方式发送信息,最初设计目的是提供一种发布和接收 HTML 页面的方法. https:是http的 ...
运维之DNS服务器Bind9配置解析和基础示例及附带命令
0x03 Bind 配置解析实例1.DNS主从区域传输介绍与配置实例2.DNS区域传输限制实例3.DNS部分二级域名解析示例1.采用Bind建立一个A记录DNS服务器示例2.采用Bind建立 ...
web浏览器 DNS服务器 web服务器与网站相关知识
万维网万维网英文全称 World Wide Web(简写:www,重点词是Web),也叫做:Web.WWW.W3,常称作Web 万维网是是无数个网络站点和网页的集合,它们在一起构成了因特网最主要的部 ...

前端基础互联网 DNS 服务器浏览器

浏览器

前端基础互联网 DNS 服务器浏览器相关推荐

最新文章

热门文章

前端基础 互联网 DNS 服务器 浏览器

浏览器

前端基础 互联网 DNS 服务器 浏览器相关推荐

最新文章

热门文章

前端基础互联网 DNS 服务器浏览器

前端基础互联网 DNS 服务器浏览器相关推荐