Wendy
## 同源策略  页面安全问题的主要原因就是浏览器为同源策略开了两个后门： - 页面中可以任意引用第三方的资源 - 通过CORS策略让XMLHttpRequest 和 Fetch 去跨域请求资源。 为了解决这些问题，我们引入了 CSP 来限制页面任意引入外部资源，引入了 HttpOnly 机制来禁止 XMLHttpRequest 或者 Fetch 发送一些关键 Cookie，引入了 SameSite 和 Origin 来防止 CSRF 攻击。 如果没有同源策略，会是怎样？ 比如你打开了一个银行站点，然后又一不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情： -...
## CSRF 跨站请求伪造（Cross Site Request Forgery），是指黑客诱导用户打开黑客的网站，在黑客的网站中，利用用户的登陆状态发起的跨站请求。CSRF攻击就是利用了用户的登陆状态，并通过第三方的站点来做一个坏事。 要完成一次CSRF攻击,受害者依次完成两个步骤: 1. 登录受信任网站A，并在本地生成Cookie 2. 在不登出A的情况，访问危险网站B  在`a.com`登陆后种下cookie, 然后有个支付的页面，支付页面有个诱导点击的按钮或者图片，第三方网站域名为 `b.com`，中的页面请求 `a.com`的接口，`b.com` 其实拿不到cookie，请求 `a.com`会把Cookie自动带上（因为Cookie种在 `a.com`域下）。这就是为什么在服务端要判断请求的来源，及限制跨域（只允许信任的域名访问），然后除了这些还有一些方法来防止 CSRF 攻击，下面会通过几个简单的例子来详细介绍 CSRF 攻击的表现及如何防御。 下面会通过一个例子来讲解 CSRF 攻击的表现是什么样子的。 实现的例子： 在前后端同域的情况下，前后端的域名都为 `http://127.0.0.1:3200`, 第三方网站的域名为...
## XSS 跨站脚本攻击（Cross Site Script）,本来缩写是 CSS, 但是为了和层叠样式表（Cascading Style Sheet, CSS）有所区分，所以安全领域叫做 “XSS”； XSS攻击，通常是指攻击者通过 “HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，对用户的浏览器进行控制或者获取用户的敏感信息（Cookie, SessionID等）的一种攻击方式。 页面被注入了恶意JavaScript脚本，浏览器无法判断区分这些脚本是被恶意注入的，还是正常的页面内容，所以恶意注入Javascript脚本也拥有了所有的脚本权限。如果页面被注入了恶意 JavaScript脚本，它可以做哪些事情呢？ 1. **可以窃取 cookie信息**。恶意 JavaScript可以通过 ”doccument.cookie“获取cookie信息，然后通过 XMLHttpRequest或者Fetch加上CORS功能将数据发送给恶意服务器；恶意服务器拿到用户的cookie信息之后，就可以在其他电脑上模拟用户的登陆，然后进行转账操作。 2. **可以监听用户行为**。恶意JavaScript可以使用 "addEventListener"接口来监听键盘事件，比如可以获取用户输入的银行卡等信息，又可以做很多违法的事情。 3. 可以**修改DOM** 伪造假的登陆窗口，用来欺骗用户输入用户名和密码等信息。 4. 还可以在页面内生成浮窗广告，这些广告会严重影响用户体验。...
## 使用PPT创建数据结构与算法演出动画 环境： MacOS WPS Office for mac(2.3.1) ## 动画制作 以一个简单的排序交换动画来演示 1. 绘制图形元素 点击 插入 -> 形状 ，添加3个矩形， 如下图所示  2. 动画制作 点击 动画 -> 自定义动画， 选择右边的 `选择窗格`  下面我们要实现的效果是，矩形3往右移动，矩形2往左移动，两者同时移动的动画效果。下面我们来一个个实现...
## 什么是图片懒加载 当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。 比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。 这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要的原因就是会有性能问题。你可以在Network中查看，在页面滚动的时候，会看到图片一张张加载出来。  ## 为什么要做图片懒加载 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。 总结出来就两个点： 1.全部加载的话会影响用户体验 2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。 ## 懒加载原理 图片的标签是 `img`标签，图片的来源主要是 src属性，浏览器是否发起加载图片的请求是根据是否有src属性决定的。 所以可以从 `img`标签的 src属性入手，在没进到可视区域的时候，就先不给 img 标签的 src属性赋值。 ## 懒加载实现 实现效果图：  ```html Document div...
这篇文章称为笔记更为合适一些，内容来源于 《JavaScript高级程序设计 (第三版)》第六章 6.3 继承 ## JavaScript的几种继承方式 1. 原型链继承 2. 借助构造函数继承（经典继承） 3. 组合继承：原型链 + 借用构造函数（最常用） 4. 原型式继承 （Object.create） 5. 寄生式继承 6. 寄生组合式继承（最理想） 7. ES6中的继承 ## 1. 原型链继承 子类型的原型为父类型的一个实例对象 ```js function...
这篇文章称为笔记更为合适一些，内容来源于 《JavaScript高级程序设计 (第三版)》第六章 6.2 创建对象。 ## JavaScript的几种创建对象的方式 1. 工厂模式 2. 构造函数模式 3. 原型模式 4. 组合使用构造函数模式和原型模式（最常见） 5. 动态原型模式 6. 寄生构造函数模式 7. 稳妥构造函数模式 ## 1. 工厂模式 ```js function createPerson(name, age) { //...
## 数据类型存储 基本类型数据保存在在栈内存中 引用类型数据保存在堆内存中，引用数据类型的变量是一个指向堆内存中实际对象的引用，存在栈中。 为什么基本数据类型存在栈内存，引用数据类型存在堆内存? - 基本数据类型比较稳当，相对来说占用的内存较小 - 引用数据类型是动态的，大小不固定，占用的内存较大，但内存地址大小是固定的，因此可以将内存地址保存在栈中 ## 浅拷贝和赋值(=)的区别 基本类型赋值，系统会为新的变量在栈内存中分配一个新值，这个很好理解。 引用类型赋值，系统会为新的变量在栈内存中分配一个值，这个值仅仅是指向同一个对象的引用，和原对象指向的都是堆内存中的同一个对象。 ```js var obj1 = new Object(); var obj2 = obj1; obj1.name = 'lucyStar'; console.log(obj2.name); // lucyStar ```...
## 对比React生命周期 ## V16.3 之前的生命周期    ### 第一次渲染 ```js constructor -> componentWillMount -> render -> componentDidMount ``` ### props更新 ```js componentWillReceiveProps(newProps) -> shouldComponentUpdate((nextProps, nextState))(如果返回true) ->...
## 目录 - 牛客网如何监听你切到了其他页面 - JS原生3种绑定事件 - 如何做性能优化 - Event Loop（事件循环） ## 一. 牛客网如何监听你切到了其他页面 考察页面可见性的判断 - [document.hidden](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/hidden)属性(只读)，返回布尔值，表示页面是否处于隐藏状态。页面隐藏包括页面在后台标签页或者浏览器最小化。 - [visibilitychange](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/visibilitychange_event)事件：当文档的可见性改变时触发。 ```js document.addEventListener("visibilitychange", function() { console.log( document.hidden ); // Modify behavior... });...