二九君-CSDN博客

转载 XSS攻击与CSRF攻击

XSS攻击Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。XSS 常见的注入方法：在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。在内联的 JavaScript 中，拼接的数据突破了原本的限制（字符串，变量，方法名等）。在标签属性中，恶意内容包含引号，从而突破属性值

2021-06-01 17:37:36 864

原创手写Promise.all

一、Pormise.all它接受一个Promise对象组成的数组。返回一个新的Promise，只有所有的Promise都成功才成功，只要有一个失败了就直接失败。成功的结果是每个Promise成功结果组成的数组，失败的结果是Promise数组中失败的结果。传入一个 Iterable，但大部分情况下是数组，以下以数组代替传入一个数组，其中可包含 Promise，也可包含普通数据数组中 Prmise 并行执行但凡有一个 Promise 被 Reject 掉，Promise.all 失败保持输出数组位

2021-05-24 18:17:10 257

原创 JavaScript中new操作符到底做了什么

做了什么？创建了一个空的js对象（即{}）将空对象的原型__prototype__指向构造函数的原型(prototype)将空对象作为构造函数的上下文（改变this指向使用apply）对构造函数有返回值的判断怎么实现？/* create函数要接受不定量的参数，第一个参数是构造函数（也就是new操作符的目标函数），其余参数被构造函数使用。 new Create() 是一种js语法糖。我们可以用函数调用的方式模拟实现*/function create(Con,...

2021-05-22 21:01:28 232

原创 JavaScript中instanceof实现原理（判断obj.proto === proto）

一、instanceof是干什么的instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。二、代码实现function instance_of (obj, Fn) { // 判断传入的构造函数是不是函数类型 if (typeof Fn !== 'function') { throw new TypeError('不是函数'); } // 实例不是对象, 返回false if (!obj ||

2021-05-22 20:37:39 244

原创 JavaScript原生实现图片懒加载

一、懒加载原理一张图片就是一个<img>标签，浏览器是否发起请求图片是根据<img>的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给<img>的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。二、懒加载思路及实现实现懒加载有四个步骤，如下：加载loading图片判断哪些图片要加载【重点】隐形加载图片替换真图片注意：判断clientHeight+scrollTop>offsetTop这一步是

2021-05-22 14:23:12 190

原创 HTTP1.0/1.1/2.0 的区别

一、HTTP1.0HTTP协议的第二个版本，第一个在通讯中指定版本号的HTTP协议版本HTTP 1.0 浏览器与服务器只保持短暂的连接，每次请求都需要与服务器建立一个TCP连接服务器完成请求处理后立即断开TCP连接，服务器不跟踪每个客户也不记录过去的请求简单来讲，每次与服务器交互，都需要新开一个连接。例如，解析html文件，当发现文件中存在资源文件的时候，这时候又创建单独的链接最终导致，一个html文件的访问包含了多次的请求和响应，每次请求都需要创建连接、关系连接这种形式明显造成了性能上的

2021-05-21 09:47:27 562

原创 JavaScript中的浅拷贝与深拷贝（手写浅拷贝和深拷贝）

一、简介数据分为基本数据类型和引用数据类型。基本数据类型：String、Number、Boolean、Null、Undefined、Symbol。基本数据类型是直接存储在栈中的数据。引用数据类型：Array、Object。引用数据类型存储的是该对象在栈中引用，真实的数据存储在内存中。由于基本数据类型是直接存储的，所以如果我们对基本数据类型进行拷贝，然后修改新数据后，不会影响到原数据。而当你对引用数据类型进行拷贝，然后修改新数据后，它就会影响到原数据。二、浅拷贝、深拷贝与赋值的区别赋值

2021-05-19 22:55:57 805 10

原创 JavaScript数组扁平化的五种方式

一、数组扁平化概念数组扁平化是指将一个多维数组变为一维数组[1, [2, 3, [4, 5]]] ------> [1, 2, 3, 4, 5]二、实现方式1、reduce遍历数组每一项，若值为数组则递归遍历，否则concat。reduce() 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。语法：array.reduce(function(total, currentValue, currentIndex, arr), initialValu

2021-05-19 11:37:17 212

转载浏览器页面渲染机制

一、前言浏览器的内核是指支持浏览器运行的最核心的程序，分为两个部分的，一是渲染引擎，另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）。这里面大家最耳熟能详的可能就是 Webkit 内核了，Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例，对现代浏览器的渲染过程进行一个深度的剖析。二、页面加载过程在介绍浏览

2021-05-15 17:25:21 2105

原创 JavaScript中typeof、instanceof与===进行数据类型的判断

一、JS中的数据类型NumberBooleanStringNullUndefinedObject// BigInt和Symbol暂且不谈BigIntSymbolBigInt和Symbol暂且不谈二、typeoftypeof(注：typeof返回的值都是小写的数据类型的字符串表达，如：‘object而不是Object’) 其实就是判断参数是什么类型的实例，就一个参数，例：typeof A其返回值(只能是这6个)：string/number/boolean/undefined

2021-05-11 17:34:06 247

转载为什么说ES6的class是语法糖?

一、前言为什么说ES6的class是语法糖?class是原型的语法糖吗?那又是如何使用原型来实现class这一语法糖的呢？二、基于Prototype的OOP（面向对象）先来看个例子：function Person (name, sex) { this.name = name this.sex = sex} function Man (name) { this.name = name} Man.prototype = new Person('', 'male') let

2021-05-11 11:16:59 396

原创 JavaScript通过Promise来控制并发请求个数

一、场景假设现在有这么一种场景：现有 30 个异步请求需要发送，但由于某些原因，我们必须将同一时刻并发请求数量控制在 5 个以内，同时还要尽可能快速的拿到响应结果。如图所示：上图这样的排队和并发请求的场景基本类似，窗口只有三个，人超过三个之后，后面的人只能排队了。二、串行和并行串行：一个异步请求完了之后在进行下一个请求并行：多个异步请求同时进行串行举例：var p = function () { return new Promise(function (resolve, rejec

2021-05-10 19:24:58 1006 1

转载 TCP和UDP的区别

1. 基于连接vs无连接TCP是面向连接的协议。UDP是无连接的协议。UDP更加适合消息的多播发布，从单个点向多个点传输消息。2. 可靠性TCP提供交付保证，传输过程中丢失，将会重发。UDP是不可靠的，不提供任何交付保证。（网游和视频的丢包情况）3. 有序性TCP保证了消息的有序性，即使到达客户端顺序不同，TCP也会排序。UDP不提供有序性保证。4. 数据边界TCP不保存数据边界。虽然TCP也将在收集所有字节之后生成一个完整的消息，但是这些信息在传给传输给接受端之前将储存

2021-05-08 17:47:25 1928

原创 CSS样式优先级（重置版）

一、先来看到面试题.red p{ color: red ; // 红色}.blue p{ color: blue ; // 蓝色}<div class="red "> <div class="blue "> <p>我是什么颜色？</p> </div></div> <div class="blue "> <div class="red "> &

2021-05-08 16:32:20 254

转载前端浏览器缓存

一、缓存简介什么是缓存：当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。缓存有哪些好处？缓解服务器压力，不用每次都去请求某些数据了。提升性能，打开本地资源肯定会比请求服务器来的快。减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，至于为什么打开本地资源也会产生网络消耗，下面会有说明。Web缓存种类：数据库缓存，CDN缓存，代理服务器缓存，浏览器缓存。所

2021-05-06 18:10:38 292

原创 JavaScript中的Map和Set

一、MapMap对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。Map对象的属性：size：返回Map对象中所包含的键值对个数Map对象的方法：set(key, val): 向Map中添加新元素get(key): 通过键值查找特定的数值并返回has(key): 判断Map对象中是否有Key所对应的值，有返回true,否则返回falsedelete(key): 通过键值从Map中移除对应的数据clear(): 将这个Map中的

2021-05-06 15:39:07 383

原创 HTML5语义化

一、什么是语义化就是用合理、正确的标签来展示内容，比如h1~h6定义标题。二、语义化的优点易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。方便其他设备解析，如盲人阅读器根据语义渲染网页有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。三、主体的结构1、<header><header>定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。在一个文档中，您可以

2021-05-06 10:44:59 113

原创 JavaScript中的宏任务和微任务

一、宏任务和微任务宏任务（macrotask）微任务（microtask）由谁发起宿主（Node、浏览器）JS引擎具体事件1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js）1. Promise 2. MutaionObserver 3. Object.obse

2021-05-05 15:27:53 164

原创 Vue使用nextTick获取最新的DOM

一、什么是Vue.nextTick()在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。二、原理Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。三、应用场景在Vue生命周期的created()和mounted()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中在creat

2021-05-03 17:18:02 647

原创 JavaScript根据某个相同的字段进行数据分组

一、为什么进行数据的分组后端返回的数据往往有可能是未按照某个相同字段值所分好组。而前端有时候的需求是对数据进行分组展示。（其实这个工作前后端都可以完成）二、实现方式数据示例：var arr = [{ "categoryId":123456, "parentId":2010105, "name":"Web解决方案"},{ "categoryId":2010106, "parentId":2010105, "name":"IT解决方案"},{

2021-04-14 18:38:17 3152 1

原创前端的存储方式（Cookie、localStorage、sessionStorage和IndexDB）

一、前端存储的优势方便网页的加载，避免了在发送请求收到响应前页面的空白期。也可以在非强制性要求实时最新数据时减少向服务端的请求，加快渲染速度。在网络不佳或无网络时仍有离线数据可以查看。二、前端存储的方式：存储大概分为两大类，一类为存储类，另一类为缓存类。存储类：Web存储（Web Storage）：HTML 5 中提出的存储方式，容量有 5 M。localStoragesessionStorageCookie：浏览器普遍支持的基于 HTTP 协议的存储方式，但容量只

2021-04-01 15:22:41 2291

原创原生JavaScript实现上拉加载更多

实现的主要参数：scrollTop：滚动视窗的高度距离window顶部的距离，它会随着往上滚动而不断增加，初始值是0，它是一个变化的值。clientHeight:它是一个定值，表示屏幕可是区域的高度。scrollHeight：页面不能滚动时是不存在的，body长度超过window时才会出现，所表示body所有元素的长度。由上面的三个值所产生一个原理公式：scrollTop + clientHeight >= scrollHeight(个人理解这里会有个大于号是因为移动端可能会有当到底还可以下

2021-03-04 19:41:55 665 2

原创 GET和POST两种区别

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。GET在浏览器回退时是无害的，而POST会再次提交请求。GET产生的URL地址可以被Bookmark，而POST不可以。GET请求会被浏览器主动cache，而POST不会，除非手动设置。GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。GET请求在URL中传送的参数是有长度限制的，而POST么有。

2021-03-02 12:59:03 189

原创 HTTP常用状态码及其含义

1XX：信息状态码100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息。2XX：成功状态码200 OK 正常返回信息201 Created 请求成功并且服务器创建了新的资源202 Accepted 服务器已接受请求，但尚未处理3XX：重定向301 Moved Permanently 请求的网页已永久移动到新位置。302 Found 临时性重定向。303 See Other 临时性重定向，

2021-03-02 11:20:42 326

转载 Vue-router中的导航守卫(全局守卫、路由独享守卫、组件内守卫)

一、全局守卫1.router.beforeEach((to,from,next)=>{})2.回调函数中的参数，to：进入到哪个路由去，from：从哪个路由离开，next：函数，决定是否展示你要看到的路由页面。3. 如下例：main.js中设置全局守卫在main.js中，有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。

2021-03-02 10:53:47 566

原创 Axios框架的基本使用

一、什么是AxiosAxios就是一个基于Promise的，发送http请求的一个工具库。特点：支持Promise API拦截请求和响应。拦截请求，可以过滤请求参数；拦截响应，可以处理响应异常取消请求。请求可以手动取消二、在Vue中使用Axios1、安装Axios模块npm install --save-dev axios2、在index.js文件中引入Axiosimport axios from 'axios'new Vue({ // el: '#app', // ro

2021-03-02 00:07:27 225

原创 Vue-router中的路由懒加载（异步组件）

一、为什么使用路由懒加载当项目越来越大时，vue打包后的js文件也越来越大，这会是影响加载时间的重要因素。当构建的项目比较大的时候，懒加载可以分割代码块，提高页面的初始加载效率。二、懒加载的实现方式方法一 resolve这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载，下面是代码示例：import Vue from 'vue'import Router from 'vue-router'// import HelloWorld from

2021-03-01 22:14:59 901

原创 Vue中this.$set的用法(解决数组、对象修改后不更新问题)

一、this.$set实现什么功能，为什么要用它？当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’).二、怎么用它？举个例子：1.Vu

2021-03-01 21:53:19 29261 1

原创浏览器重排和重绘

重排：浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM树和渲染树），DOM树表示页面结构，渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。重绘：重绘是**一个元素外观的改变所触发的浏览器行为**，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但table

2021-03-01 20:57:36 191

原创 Vue中mode hash和history的区别

对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持：hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括

2021-03-01 20:21:47 226

空空如也

空空如也