- 博客(89)
- 收藏
- 关注
RSS订阅原创 当hover父元素如何修改子元素样式
背景概述当鼠标作用于outer时，修改inner的背景 <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div>
2020-08-19 17:27:33
5583
1
原创 正则匹配时间字符串
文章目录年份月份日组合起来判断年月日判断时间是否符合要求综合判断yyyy-MM-dd HH:mm:ss后续可以优化形式：yyyy-MM-dd HH:mm:ss连字符可以有：-/. 空格 （没有的情况暂时不考虑，其实是应该考虑的）年份范围：1 - 9999需要排除0000等前置0的情况（只要前面有0，就不会匹配）正则：((?!0{1,4})[0-9]{1,4})月份范围：01 - 12 or 1 - 12需要排除0 / 00 or 超过12的情况正则：(0(?:[1-9])|1(?:[0-
2020-07-23 15:44:37
3507
原创 compositionAPI
目录开始工作有关API学习整理setupref和reactivecomputedwatchEffectwatch[readonly][toRef]toRefs判断创建类型的API生命周期Lifecycle Hooks错误记录【已解决】Error: Cannot find module 'core-js/modules/es.[number].constructor'【未解决】"export 'xxx' was not found in '@vue/
2020-05-27 20:14:55
2372
原创 CSRF攻击
目录什么是CSRF攻击自动发起GET请求自动发起POST请求引诱用户点击链接与XSS区别防范CSRF攻击Cookie的SameSite属性验证请求的来源站点CSRF Token什么是CSRF攻击CSRF：Cross-site request forgery，“跨站请求伪造”，黑客引诱用户打开黑客的网站，在黑客的网站用，利用用户的登录状态发起的跨站请求。简单来讲，CSRF攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事自动发起GET请求.
2020-05-24 12:59:56
438
原创 跨站脚本攻击（XSS）
目录什么是XSS攻击恶意代码是怎么注入的存储型XSS攻击反射性XSS攻击基于DOM的XSS攻击如何阻止XSS攻击服务器对输入脚本进行过滤或者转码充分利用CSP使用HttpOnly属性我们默认页面中可以引用任意第三方资源，然后又引入了CSP策略来加以限制；默认XMLHttpRequest和Fetch不能跨站请求资源，然后又通过CORS策略来支持其跨域。不支持页面中的第三方资源引用和CORS也带来了许多问题，其中最典型的就是XSS攻击什么是XSS攻击XS.
2020-05-24 12:58:25
440
1
原创 渐进式网页应用（PWA）
目录PWAWeb应用 VS 本地应用Service Worker设计思路浏览器三大进化路线： 应用程序Web化 Web应用移动化 Web操作系统化 主要说一下第二个：Web应用移动化对于收集设备来说，前有本地App，后有移动小程序，想要浏览器切入到移动端时相当困难的一件事，因为浏览器的运行性能时低于本地App的，并且Google也没有类似微信或者Facebook体量的用户群体不过要想切入到移动端，让其取得和原生应用同等待遇，Google提出了P.
2020-05-24 12:56:14
1729
2
原创 HTTP性能优化
目录开源节流缓存HTTP/2硬件软件、内部外部、花钱不花钱 购买更好的硬件：CPU、网卡、带宽、服务器 购买外部的软件或者服务：CDN 不花钱开源 使用高性能的Web服务器 启用长连接：connect：keep-alive TCP Fast Open 节流 gzip和br算法压缩 HTML/CSS/JS，压缩去掉多余的空格、换行、注释等 资源合并的优化 减少header地大小，不必.
2020-05-24 12:54:30
416
原创 WebSocket
目录why请求-应答的缺点轮询的缺点websocket特点websocket帧结构"WebSocket"是一种基于TCP的轻量级网络通信协议，在地位上与HTTP“平级”的why"WebSocket"与HTTP/2一样，都是为了解决HTTP某方面的缺陷而诞生的。 HTTP/2针对的是“队头阻塞” WebSocket针对的是“请求-应答”的通信模式 请求-应答的缺点“请求-应答”是一种“半双工”的通信模式，虽然可以双向收发数据，但同一时刻只能一个方向.
2020-05-24 12:53:35
634
原创 CDN
目录whywhat加速内容负载均衡缓存代理CDN （Content Delivery Network）内容分发网络why 地理因素：跨越大半个地球去连接服务，没有本地连接来得快 运营商网络：各个运营商之间的互联，需要跨网传输，多个用户去挤“连接点”，带宽终究是优先的，能抢到就看个人运气 路由转发：网络中存在许多路由器、网管，数据每经过一个节点，都要停顿一下，在二层、三层解析转发，这也会消耗一定的时间，带来延迟 whatCDN有三个关键词：“内容”
2020-05-24 12:51:42
261
原创 数组扁平化
文章目录toString递归reducetoStringfunction flatten(arr) { return arr.toString().split(",").map(Number);}递归function flatten(arr) { let res = []; for (let i = 0; i < arr.length; i++) { if (...
2020-04-16 00:10:21
175
原创 同源策略
文章目录什么是同源策略安全和便利性的权衡网页中可以嵌入第三方资源跨站资源共享和跨文档消息机制浏览器安全可以分为三大块：Web页面安全浏览器网络安全浏览器系统安全为什么需要保证安全：在没有安全保障的Web世界中，我们是没有隐私的，因此需要安全策略来保障我们的隐私和数据的安全页面中最基础、最核心的安全策略：“同源策略(Same-origin policy)”什么是同源策略如果两个U...
2020-04-16 00:07:05
299
1
原创 JavaScript垃圾回收机制
文章目录垃圾回收策略调用栈中的数据是如何回收的堆中的数据如何回收代际假说和分代收集代际假说副/主垃圾回收器垃圾谁后期的工作流程副垃圾会回收器Scanvenge算法主垃圾回收器标记-清除算法标记-整理全停顿增量标记算法垃圾回收策略不同的语言有不同的垃圾回收策略手动回收：C/C++何时分配内存、何时销毁内存都时由代码控制的自动回收：JavaScript、python、Java产生...
2020-04-15 01:07:02
623
原创 WebComponent简介和使用
文章目录什么是组件化阻碍前端组件化的因素webComponent组件化开发实现使用template创建模板创建一个相关的class类直接使用WebComponent能够提供开发者组件化开发的能力什么是组件化组件化没有一个明确的定义，但是一般形容就是：“高内聚，低耦合”，对内各个元素彼此紧密结合、相互依赖，对外和其他组件的联系最少且接口简单。阻碍前端组件化的因素在前端虽然HTML、CSS和...
2020-04-15 01:04:02
9240
原创 宏任务/微任务分析题进一步扩展
之前的文章大致分析了一个有关宏任务/微任务的题目，后来做了一个完整的扩展，可能不全，如果有考虑不到的，私信吧~async function foo() { console.log('foo'); return 'foo return';}async function bar() { console.log('bar start'); let res = await foo...
2020-04-13 19:10:29
169
原创 宏任务/微任务分析题
async function foo() { console.log('foo');}async function bar() { console.log('bar start'); await foo(); console.log('bar end');}console.log('script start');setTimeout(function () { con...
2020-04-13 18:54:29
470
原创 Chrome浏览器介绍
文章目录进程VS线程单进程浏览器缺点：多进程浏览器缺点进程VS线程进程中的任意一线程执行出错，都会导致整个进行的崩溃。线程之间共享进程中的数据当一个进程关闭之后，操作系统会挥手进程所占用的内存进程之间的内容是相互隔离单进程浏览器**浏览器里所有功能模块都运行在同一个进程里。**这些模块包括：网络、插件、JavaScript运行环境、渲染引擎和页面等。缺点：不稳定：一个模块出...
2020-04-10 21:14:08
1147
原创 HTTP优缺点
文章目录简单、灵活、易于扩展应用广泛、环境成熟无状态明文不安全性能简单、灵活、易于扩展**简单：**基本的报文格式就是”header+body“，头部信息也是简单的文本格式，用的也是常见的英文单词在简单的这个基本设计理念之下，HTTP协议又多出了”灵活和易于扩展“的优点。后期扩展的请求方法、URI、状态码、原因短句、头字段。。。应用广泛、环境成熟无状态优点：不需要额外的资源来记录状...
2020-04-10 21:10:32
2303
原创 HTTP历史
文章目录HTTP/0.9HTTP/1.0HTTP/1.1HTTP/2HTTP/3HTTP/0.9结构比较简单，为了便于服务器和客户端处理，采用了纯文本格式，设计者认为文档都是只读的，所以只允许用GET获取HTML文档，并且在相应请求之后立即关闭连接。纯文本GET请求短连接HTTP/1.0增加了HEAD、POST新方法增加了相应状态码引入了协议版本号引入了HTTP Head...
2020-04-10 21:08:53
130
原创 发布/订阅 VS 观察者模式
观察者模式观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生变化时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。观察者模式有一个别名叫“发布-订阅模式”，订阅者和订阅目标是联系再一起的，当订阅目标发生改变时，逐个通知订阅者。发布/订阅模式在24种基本的设计模式中并没有发布订...
2020-04-10 21:06:58
153
原创 CORS
跨站资源请求文章目录两种请求简单请求基本流程withCredentials属性非简单请求预检请求预检请求的回应与JSONP对比浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。两种请求简单请求非简单请求简单请求只包含满足如下:方法和首部字段：HEAD、GET、POSTAccept、Accept-Language、Co...
2020-04-10 21:04:09
312
原创 闭包
文章目录变量的作用域如何从外部读取局部变量？闭包注意点变量的作用域全局变量局部变量Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。var n=999;function f1(){ alert(n);}f1(); // 999当然，函数外部自然无法读取到函数内的局部变量function f1(){ var n=999;}alert...
2020-04-10 21:03:19
120
原创 原型到原型链
文章目录构造函数创建对象使用new发生了什么prototype` __proto__`constructor实例与原型原型的原型--> 原型链补充constructor`__proto__`真的有继承吗？构造函数创建对象function Person() {}var person = new Person();person.name = 'mzy';console.log(pers...
2020-04-10 21:02:17
144
原创 Vuex文档记录
文章目录一些基本概念Vue.use()statemapState辅助函数Getter访问gettermapGettersMutation需要注意点mapMutaionsActionmapActionsModule主要是自己的看文档的一些笔记，无实际大意义一些基本概念Vuex使用单一状态树，一个对象包含了全部应用层级状态。所以每个应用仅仅包含一个store实例。从store实例中读取状态...
2020-03-09 22:00:42
107
原创 slot的使用(2.6.0之后)
slot，即：插槽，在组件定义的时候想不到使用的地方会写入什么内容不知道外部需要以什么形式呈现那么，我们就可以使用slot把不确定的内容预留出来不确定的展现形式的内容拿给外部展示其他内容跟按照正常的形式书写即可一般我们使用组件的时候，里面是不会有内容的，即：<home></home>，但是我们定义了插槽，那么我们就可以将我们需要插入的地...
2020-02-29 23:25:50
214
原创 Vue组件之间的传值
文章目录使用props和emitattrs/listenerVuex我自己凭空能想到的Vuexprops\emitattrs\listeners使用props和emitprops：父节点给子节点信息// html:<div id="app"> <Father></Father></div>对应的节点信息具体代码...
2020-02-29 20:09:55
132
原创 图片懒加载实现
文章目录使用JavaScript实现使用img的属性实现使用JavaScript实现使用JavaScript实现的思想：监听用户滚动的状态，如果用户滚动的可视区域中有需要显示的图片，就需要把对应图片的src写入到img标签中，浏览器会自动加载图片并且显示。<!-- 将图片的正确链接保存到data-src中 --> <img data-src="...
2020-01-24 22:37:09
255
原创 link的rel属性的属性值小结
该文章本来是想总结写一些可以提升浏览器优化的rel属性标签，后来发现总结全部rel属性基本在一些主流浏览器没有找到，但是在总结整理资料的过程中发现张鑫旭大大已经总结过了，接下来我就挑了几个我认为面试中可能会提及用来优化浏览器性能的几个标签和一些unbelievable标签，我觉得大家可能也找不到张鑫旭大大的那篇文章，这里我贴一个链接HTML rel属性值释义大全（后来我试了谷歌，发现就在排名在...
2020-01-22 23:06:43
3261
1
原创 使用alternate stylesheet（CSS）一键换肤
使用link的rel支持的一个属性alternate stylesheet实现一键换肤功能之前写过一个直接利用JS实现换肤的可以参考下JavaScript一键换肤alternate stylesheet中文意思是：可替代的样式，不过我们用的不是很多，一般只用stylesheet就够用首先需要一个index.html、style1.css、style2.css、index.js文件Tips:...
2020-01-22 21:12:26
1563
原创 JavaScript一键换肤
场景叙述：点击某一个按钮，能够加载一个新的css文件，并且页面进行相应的更改// index.html ---->需要引入一个style1.css和index.js文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta nam...
2020-01-21 20:18:57
1562
原创 JavaScript模块化编程
文章目录CommonJSAMDCMDAMD和CMD的区别说起模块化编程，经常会听到什么CMD、AMD、CommonJS，记录一下自己的理解，虽然自己用得不是很多。CommonJSNodeJS就是参照CommonJS规范实现的// 导出module.export math = ...// 引入var math = require('math');但是存在一个问题，就是必须等模块导...
2020-01-10 16:41:57
223
原创 JavaScript递归发送多次请求
模拟使用递归链式的发送请求class sendAll { constructor(arr) { this.arr = arr; this.index = 0; this.sendAll(); } send() { return new Promise((resolve, reject) =>...
2020-01-09 22:57:28
1578
原创 数组有关面试题
如何判断一个数组是数组数组有哪些方法有哪些方法可以截取数组数组中迭代方法对于null/undefined的处理情况数组去重数组的扁平化解析概要
2020-01-09 19:53:01
173
原创 有关数组面试题解析
如何判断一个数组是数组arr instanceOf Arrayarr.constructor === ArrayObject.prototype.toString(arr) === “[object Array]”Array.isArray(arr)数组有那些方法之前总结过：JavaScript数组的有关方法截取数组arr.slice(ac,en)arr.split() /...
2020-01-09 19:51:25
143
原创 JavaScript循环总结
总结以下JavaScript中各种循环及其特点文章目录for循环forEach循环for..in循环for..of循环Object.keys()let arr = [1,null,undefined,NaN,];let obj = {name: ‘mzy’,age: 20,getName: function(){return this.name;}}for循环for循环基本在...
2020-01-09 18:52:56
251
原创 由JS的数据类型引申出来的面试题
JavaScript有哪些数据类型？es6中新增了什么数据类型，说说特点，有什么作用？对象在内存中怎么存储的？如何复制一个对象/说说深拷贝和浅拷贝？null和undefined的共同点和区别？那些情况会出现undefined？基本类型没有方法，为什么我们还是对基本类型使用.toString()、.valueOf()方法？对包装对象增加一个方法会有什么样的结果？前8题自己的一些...
2020-01-08 23:49:58
126
1
原创 JavaScript的浅拷贝和深拷贝
文章目录@[TOC]拷贝的分类浅拷贝Object.assign(target,...sources)展开运算符(...)手动实现深拷贝JSON.parse(JSON.stringify(target))手动实现上图是对象在内存中存储的情况，我们可以明显的知道obj和obj2是共享同一片地址空间的，如果对其中的任何一个进行修改，都会影响到指向同一片地址空间的其他变量。但是在很多情况下，我们需要复...
2020-01-08 23:47:53
470
1
原创 JavaScript数据类型简要分析
文章目录JavaScript有哪些数据类型？es6中新增了什么数据类型，说说特点，有什么作用？对象在内存中怎么存储的？null和undefined的共同点和区别？那些情况会出现undefined？基本类型没有方法，为什么我们还是对基本类型使用.toString()、.valueOf()方法？对包装对象增加一个方法会有什么样的结果？JavaScript有哪些数据类型？JavaScript由七种...
2020-01-08 20:26:21
213
原创 JavaScript数据存取
数据存储的位置关系到代码执行过程中数据的检索速度。JavaScript中有四种存储方式。字面量：只代表自身：string、number、boolean、object、array、function、regex、null、undefined（就是不适用new创建的实例）本地变量：使用var定义的数据存储单元数组元素对象元素每一种数据存储的位置都有不同的读写消耗，对于消耗性能的影响排序：...
2020-01-08 17:38:18
512
原创 script的加载和执行
script的加载和执行脚本的位置JavaScript代码的下载和执行是阻塞其他文件的下载的如果把script标签放到head中，那么，假设需要加载三个js文件和一个css文件，那么运行图就是，如果把script标签放到前面：我们知道HTML的渲染是从上至下的，当把所有的HTML渲染完成之后，但是在用户打开时能够看到页面时有基本的HTML内容的，只是可能暂时不能完成交互，这样是能够留...
2020-01-05 16:16:22
1331
原创 DNS协议概述
基本介绍DNS是应用层协议，基于传输层的UDP协议，端口号为53提供的基本功能有：主机到IP的映射主机别名邮件别名负载均衡其实在我们看来，DNS协议像是一个黑盒子，请求传过去对应的域名，就会返回回来域名解析出来的IP地址基本实现1.0版本因为DNS协议主要的工作是域名到IP的一个映射，所以我们现在假设一下，只有一台DNS服务器，里面包含了所有的域名到IP的...
2019-11-30 21:02:41
2337
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人