- 博客(31)
- 收藏
- 关注
RSS订阅原创 用canvas实现一个简单的画板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2022-02-12 14:01:21
498
原创 serverless调研分享
serverless调研分享云计算的下一个十年serverless到底是什么? 后端架构概念 那和前端有毛关系？让我们先从后端发展史开始说起物理机时代最初搭建一个服务器过程是十分繁琐的，基本步骤如下：购买一台主机，找个机房对主机托管拍照，提交硬件信息进行备案连接电源、网线、安装操作系统、搭建代码运行环境、上传代码将域名和ip地址绑定经过以上步骤后，一台看得见摸得着的服务器算是搭建好了，是不是感觉有点麻烦，每一个环节都要确保正确无误缺点：时间久了磁盘磨损、停电、网线
2021-08-26 20:15:02
185
原创 react fiber个人理解
react fiber首先要从jsx说起，jsx是javascript的一种语言扩展，具备js的能力，且可以插入变量、进行一些运算等。看起来和html很像，需要借助Babel转换。react.createElement()方法负责接收jsx被babel转换后的参数进行解析最终返回一个虚拟domReact.render(vdom,container)方法接收一个虚拟dom对象和一个真实的DOM容器作为虚拟dom渲染完成后的挂载点，主要作用就是将虚拟dom渲染为真实的dom并挂载到容器下react f
2021-02-21 22:37:26
692
1
原创 Https加密流程理解
由于HTTP的内容在网络上实际是明文传输，并且也没有身份验证之类的安全措施，所以容易遭到挟持与攻击HTTPS是通过SSL(安全套接层)和TLS(安全传输协议)的组合使用，加密TCP载荷即HTTP报文内容，同时通过不对称密钥方式认证身份，保证传输的安全可靠即：HTTP+加密+认证+完整性保护=HTTPS对称加密与非对称加密对称加密:编/解码使用相同密钥的算法,一般是共享密钥非对称加密:非对称加密算法需要两个密钥，公开密钥（publickey:简称公钥）和私有密钥（privatekey:简称
2020-09-22 10:18:35
283
原创 从输入url到页面加载都发生了些啥？
浏览器的地址栏输入URL并按下回车。浏览器查找当前URL是否存在缓存，并比较缓存是否过期。DNS解析URL对应的IP。根据IP建立TCP连接（三次握手）。HTTP发起请求。服务器处理请求，浏览器接收HTTP响应。渲染页面，构建DOM树。关闭TCP连接（四次挥手）。下面按照整个过程的几个关键点再来展开的说一下。一、URL我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、.
2020-08-27 12:23:31
127
原创 git后悔药之如何回滚
预备知识git将项目的存储分为4部分，每部分有自己作用，见下图:Workspace：工作区（当前用户操作修改的区域）Index / Stage：暂存区 （add后的区域）Repository：仓库区或本地仓库（commit后的区域）Remote：远程仓库（push后的区域）整体过程可以简述为：工作区–>add–>暂存区–>commit–>本地仓库区–>push–>远程仓库区远程仓库区–>fetch–>使用refs\remotes下对应
2020-08-25 17:52:41
585
2
原创 ❄️记一个下雪效果
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>雪花</title> <style type="text/css"> body{ background: #000; } </style&.
2020-08-24 16:58:16
85
原创 ReferenceError和TypeError区别
ReferenceError和TypeError区别在于，ReferenceError是和作用域查找相关，TypeError是查找作用域成功，但是对变量的操作非法或者错误所生成。假如查找不到变量。LHS在非严格模式下找不到变量会自动生成全局变量，但是在严格模式会和RHS一样ReferenceError的错误。假如能查找到变量，对其进行非法或者不正确的操作都会报TypeError的错误。...
2020-08-24 14:44:36
243
原创 ajax和axios、fetch的区别
1、jQuery ajax$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。JQue
2020-08-24 11:03:46
86
原创 什么是前端模块化？
一、标准不同CommonJS 中的 require/exports 和比ES6 中的 import/export出现得早，node.js是他的实现；CommonJS 中的 require/exports 是老的标准，ES6 中的 import/export要比它更加权威。es6通过babel转化为es5执行，所以写的import/export是通过babel转换为require/exports执行的。二者其实都可以看做是输出一个对象和引入一个对象并使用其中的属性或方法。二、书写格式不同这个太简单了，不
2020-08-19 19:30:16
977
原创 分别使用css、js实现一个持续的动画效果
使用css实现一个持续的动画效果animation:mymove 5s infinite;@keyframes mymove {from {top:0px;}to {top:200px;}}主要考： animation 用法值描述animation-name规定需要绑定到选择器的 keyframe 名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟
2020-08-18 18:38:32
450
原创 手写bind
Function.prototype.mybind = function() { var func = this; //指向调用mybind的那个对象 var args = arguments || []; var context = args[0]; //新的上下文 var thisArgs = Array.prototype.slice.call(args, 1); //除了上下文，剩下的参数 var returnFunc = functio
2020-07-27 10:48:37
72
原创 MutationObserver监听DOM变化
MutationObserver介绍当我们想想监听某个DOM发生了更改，可以使用MutationObserver，该API被所有现代浏览器支持。构造方法MutationObserver()创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。方法disconnect() 阻止 MutationObserver 实例继续接收的通知，直到再次调用其observe()方法，该观察者对象包含的回调函数都不会再被调用。observe() 配置MutationO
2020-07-24 17:02:23
348
原创 面试知识点总结
1、js的new操作符做了哪些事情？new 操作符新建了一个空对象，这个对象原型指向构造函数的prototype，然后执行构造函数返回这个对象。
2020-07-21 14:25:13
870
原创 防抖与节流
防抖与节流一、防抖一、节流二者区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。一、防抖原理：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。
2020-07-06 11:44:45
101
原创 slice,splice和split的区别
slice,splice和split的区别一、slice二、splice三、split一、slice对数组进行部分截取，并且返回一个新的数组，不改变原来的数组 var a = [1,2,3,4,5,6]; var b = a.slice(0,3); //[1,2,3]从坐标为0的数开始截取到坐标为3的数字之间的数字 var c = a.slice(3) //[4,5,6]当只有一个参数的时候，就代表从该参数的坐标开始截取到数组末尾如果两个参数中的任何一个是负数，就用数组的
2020-06-28 14:09:05
290
原创 设计模式的六大原则
设计模式的六大原则一、开闭原则（Open-Closed-Principle）二、里氏代换原则（Liskow-Substitution-Principle）三、依赖倒置原则（dependence inversion principle）四、单一职责原则（Single-Responsibility-Principle）五、接口隔离原则（Interface-Segregation-Principle）六、迪米特法则（Law-Of-Demeter）一、开闭原则（Open-Closed-Principle）核心：
2020-06-28 11:26:53
128
原创 强缓存与协商缓存
彻底弄懂强缓存与协商缓存一、强缓存二、协商缓存在工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。缓存的优点：减少了不必要的数据传输，节省带宽减少服务器的负担，提升网站性能加快了客户端加载网页的速度用户体验友好缺点：资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话，情况会更加糟糕。所以，为了避免设置缓存错误
2020-06-09 21:48:43
241
原创 判断数据类型的方法
判断数据类型的方法一、typeof二、Object.prototype.toString.call()三、instanceof四、constructor方法一、typeoftypeof只能判断基本的数据类型，面对对象类型、null、Array返回的都是Object类型 注意：使用typeof判断function时，返回的是function。二、Object.prototype.toString.call()在javascript中，所有数据类型的父类都是Object,每一个继承Object的对象
2020-06-09 10:29:42
508
原创 web前端性能优化之CDN
web前端性能优化之CDN一、什么是CDN?二、CDN加速动机三、CDN原理四、总结一、什么是CDN?CDN (Content Delivery Network) 可直译成内容分发网络。CDN的本质仍然利用缓存技术缓存, 解决的是如何将数据快速可靠从源站传递到用户的问题。用户获取数据时，不需要直接从源站获取，通过CDN对于数据的分发，用户可以从一个较优的服务器获取数据，从而达到快速访问，并减少源站负载压力的目的。二、CDN加速动机为什么不从源站进行数据的直接交付，即让用户直接从源站获取数据呢？如果
2020-06-08 14:27:29
290
原创 Event Loop
Event Loop一、什么是堆、栈?二、宏任务、微任务二、为什么Async/Await更好？Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理一、什么是堆、栈?堆（Heap）堆是一种数据结构，是利用完全二叉树维护的一组数据，堆分为两种，一种为最大堆，一种为最小堆，将根节点最大的堆叫做最大堆或大根堆，根节点最小的堆叫做最小堆或小根堆。堆是线性数据结构，相当于一维数组，有唯一后继。如最大堆栈（S
2020-06-08 11:42:04
108
原创 async和await与promise的区别
async和await与promise的区别一、什么是Async/Await?二、区别二、为什么Async/Await更好？一、什么是Async/Await?async/await是写异步代码的新方式，以前的方法有回调函数和 Promise。async/await是基于Promise实现的，它不能用于普通的回调函数。async/await与Promise一样，是非阻塞的。async/await使得异步代码看起来像同步代码，这正是它的魔力所在。二、区别函数前面多了一个aync关键字。
2020-06-07 20:50:53
3383
原创 React JSX
React JSX一、jsx有哪些优点二、jsx是什么React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。运用于React架构中，其格式比较像是模版语言一、jsx有哪些优点JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。使用 JSX 编写模板更加简单快速。React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在
2020-06-07 20:12:12
107
原创 React Hook新特性，及Hook解决了什么？
React Hook新特性，及Hook解决了什么？一、useEffect、useLayoutEffect二、useState原理React Hook官方文档Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性一、useEffect、useLayoutEffectuseEffect接受两个参数，第一个参数是一个effcet函数并在页面渲染完成之后调用，effcet可以返回一个清除函数，第二个参数是一个数组，只有数组里的
2020-06-07 19:31:49
3283
1
原创 原型链
原型链一、为什么需要原型二、原型（prototype)三、原型的继承方式（两类5种）概念：在javascript中，每个对象都有一个指向它的原型(prototype)对象的内部链接。每个原型对象又有自己的原型，直到某个对象的原型为null为止，组成这条链的最后一环，构造函数里有一个prototype对象，只要修改了prototype对象，就会同时影响到两个实例对象一、为什么需要原型用构造函数生成实例对象，有一个缺点，无法共享属性和方法。每一个实例对象，都有自己的属性和方法的副本。这不仅无法做到数据共享
2020-06-07 19:31:23
100
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人