XinKun的博客

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

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

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

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

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

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

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

一、前言为什么说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

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

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

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

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

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

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

一、宏任务和微任务宏任务（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

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

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

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

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

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

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

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

一、export的使用1.直接输出export let words = 'hello world!!!' export function output() { 　　// ... }2.先定义再输出let firstWords = 'hello'let secondWords = 'world'let thirdWords = '!!!'function output() { // ...}export {firstWords, secondWords, thirdWor

一、什么是PromisePromise是异步编程的一种解决方案，在ES6中Promise被列为了正式规范，统一了用法，原生提供了Promise对象。它支持链式调用，同时解决了回调地狱的问题。二、Promise的基本用法Promise的构造函数接收一个参数，是函数，并且传入两个参数：resolve，reject，分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。let p = new Promise(function(resolve, reject){ //做一些异步操作

总体过程：1.输入地址。2.DNS解析。DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如http://www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。3.TCP连接（三次握

BFC规定了内部的Block Box如何布局BFC的布局规则：内部的Box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC的区域不会与float box重叠。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如

href和src的区别：1 .请求资源类型不同href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片。2.作用结果不同href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；3.浏览器解析方式不同若在文档中添加 ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用

伪类和伪元素：根本区别在于它们是否创造了新的元素（抽象）1.伪类：用于向某些选择器添加特殊的效果（没有创建新元素）:last-child /* 选择元素最后一个孩子 */:first-child /* 选择元素第一个孩子 */:nth-child(1) /* 按照第几个孩子给它设置样式 */a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /*

实现思路：给一个div设置宽度和高度都为0px，然后设置border的样式和和宽度，将border其他三边的样式改为transparent。实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"

直接上代码：<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" rev="stylesheet" href="myCss.css" type="text/css" > <style type="text/css" > @import url("./myCss.css"); </style> &lt

一、应用场景在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。两种函数都用到了闭包。二、函数防抖（debounce）当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。代码如下:// 过N秒后函数执行一次 如果一直触发

基本包装类型在基本数据类型中有3个特殊的存在：String Number Boolean这三个基本类型都有自己对应的包装对象。包装对象，其实就是对象，有相应的属性和方法。调用方法的过程，是在后台偷偷发生的，所以我们称作为基本包装类型。举个例子：//我们平常写程序的过程：var str = 'hello'; //string 基本类型var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ：//后台偷偷发生的（ var _str = new Str

一、区别：1. px是固定的像素，一旦设置了就无法因为适应页面大小而改变。2. em和rem相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。3.em是相对于其父元素来设置字体大小的，一般都是以<body>的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。总之em相对于父元素，rem相对于根元素。二、

一、 watch是什么？监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。简洁的说：watch的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。二、应用基本用法：当firstName值变化时，watch监听到并且执行watch中的firstName函数<div> <p>FullName: {{fullName}}</p> <p>FirstN

一、==对于 == 来说，如果对比双方的类型不一样的话，就会进行类型转换：1. 首先会判断两者类型是否相同。相同的话就是比大小了2. 类型不相同的话，那么就会进行类型转换3. 会先判断是否在对比 null 和 undefined`，是的话就会返回 true4. 判断两者类型是否为 string 和 number ，是的话就会将字符串转换为 number5. 判断其中一方是否为 boolean ，是的话就会把 boolean 转为 number 再进行判断6. 判断其中一方是否为 object

call()、apply()、bind()是用来改变this的指向的。一、call和apply直接举例子：var cat = { name:"喵喵", eatFish:function(param1,param2){ console.log("吃鱼"); console.log("this的指向=>"); console.log(this); console.log(param1,param2); }} var dog = { name:"汪汪", eatB

一、先来说说栈内存和堆内存概念    堆和栈都是运行时内存中分配的一个数据区，因此也被称为堆区和栈区，    但二者存储的数据类型和处理速度不同。堆（heap）    队列优先,先进先出。用于复杂数据类型（引用类型）分配空间，例如数组对象、    object对象（引用类型的值通常大小不固定，所以被存储在堆内存中，不会自动释放）；    它是运行时动态分配内存的，因此存取速度较慢。栈（stack）    先进后出。主要存放一些基本类型（Undefined、Null、Boolean、Nu

核心：Object.prototype.toString.call用 typeof 是否能准确判断一个对象变量，答案是否定的，null 的结果也是 object，数组的结果也是 object，有时候我们需要的是 “纯粹” 的 object 对象。如何避免呢？比较好的方式是：console.log(Object.prototype.toString.call(obj) === "[object Object]");使用以上方式可以很好的区分各种类型：console.log(Object.protot

一、Array.isArrayES5新增的数组方法，Array.isArray应该是我们最先想到的判定方式，现在应用的也比较广泛。const arr = [1,2,3,4]Array.isArray(arr) // true二、instanceof一般来说，instanceof关键字，是用来判断某个元素是否某对象构造函数实例。在数组判断上，instanceof关键字也可以进行数组的判定。const arr = [1, 2, 3, 4]arr instanceof Array //

一、关于组件通信组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。组件可以有以下几种关系：父子关系， 兄弟关系，隔代关系（可能隔多代）。本文总结了vue组件间通信的几种方式，如props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和provide/inject。图示如下：二、组件通信的方式：方法一、props/$emit父组件A通过props的方式向子组件B传递，B t