Hexo

浏览器：跨域受浏览器的同源策略影响，不能向不同于自己的域名发起请求，也就是跨域 同源策略同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指”协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了 但是有三个标签是允许跨域加载资源： <img src=XXX> <link href=XXX> <script src=XXX> 什么情况会发生跨域： 同一域名，不同端口 同一域名，不同协议 域名和域名对应相同ip 主域相同，子域不同 不同域名 注意两点： 在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。 ...

浏览器：发展历程从第一个诞生的浏览器到如今，浏览器发生了怎样的变化？ 一、架构 单进程浏览器 单进程浏览器是指浏览器所以模块都运行再同一个进程里，这些模块包含了网络、插件、JavaScript 运行环境、渲染引擎和页面等。 2007年之前，所有的浏览器都是单进程的，页面的所有的功能模块都运行在同一个进程里，这个模块包括但不限于：网络、渲染引擎、JavaScript运行环境、第三方插件等。 缺点： 不稳定：早期的浏览器都是通过插件来实现视频、游戏等功能，插件、渲染引擎等都运行在浏览器进程之中，一个意外崩溃就会导致整个浏览器的奔溃。 不流畅：因为所有页面的功能模块都运行在同一个线程之中，因此同一时刻只有一个模块可以执行，这就很有可能出现一个模块发生阻塞的时候而导致其他模块无法运行的情况。 不安全：不安全主要是处于两个方面的，一个是插件一个是页面脚本。页面中运行的插件可以读取电脑的资源，执行一些命令。而页面脚本则可以通过浏览器漏洞来获取系统权限，从而应发一系列安全问题。 多进程浏览器 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWor ...

网络：HTTP缓存缓存是为了可以加快资源获取速度，提升用户体验，减少网络传输，缓解服务端的压力 HTTP缓存分为强缓存、协商缓存，由不同的头部字段来实现 一、强缓存实现强缓存由Expires、Cache-Control两个头部字段实现，如果不可以使用缓存就直接发送请求或进行协商缓存 Expires Expires是HTTP/1.0提出的用来实现缓存的字段，是由服务器返回的资源过期日期，是一个绝对时间 浏览器在发送请求的时候，会与系统的日期时间与其对比，如果小于它就使用缓存，否则就发起请求获取资源 缺点：因为是一个绝对的日期时间，所以可以通过修改系统时间来决定是否使用缓存 Cache-Control Cache-Control是HTTP/1.1提出的，通过设置不同的属性值来实现不同缓存方式 如果Expires和Cache-Control同时存在，后者的优先级会更高 常用的属性值： max-age：单位是秒，缓存时间计算的方式是距离发起的时间的秒数，超过间隔的秒数缓存失效 no-cache：不使用强缓存，需要与服务器验证缓存是否新鲜 no-store：禁止使用缓存（包括协商缓存） ...

网络：HTTP详解HTTP超文本传输协议，是一种用于分布式、协作式和超媒体信息系统的应用层协议 通常，由HTTP客户端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP服务器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比如”HTTP/1.1 200 OK”，以及返回的内容，如请求的文件、错误消息、或者其它信息。 一、工作原理客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。 具体步骤如下： 客户端发送请求 客户端根据域名、请求方法、URL、请求数据构建请求报文 客户端和服务端建立HTTP连接 HTTP是基于TCP传输层协议，建立连接采用三次握手 服务器返回结果 服务器返回状态码、提示语、响应数据构成的响应报文 客户端和服务器断开连接 四次挥手断开连接 二、特点 基于 请求-响应 的模式 HTTP协议规定,请求从客户端发出,最后服务器端响应该请求并 返回。换句话说,肯定是先 ...

网络：HTTP发展过程HTTP超文本传输协议，是浏览器和服务器之间的通信协议。 1991 年 HTTP 正式诞生，到如今已经经过了几个版本的迭代，本片文章主要讲讲各个版本的特点。 一、HTTP/0.9http0.9最为最开始诞生的，只是一个简单的协议，只有一个GET方法，没有首部，目标只是为了用来获取HTML。 二、HTTP/1.0随着HTTP的发展，只能传输文本内容已经满足不了需求，所以新增了： 增加了请求头和响应头 任何格式的内容都可以发送 Content-Type：服务器回应的时候告诉客户端数据类型是什么 Accept：请求时用于指定客户端接受哪些类型的信息 Content-Encoding：字段说明数据的压缩方法 Accept-Encoding：客户端在请求的时候说明自己可以接受那些压缩方法 引入了POST与HEAD命令 可以缓存，使用Expires头部字段实现 三、HTTP/1.1HTTP/1.1是现在应用最为广泛的一个协议 HTTP/1.0每次请求资源都需要新的一个HTTP请求，每次都会三次握手创建连接和四次挥手关闭连接增加了网络开销（队头阻塞），并且还是一发 ...

