鱼与前端🐟

前言web前端你必须了解的DNS，下面讲解DNS的一些过程和由来以及产生的安全问题关键词：DNS是什么、DNS的分布式、层次数据库、本地DNS服务器、DNS递归查询和迭代查询、DNS缓存、DNS劫持 什么是DNSDNS即域名系统，全称是Domain Name System。当我们在浏览器输入一个URL地址的时候，浏览器要向这个URL的主机名对于的服务器发起请求，就得知道服务器的IP。对于浏览器来说，DNS的作用就是将主机名转换为IP地址。 DNS是： 一个由分层的DNS服务器实现的分布式数据库 一个使得主机能够查阅分布式数据库的应用层协议 也就是 DNS是一个应用层的协议，我们发送一个请求，其中包含我们要查询的主机名，他就会给我们返回这个主机名对应的IP。 其次，DNS是一个分布式数据库，整个DNS由分散在世界各地的很多台DNS服务器组成，每台DNS服务器上面都保存了一些数据，这些数据可以让我们查到最终主机名对应的IP 所以DNS的查询过程，本质上就是去向这些DNS服务器访问，直到查到这个IP为止。 分布式、层次数据库什么是分布式因为所有的主机不可能全部ip都放在一台dns服 ...

[toc] 前言详细记录flex弹性布局的具体属性和常考题。关键词：flex属性、 flex概念弹性盒子是一种按行或者按列布局元素的一种以为布局方法，容器里面的元素可以膨胀填充额外的空间，收缩来适应更小的空间，适用于任何元素。 元素使用flex布局就会在内部形成BFC，目前flex已经适配所有常规浏览器 拓展：BFCBFC：块级格式化上下文，是一个完全独立的空间，里面的子元素不会影响到外面的布局。 触发BFC的方式： overflow:hidden display:inline-block,table-cell,flex position:absolute,fixed BFC解决的问题： 高度塌陷 margin边距重叠 flex和inline-flexdisplay有两种设置方式：flex和inline-flex。 区别在于：flex元素和宽度是父容器的100%inline-flex是所有元素的宽度和 那么在元素溢出的情况下是怎么样呢？可见inline-flex会撑大flex容器，造成溢出 使用inline-flex的时候，注意配合min-width和min-height一起 ...

前言将2w字长文分成了七个模块，方便今后补充内容，详见传送门。 传送门你所不知道的JavaScript①—数据类型及周边你所不知道的JavaScript②—this及周边你所不知道的JavaScript③—原型及周边你所不知道的JavaScript④—异步任务与事件你所不知道的JavaScript⑤—垃圾回收与内存泄漏你所不知道的JavaScript⑥—面向对象与模块化

