- 博客(65)
- 收藏
- 关注
RSS订阅原创 xss、csrf、界面操作劫持详解
1. xss (Cross Site Scripting)跨站脚本攻击：发生在目标网站中目标用户的浏览器上，当用户浏览器渲染整个HTML文档的过程中执行了不在预期内的脚本时，就发生了xss。跨站脚本的重点不在‘跨站’上，而在于‘脚本’上。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。类型反射型xss(非持久型XSS)：...
2021-01-24 03:45:43
380
原创 useState源码分析
useState入口export function useState<S>( initialState: (() => S) | S,): [S, Dispatch<BasicStateAction<S>>] { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState);}function resolveDispatcher() { c
2021-01-24 00:22:27
575
3
原创 https是如何保证安全的？
HTTPS = HTTP + SSL/TLSTLS/SSL全称安全传输层协议Transport Layer Security, 是介于TCP和HTTP之间的一层安全协议。HTTPS协议的主要功能基本都依赖于TLS/SSL协议，TLS/SSL的功能实现主要依赖于三类基本算法：散列函数 Hash（MD5、SHA1、SHA256等）、对称加密（AES、DES）和非对称加密(RSA、DH)，其利用非对称...
2019-10-09 12:45:20
316
转载 html、css、js加载解析过程
网页加载流程：浏览器发送请求，拿到HTML资源，并开始解析。解析过程中，遇到link标签，浏览器发出对CSS文件的请求。当浏览器解析到<body>标签，并且CSS文件已经下载到手，可以开始渲染页面。当浏览器遇到<script>标签，阻塞页面的解析以及其他资源的下载，直到JS文件加载执行完毕浏览器完成解析HTML页面。注意:在页面渲染过程中，如果遇到其他外...
2019-09-29 12:58:04
835
原创 sessionStorge localStorge cookie
数据的生命周期：cookie在设置的有效期内有效，默认为浏览器关闭；sessionStorage页面关闭时被清理，localStorage长期有效，除非被清除，否则一直存在。存储大小：每个cookie数据不能超过4K。sessionStorage和localStorage大小可以达到5M。浏览器不能保存超过300个cookie，单个服务器不能超过20个。与服务端通信：cookie会在浏览器和...
2019-09-22 16:02:10
228
1
原创 前端应注意的SEO
合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可语义化的 HTML 代码，符合 W3C 规范...
2019-09-22 14:47:31
144
转载 输入一个url展示到页面
大致流程如下：浏览器根据请求的URL交给DNS域名解析，找到真实的IP，向服务器发起请求；服务器交给后台处理完后返回数据，浏览器接受文件（HTML/CSS/JS/图像等）；浏览器对加载到的数据进行解析，建立起相应的内部结构；载入解析到的资源文件，渲染页面，完成。输入URL后： 首先，浏览器会开启一个线程来处理这个请求，对URL分析判断，如果是http协议就按照Web方式来处理，如...
2019-09-22 13:39:28
149
原创 section、article、aside区别及HTML5语义化标签
在HTML5标准中，新加了几个用于增添页面语义的标签，这些标签有：article、section、nav和aside等。与别的大多数标签不同，浏览器在解释渲染这些标签的时候仅仅把它们作为普通的div块级元素来进行处理，不会添加任何额外的展现逻辑；也即，这些标签仅用于增添语义。对于Web开发人员而言，使用这些标签的实际意义主要有2点：搜索引擎优化(SEO)，以及增加页面的可用性(accessibil...
2019-09-10 14:14:55
2488
原创 Promise
Promise 是异步编程的一种解决方案。它解决了ajax请求过程中回调地狱的问题，令代码更具有可读性。Promise对象是一个构造函数，用来生成Promise实例。const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value)...
2019-09-05 00:45:51
172
原创 es6总结
新增块级作用域（let/const）let / const / var 区别声明方式变量提升暂时性死区重复声明初始值作用域var允许不存在允许不需要除块级let不允许存在不允许不需要块级const不允许存在不允许需要块级1.let 和 const 定义的变量在定义语句之前，如果使用会抛出错误(形成了暂时性死区)，而...
2019-09-03 16:18:26
114
原创 防抖|节流
防抖(debounce): n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间原理：第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。并且使用一个布尔值（ im...
2019-09-02 13:33:40
101
原创 call, apply, bind 区别
call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。除了第一个参数外，call 可以接收一个参数列表，apply 只接受一个参数数组let a = { value: 1}function getValue(name, age) { console.log(name) console.log(age) conso...
2019-09-01 00:40:41
95
原创 babel原理
什么是Babel？Babel 能够转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也能够运行。Babel 大概分为三大部分:解析: 将代码(其实就是字符串)转换成 AST( 抽象语法树)转换: 访问 AST 的节点进行变换操作生成新的 AST生成: 以新的 AST 为基础生成代码抽象语法树（AST）举个例子：// JSconst add = (a...
2019-08-31 20:21:32
232
原创 https原理
为什么http不安全？http协议属于明文传输协议，交互过程以及数据传输都没有进行加密，通信双方也没有进行任何认证，通信过程非常容易遭遇劫持、监听、篡改，严重情况下，会造成恶意的流量劫持等问题，甚至造成个人隐私泄露（比如银行卡卡号和密码泄露）等严重的安全问题。可以把http通信比喻成寄送信件一样，A给B寄信，信件在寄送过程中，会经过很多的邮递员之手，他们可以拆开信读取里面的内容（因为http...
2019-08-30 21:49:54
145
原创 new&&instance
new/* new操作符原理： 1. 创建一个对象 2. 链接到原型， 3. 绑定this 4. 返回新对象*/// 第一个参数为构造函数名称 其余参数为给该构造函数传递的参数function _new() { let obj = {} // 获取构造函数 let Con = [].shift.call(arguments) // 链接到原型...
2019-08-26 20:12:40
112
原创 伪类与伪元素
伪类伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover 来描述这个元素的状态。虽然它和普通的 css 类相似，可以为已有的元素添加样式，但是它只有处于 dom 树无法描述的状态下才能为元素添加样式，所以将其称为伪类。伪元素伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以...
2019-08-26 20:08:44
156
原创 强缓存和协商缓存
强缓存不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码，并且size显示from disk cache或from memory cacheExpires ： response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。它的值为一个绝对时间的GMT格式的时间字符串， 比如Expires...
2019-08-26 15:06:57
191
原创 跨域
跨域的方法有哪些？原理是什么？知其然知其所以然，在说跨域方法之前，我们先了解下什么叫跨域，浏览器有同源策略，只有当“协议”、“域名”、“端口号”都相同时，才能称之为是同源，其中有一个不同，即是跨域。那么同源策略的作用是什么呢？如果没有同源策略，不同源的数据和资源（如HTTP头、Cookie、DOM、localStorage等）就能相互随意访问，根本没有隐私和安全可言。为了安全起见和资...
2019-08-26 10:39:46
103
原创 包版本号的意义
格式：major.minor.patch（主版本号.次版本号.修补版本号）解读：patch：修复bug，兼容老版本minor：新增功能，兼容老版本major：新的架构调整，不兼容老版本version必须匹配某个版本如：1.1.2，表示必须依赖1.1.2版>version必须大于某个版本如：>1.1.2，表示必须大于1.1.2版>=version可大于...
2019-08-25 23:47:04
373
原创 webpack优化
webpack优化主要分为3个方面：优化开发体验(提升开发效率)优化构建速度优化使用体验优化输出质量一、优化构建速度1. 缩小文件搜索范围webpack在启动后会从配置的Entry出发，解析出文件的导入语句，在递归解析。在导入时会进行会进行如下两步操作：根据导入语句去寻找对应的需要导入的文件根据要导入文件的后缀，使用相对应的loader去处理文件。1.1 优...
2019-08-25 20:56:03
114
原创 居中
1水平居中行内元素text-align: center;块级元素2.1 定宽 margin: 0 auto2.2 不定宽将子元素改为行内元素display: inline; 在给父元素使用text-align: center; <!DOCTYPE html> <html lang="en"> <head>...
2019-08-21 16:01:57
123
原创 深浅拷贝
浅拷贝浅拷贝是拷贝引用(拷贝地址)，仍指向同一个地址，所以其中一方改变数据，另一方也会跟着改变实现方式对象Object.assign()Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。Object.assign()复制的对象第一层是深拷贝，第二层及以后每层都是浅拷贝let obj1 = { na...
2019-08-20 23:05:51
97
原创 闭包
闭包是指有权访问另外一个函数作用域中的变量的函数创建闭包的方式在一个函数内部创建另一函数function func(){ var a = 1,b = 2; function closure(){ return a+b; } return closure;}闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域应用场景创建私有...
2019-08-20 10:25:57
623
原创 正则表达式
字符含义举例^匹配输入的开始/^A/ 并不会匹配 “an A” 中的 ‘A’，但是会匹配 “An E” 中的 ‘A’。$匹配输入的结束/t$/ 并不会匹配 “eater” 中的 ‘t’，但是会匹配 “eat” 中的 ‘t’*匹配前一个表达式0次或多次，等价于 {0,}/bo*/ 会匹配 “A ghost boooooed” 中的 ‘booooo’ 和 ...
2019-08-18 23:38:12
94
转载 正则表达式--replace
MDN解释： 返回一个由替换值替换一些或所有匹配的模式后的新字符串。使用以下值作为替换参数序列变量名代表的值1$$插入一个 “$”2$&插入匹配的子串3$`插入当前匹配的子串左边的内容4$’插入当前匹配的子串右边的内容5$n假如第一个参数是 RegExp对象，并且 n 是个小于100的非负整数，那么插入第 n 个括...
2019-08-18 14:02:00
8475
1
原创 原型链
原型在 JavaScript 中，每个构造函数都有一个prototype 属性，这个属性指向函数的原型对象（原型）。使用原型对象的好处是所有对象实例共享它所包含的属性和方法。什么是原型链？原型链解决的主要是继承问题。每个对象拥有一个原型对象，通过__ proto__ ([[Prototype]]) 指针指向创建该对象的构造函数的原型，并从中继承方法和属性，同时原型对象也可能拥有原型，这样一...
2019-08-14 11:13:17
99
原创 设计模式
工厂模式工厂模式提供一个通用的接口来创建对象。 class Student { constructor(name, subjects) { this.name = name; // ... // 如果是文科生：['政治', '历史', '地理'] // 如果是理科生：['...
2019-08-06 18:27:46
93
原创 事件循环
JavaScript一门是单线程的脚本语言，为什么说它是单线程的呢？作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它是单线程，否则会带来很复杂的同步问题。举个列子，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所以，为了避免复杂性，从一诞生，JavaScript就是单线...
2019-08-01 01:02:32
207
原创 regeneratorRuntime is not defined
regeneratorRuntime is not defined 报错原因：babel默认会将async/await方法编译为generator，generator在服务端运行会有问题解决办法：在.babelrc文件中，根据不同的运行环境，指定不同的配置"env": { "browser": { "presets": [ [ "@bab...
2019-07-28 15:18:32
1124
原创 cannot read property 'render' of undefined
首先查看配置文件，在webpack.config.server.js中入口配置错误：1 在服务端webpack配置中入口文件写错为entry: path.join(__dirname, ‘…/client/client-entry.js’)应该为entry: path.join(__dirname, ‘…/client/server-entry.js’)2. 报错： Request fai...
2019-07-25 12:40:12
9942
原创 this
this代表的是当前行为执行的主体，它实际上在函数被调用时发生的绑定，他指向什么完全取决于函数在哪被绑定一。关于this函数执行时首先看函数名前面是否有"."，有的话，"."前面是谁,this就是谁；没有的话this就是windowfunction fun() { console.log('this',this) } obj = {fun} fun...
2019-07-24 23:49:23
203
原创 react组件传值
react子组件向父组件传值// 父组件 class App extends Component { constructor(props) { super(props) this.state = { test: '123' }; } parentClick(arg) { t...
2019-07-24 19:57:16
111
原创 vue组件传值
1.子组件向父组件传值：子组件定义事件，使用this.$emit(事件名，需要传的值)父组件使用@事件名=事件名2拿到子组件定义的事件,无需传递参数父组件的methods中定义事件名2所需的操作，定义的函数形参为需要传递的值TodoTab： <span v-for="state in states" :key="state" ...
2019-07-24 19:54:16
96
原创 踩坑：css-loader使用CSS Modules问题
首先，在vue-loader v14与v15版本中，使用css Modules的方式有所不同。// v15{ module: { rules: [ // ... 其它规则省略 { test: /\.css$/, use: [ 'vue-style-loader', { ...
2019-07-19 20:07:11
4226
原创 js调试方法总结
好的调试方法会大大提高debug的速率。在js中，开发人员调试时最常用的方式即为console.log（），但是不免存在局限性。接下来总结几种常用的调试方法：alertalert是比较常用的debug方式，但是alert最大的局限性–只能打印字符串。如果显示内容不为字符串，alert会调用toString（）方法将该对象转化为字符串（eg：[object object],其具体内容并不会显...
2019-06-18 16:14:15
4114
原创 js继承
1. 组合继承原理：将原型链和借用构造函数的技术组合在一起。使用原型链实现对原型属性和方法的继承，使用借用构造函数实现对实例属性的继承。function SuperType(name){ this.name = name; this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function()...
2019-04-23 01:09:50
112
原创 js创建对象的方法总结
1. 对象字面量方式var person = { name: "XiaoMing", age: 29, job: "Software Engineer", sayName: function () { alert(this.name) }2.object构造函数var person = new Object();person.name = "X...
2019-04-22 12:56:15
3109
原创 谈谈BFC
BFC(Block Formatting Context）中文叫块级格式化上下文, 它是一个独立渲染的区域。它有着独立的渲染规则，决定了其子元素如何布局，以及与其他元素间的作用与关系。BFC触发条件...
2019-03-20 11:20:54
144
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人