网络：DNS与CDN总结一、DNSDNS域名解析器，用于将我们访问的网址转换为对应的IP地址。 我们在访问网址时，并不是直接就可以访问到对应的服务器，而是需要通过IP地址来建立连接，但是由于IP是一段段的数字不方便记忆，所以才有了网址的形式。 域名与IP之间的对应关系，称为"记录"（record）。根据使用场景，"记录"可以分成不同的类型（type） A：地址记录（Address），返回域名指向的IP地址 IPv4。 AAAA：地址记录（Address），返回域名指向的IP地址 IPv6 NS：域名服务器记录（Name Server），返回保存下一级域名信息的服务器地址。该记录只能设置为域名，不能设置为IP地址。 MX：邮件记录（Mail eXchange），返回接收电子邮件的服务器地址。 CNAME：规范名称记录（Canonical Name），返回另一个域名，即当前查询的域名是另一个域名的跳转。 PTR：逆向查询记录（Pointer Record），只用于从IP地址查询域名。 DNS解析过程 当在浏览器输入网址（www.bai ...

网络：TCP与UDP总结TCP与UDP都是传输层得协议 一、UDP udp是面向数据报文、无连接，不可靠得传输层协议 无连接：只知道对端的IP和端口号就可以发送，不需要实现建立连接。 不可靠：不保证数据能够发送到对端、丢包之后也不会重传等措施 udp支持一对一、一对多、多对多、多对一得连接方式 udp一般用于实时通话、直播等领域 常见使用UDP传输得应用层协议： DNS：域名解析系统 DHCP：IP分发系统 二、TCP TCP是面向连接，可靠得传输层协议 连接：每次都需要三次握手来建立连接，四次挥手来释放连接 可靠：保证数据传输到对端，丢包会重新发送，还提供了拥塞控制等措施 1、三次握手TCP的三次握手可以确保连接双方都具有收发的能力 首先客户端发送请求连接SYN，并带上自己的序列号 客户端表示我想要和你建立连接 服务端接收到之后，需要发送ACK确认请求，并且也要发送SYN请求连接，并带上自己的序列号 服务端表示收到，我也想要和你建立连接 客户端收到服务端的确认及请求连接之后，会再发送一次ACK确认请求，该次请求是可以带上数据的 客户端表示收到 这样就建立了连接 ...

Webpack Loader详解Loader 的本质是导出一个函数的 Node 模块，它所导出的函数将在读取到目标类型（通常在 module.rules 中配置）源文件时调用，源文件字符串将作为参数传入这个函数，并且函数中可以通过 this 关键字访问到上下文信息和使用 Loader API 中指定的属性和方法，最终同步或异步地返回处理后的结果 Loader处理过程： 根据解析的 Loader 文件路径，加载 Loader 模块，兼容 commonJS、ESModule 或 SystemJS 方式 按 Loader 链数组控制 Loader 的调用过程，具体调用顺序在 Pitching Loader 小节中进一步说明，简单来说包括三个部分：pitch阶段 => 处理资源内容阶段 => Loader 函数调用阶段（同步或异步） 持续更新 Loader Context 信息 获取执行后的结果并返回 Webpack 编译流程 一、自定义简单的Loader1234567function loaderDemo(content) { // 可以查看 this 提 ...

Webpack Plugin详解PlugIn (插件) 系统是 Webpack 世界中最重要又最难以理解的概念，理解 Plugin 原理将有助于更灵活地使用 Webpack 一、基本概念1、TapableWebpack的打包过程就是一个黑盒，你只需要写好配置，就能从入口文件开始将所有的依赖打包在一起，最后给你一个结果。 而我们对打包的过程是不清楚的，Webpack提供了插件机制，让我们可以在打包的过程中，做一些自己的操作，而这个机制的原理就是订阅发布模式。Webpack向外透露出不同阶段的钩子，然后让我们可以传入要做的操作，Webpack在打包的过程中就会去执行。 Tapable就是提供这个钩子的一个内部库，提供了基于发布订阅模式（观察者模式或事件流）的架构。 2、CompilerCompiler 是 Webpack 的编译器对象，它主要负责主流程运作，在 Webpack 启动时通过 new 实例化，接收所有配置文件中的配置项（entry，output，module，plugin等），并实例化 Compilation 对象开启编译流程，它的生命周期就是 Webpack 整个运行时期。 ...

WebComponent在了解WebComponent是什么之前，先了解一下组件. 一、组件组件已经是老生常谈得话题了，相信大家都用过了，毕竟React、Vue等框架等会使用到。 在vue中，组件提高了我们得代码复用率，让我们把公共得页面提取出来，并且通过prop等方式将数据传递给组件。还有solt插槽，都是为了更好的封装组件。 但是不同的框架的组件化实现方式不一样，这就导致在学习了新的框架，就要采用新的组件化方式。 为了让Web组件模型得到统一， W3C 定义的浏览器标准组成，使得开发者可以构建出浏览器原生支持的组件。它就是WebComponent。 二、使用方式1、定义模板首先可以使用template标签来定义一个HTML模板 123456789101112<template id="custom-component"> <style> h1{ color: red; } p{ color: blue; } </style> <so ...