关键词面向对象、迭代器、模块化 面向对象对象遍历 for in Object.keys(xxx)把key取出来作为一个数组。 Object.values(xxx)遍历对象的值作为一个数组编程思想 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计 优点： 易维护：采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，维护也只是在局部模块，所以维护起来非常方便，成本较低 易拓展 开发工作的重用性，继承性高，降低重复工作量 缩短了开发周期一般面向对象包括：继承，封装，多态，抽象 对象形式的继承讲深浅拷贝之前，我们需要知道，基本数据类型在栈里面，被复制了就算修改也不会改变原来的的值，引用数据类型在堆里面，因为共享内存所以复制后被修改会改变源对象的值，至此引申出深浅拷贝。 浅拷贝基本的浅拷贝就是对象的赋值，但我们需要注意，实际上我们的需求是复制源对象上面的属性，那么单纯的赋值，会把新对象的值给覆盖掉。参见下面 12345678910111213141516171819202122232425262728var Person = { ...

关键词垃圾回收、内存泄漏 垃圾回收 为什么要垃圾回收？js的变量没有固定大小，是动态分配的，所以需要进行垃圾回收，避免内存占用满了之后造成系统崩溃。 垃圾回收的机制/特点对于栈内存 切换到别的上下文就回收对于堆内存 分为新生代和老生代 含义：新生代指的是只经过一次垃圾回收的对象，老生代指的是经过多次垃圾回收的对象 具体：新生代被分为from和to两个空间。to一般闲置，在from的空间满了之后执行scavenge算法进行垃圾回收。 执行垃圾回收的时候应用逻辑将停止，等垃圾回收结束后继续执行 什么时候回收?利用浏览器的空闲时间 scavenge算法算法分为三步： 检测from空间的存活对象，查看是否满足老生代条件（to是否超过25%/是否经历过一次垃圾回收）?老生代:移动到to空间 如果对象不存活则释放对象的空间 最后将from和to空间进行角色交换 新生代到老生代条件有两个 我们知道新生代的条件是只经过一次垃圾回收，也就意味着它经历了一次Scavenge to空间的内容使用占比。因为scavenge算法结束之后会交换fromto的位置，所以to的空间不能太小，影响到后 ...

关键词事件机制、Promise、Generator、async/await、事件循环 事件机制事件的触发过程？事件代理？ 简介事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中的两种不同的传播方式。 事件流的三个阶段 事件捕获阶段 目标阶段 事件冒泡阶段 事件捕获事件捕获通俗的理解就是鼠标点击或者触发dom事件的时候，浏览器从根节点开始由外到内的进行事件传播，即点击了子元素。如果父元素通过捕获方式注册了对应的事件的话，会先触发父元素绑定的事件 事件冒泡事件冒泡和事件捕获相反，顺序是由内到外直到根节点 无论是事件捕获还是冒泡，都有一个共同的特征就是事件传播 事件流阻止在一些情况下要阻止事件流的传播，阻止默认动作的发生 event.preventDefault()取消事件对象的默认动作以及继续传播 event.stopPropagation()/event.cancelBubble = true阻止事件冒泡在不同浏览器的处理 在IE下使用 event.returnValue= false， 在非IE下则使用 event.preventDefault() ...

关键词原型、原型链、继承 原型、原型链__proto__和prototype的关系：__proto__和constructor是对象独有的，prototype是函数独有的。 在js中我们使用构造函数来新建一个对象，每一个构造函数的内部都有一个prototype属性，这个属性是一个对象，这个对象包含了可以由该构造函数的所有实例共享的方法和属性。当我们使用构造函数新建一个对象之后，在这个对象的内部将包含一个指针，这个指针指向构造函数的prototype属性对应的值，在es5中这个指针被称为对象的原型。一般来说不能获取到这个值，但是浏览器下载都实现了proto属性让我们来访问，但是最好是不要使用这个属性，因为他不是规范的，最好使用Object.getPrototypeOf()来获取对象的原型 当我们访问一个对象的属性的时候，如果这个对象内部不存在这个属性，那么他就会去他的原型对象里面找这个属性，这个原型对象又会有自己的原型，于是就一直找下去，也就是原型链的概念。原型链的尽头一般来说是Object.prototype所以这就是我们新建的对象为什么能够使用toString等方法的原因 特点： ...

关键词this关键字、apply/call/bind 原理、变量提升、执行上下文、作用域、闭包、new关键字 Thisthis指向调用其的对象。顺带一提，es6中的箭头函数没有this,argument,super等。这些只依赖包含箭头函数最接近的函数。 先来看适用场景 12345678910111213function foo() { console.log(this.a)}var a = 1foo()//指向window window没有a 输出undefinedconst obj = { a: 2, foo: foo}obj.foo() //指向obj 输出2const c = new foo() //指向c new绑定了c c没有a 输出undefined 箭头函数中的this 123456789function a() { return () => { return () => { console.log(this) } }} ...

前言Web安全一直是老生常谈的一个问题，下面就讲解关于CSRF的内容关键词：CSRF的由来、CSRF攻击流程、CSRF类型、CSRF特点、CSRF和XSS的区别、CSRF防御手段。 CSRF是什么？跨站请求伪造（Cross-site request forgery），也被称为 one-click attack 或者 session riding，通常缩写为 CSRF 或者 XSRF， 是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。如:攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。 CSRF攻击流程 综上所述，要想完成一次CSRF攻击，就要进行以下两个步骤： 登陆受信任的网站A并在本地生成cookie 在没有登出a的情况下访问了b网站 看到这里，你也许会说：“如果我不满足以上两个条件中的一个，我就不会受到CSRF的攻击”。是的，确实如此，但你不能保证以下情况不会发生： 你不能保证你登录了一个网站后，不再打开一个ta ...

前言Web安全一直是老生常谈的一个问题，下面就讲解关于XSS的内容关键词：XSS的由来、XSS类型、XSS预防手段、XSS检测。 XSS是什么？Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击，攻击者通过在目标网站上面注入恶意的脚本，让其在用户的浏览器上面运行。利用这些脚本就能轻易获取到用户的cookie，sessionID等，产生进一步安全威胁。 在命名上为了和css区分，改为了xss 在处理输入的时候，以下内容不可信： 来自用户的 UGC 信息 来自第三方的链接 URL 参数 POST 参数 Referer （可能来自不可信的来源） Cookie （可能来自其他子域注入） XSS分类根据攻击来源，可以分为存储型，反射型和DOM型 存储型攻击流程： 攻击者将恶意代码提交到网站的数据库中 用户响应服务端的恶意代码 恶意代码窃取用户敏感信息发送到攻击者网站，或冒充用户行为执行操作。 常见场景：论坛发帖，商品评论，用户私信 反射型攻击流程： 攻击者构造出特殊的URL里面包含恶意代码 用户被诱导点击特殊URL，执行恶意操作。 反射型和存 ...