跨域问题和解决方案
跨域问题及解决方案同源策略及跨域问题同源策略是一套浏览器安全机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。
简单来说，同源策略对 同源资源 放行，对 异源资源 限制
因此限制造成的开发问题，称之为跨域（异源）问题
同源和异源1源(origin) = 协议 + 域名 + 端口
例如:
https://study.duyiedu.com/api/movie的源为https://study.duyiedu.com
http://localhost:7001/index.html的源为http://localhost:7001
两个URL地址的源完全相同，则称之为同源，否则称之为异源（跨域）
跨域出现的场景跨域可能出现在三种场景：
网络通信
a元素的跳转；加载css、js、图片等；AJAX等等
JS API
window.open、window.parent、iframe.contentWindow等等
存储
WebStorage、IndexedDB等等
对于不同的跨域场景，以及每个场景中不同的跨域方式，同源策略都有不同的限制。 ...
浏览器的通信能力
用户代理浏览器可以代替用户完成http请求，代替用户解析响应结果，所以我们称之为：
用户代理 user agent
在网络层面，对于前端开发者，必须要知道浏览器拥有的两大核心能力：
自动发出请求的能力
自动解析响应的能力
自动发出请求的能力当一些事情发生的时候，浏览器会代替用户自动发出http请求，常见的包括：
用户在地址栏输入了一个url地址，并按下了回车
浏览器会自动解析URL，并发出一个GET请求，同时抛弃当前页面。
当用户点击了页面中的a元素
浏览器会拿到a元素的href地址，并发出一个GET请求，同时抛弃当前页面。
当用户点击了提交按钮<button type="submit">...</button>
浏览器会获取按钮所在的<form>元素，拿到它的action属性地址，同时拿到它method属性值，然后把表单中的数据组织到请求体中，发出指定方法的请求，同时抛弃当前页面。
这种方式的提交现在越来越少见了
当解析HTML时遇到了<link> <img> <script> ...
网络分层模型和计算协议
网络分层模型和应用协议分层模型分层的意义当遇到一个复杂问题的时候，可以使用分层的思想把问题简单化
比如，你有半杯82年的可乐，想分享给你的朋友王富贵，但你们已经10年没有联系了。要完成这件事，你可能要考虑：
我用什么装可乐？
可能的方案：塑料瓶、玻璃瓶、煤气罐
怎么保证可乐始终处于低温？
可能的方案：保温杯、小冰箱、冰盒
如何保证可乐不被运输的人偷喝？
可能的方案：封条、在上面写「毒药」
如何获取王富贵的地址？
可能的方案：报案失踪、联系私人侦探、联系物流公司的朋友
如何运输？
可能的方案：自行车、汽车、火车、高铁、飞机、火箭
这就形成了一个分层结构
从常理出发，我们可以得出以下结论：
每层相对独立，只需解决自己的问题
每层无须考虑上层的交付，仅需把自己的结果交给下层即可
每层有多种方案可供选择，选择不同的方案不会对上下层造成影响
每一层会在上一层的基础上增加一些额外信息
五层网络模型网络要解决的问题是：两个程序之间如何交换数据。
这是一个非常复杂的问题，因为两个程序有可能出现在不同的设备上。
面对复杂的问题，可以使用分层的方式来简化。
经过不断的演化，网 ...
事件循环详解
事件循环浏览器的进程模型何为进程？程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程
每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
何为线程？线程是系统分配处理器时间资源的基本单元，或者说进程之内独立执行的一个单元执行流。
一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。
如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。
总结：进程是资源分配的最小单位，线程是程序执行的最小单位。
浏览器有哪些进程和线程？浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂。
为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。
可以在浏览器的任务管理器中查看当前的所有进程
其中，最主要的进程有：
浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
网络进程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程
渲染进程启动后，会开启一个渲染主线 ...
浏览器渲染原理
浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画
每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
这样，整个渲染流程就形成了一套组织严密的生产流水线。
解析 HTML浏览器解析HTML，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。
解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。
CSS不会阻塞HTML解析
JS会阻塞HTML解析
如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是 ...
深入理解Javascript（二）面向对象、事件循环机制
3. 面向对象高级3.1 对象创建模式new运算符
当函数用new运算符调用，会被当做构造函数调用；new会有如下操作：
创建一个普通的空对象{}
让这个空对象的__proto__指向构造函数的prototype
将this指向新创建的这个对象
如果构造函数返回值是非原始值，这个值将作为新对象的值返回；如果没返回值或返回值是原始值，新对象将作为返回值。(正常情况下，不会写返回值)
Object构造函数方式：先创建Object空对象，再动态添加属性/方法 适用于：起始不确定对象内部数据 缺点：语句多 123456789var p =new Object();p.name = "Tom";p.age = 18;p.setName = function(name){ this.name = name;};p.setAge = function(age){ this.age = age;};
对象字面量形式：使用{}创建对象，同时指定属性/方法 适用于：起始确定对象内部数据 缺点：创建多个相似对象，代码重复 12345 ...
深入理解Javascript（一）内存、原型、闭包
1. 数据、变量和内存1.1 数据类型判断
typeof:
可以区别: 数值, 字符串, 布尔值, undefined, function，symbol
不能区别: null与对象, 数组与一般对象
返回的是数据类型的字符串表达形式
12345a = 3;console.log(typeof a = = = 'number');//注意引号a = null;console.log(typeof a) // 'object'
instanceof
专门用来判断对象数据的类型: Object, Array与Function
123456789var b1 = { b2: [2, 'abc', console.log], b3: function () { console.log('b3()') } };console.log(b1 instanceof Object, typeof b1); // true 'object ...
CSS属性计算过程
引言你是否了解 CSS 的属性计算过程呢？
有的同学可能会讲，CSS属性我倒是知道，例如：
123p{ color : red;}
上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。
但是要说 CSS 属性的计算过程，还真的不是很清楚。
没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。
首先，不知道你有没有考虑过这样的一个问题，假设在 HTML 中有这么一段代码：
123<body> <h1>这是一个h1标题</h1></body>
上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：
目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。
那么问题来了，我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外，究竟还有哪些属性呢？
答案是该元素上面会有 CSS 所有的属性。你可以打开浏览器的开发者面板，选择【元素】，切换到【计算样 ...
你不知道的CSS之包含块
一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。
但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。
好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。
包含块英语全称为containing block，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。但是这玩意儿是确确实实存在的，在 CSS 规范中也是明确书写了的：
https://drafts.csswg.org/css2/#containing-block-details
并且，如果你不了解它的运作机制，有时就会出现一些你认为的莫名其妙的现象。
那么，这个包含块究竟说了什么内容呢？
说起来也简单，就是元素的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fix ...
Javascript数组方法汇总
创建数组使用数组字面量方法123var arr1 = []; var arr2 = [20]; var arr3 = ['lily','lucy','Tom'];
使用Array构造函数123var arr1 = new Array(); // 创建一个空数组var arr2 = new Array(10); // 创建一个包含10项的数组var arr3 = new Array('lily','lucy','Tom'); // 传入非数值或大于一个参数，创建一个包含3个字符串的数组
Array.of方法创建数组(es6新增)Array.of()方法会创建一个包含所有传入参数的数组，而不管参数的数量与类型
12let arr1 = Array.of(1,2); //[1,2]let arr2 = Array.of(3); //[3]
Array.from方法创建数组(es6新增)在js中将非数组对象转换为真正的数组是非常麻烦的。在es ...