- 博客(49)
- 收藏
- 关注
RSS订阅原创 什么是Generator函数?
传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有一种叫做“协程”（coroutine），意思是多个线程互相协作，完成异步任务。协程有点像函数，又有点像线程，它的运行流程大致如下：第一步，协程A开始执行； 第二步，协程A执行到一半，进入暂停，执行权转移到协程B； 第三步，（一段时间后）协程B交还执行权； 第四步，协程A恢复执行；上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。举例来说，读取文件的协程写法如下：functio...
2021-09-08 17:19:02
146
原创 js时间戳的处理
js时间戳转换日期格式 yyyy-MM-dd hh:mm:ssexport const dataFormat = timeStamp => { var date = new Date(timeStamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.ge
2021-09-03 15:01:38
379
原创 什么是 CSP？
CSP（Content-Security-Policy）指的是内容安全策略，它的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截由浏览器自己来实现。通常有两种方式来开启 CSP，一种是设置 HTTP 首部中的 Content-Security-Policy，一种是设置 meta 标签的方式<meta http-equiv="Content-Security-Policy">CSP 也是解决 XSS 攻击的一个强力手段...
2021-08-31 09:51:31
6996
1
原创 JS 语法 ES7、ES8、ES9、ES10、ES11、ES12新特性
ES7（2016）1. Array.prototype.includes()[1].include(1) // true[0].include(1) // false2. 指数操作符2 ** 3 // 8ES8（2017）1. async/await2. Object.values()Object.values({a: 1, b: 2, c: 3}); // [1, 2, 3]3. Object.entries()Object.entries({a: 1,
2021-08-30 16:55:31
975
原创 浏览器渲染原理
首先解析收到的文档，根据文档定义构建一颗 DOM 树，DOM 树是由 DOM 元素及属性节点组成的； 然后对 CSS 进行解析，生成 CSSOM 规则树； 根据 DOM 树和 CSSOM 规则树构建 Render Tree。渲染树的节点被称为渲染对象，渲染对象是一个包含有颜色和大小等属性的矩形，渲染对象和 DOM 对象相对应，但这种对应关系不是一对一的，不可见的 DOM 元素不会被插入渲染树。 当渲染对象被创建并添加到树中，它们并没有位置和大小，所以当浏览器生成渲染树以后，就会根据渲染树来进行布局（也
2021-08-23 23:30:23
47
原创 JS 异步解决方案的发展历程以及优缺点。
回调函数优点：解决了同步的问题（整体任务执行时长）；缺点：回调地狱，不能用try catch捕获错误，不能return;Promise优点：解决了回调地狱的问题；缺点：无法取消Promise，错误需要通过回调函数来捕获；Generator特点：可以控制函数的执行。Async/Await优点：代码清晰，不用像Promise写一大堆then链，处理了回调地狱的问题；缺点：await将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用await会...
2021-08-23 09:55:08
120
原创 什么是 CSRF 攻击？如何防范 CSRF 攻击？
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态（cookie），绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用了 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。防护方法：同源检测，服务器检测请求来源； 使用 token 来进行验证； 设置 cookie 时设置 Samesite，限制 cookie 不能作
2021-08-20 11:45:25
566
原创 常见浏览器内核
内核Trident：IE 浏览器内核； Gecko：Firefox 浏览器内核； Presto：Opera 浏览器内核； Webkit：Safari 浏览器内核； Blink：谷歌浏览器内核，属于 Webkit 的一个分支，与 Opera 一起在研发；浏览器IE：Trident，IE 内核； Chrome：以前是 Webkit，现在是 Blink 内核； Firefox：Gecko 内核； Safari：Webkit 内核； Opera：一起是 Presto，现在是 Blink
2021-08-17 10:19:47
59
原创 写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？
vue和react都是采用 diff 算法来对比新旧虚拟节点，从而更新节点。在vue的 diff 函数交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个 key => index 的 map 映射）。如果没有找到就认为是一个新增节点。而如果没有 key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个 map 映射，另一种是遍历查找。相比而言，map 映射的速度更快。...
2021-08-17 10:16:43
98
原创 css中哪些属性可以继承?
字体系列属性font-family font-size font-weight font-style文本系列属性text-indent text-align line-hight word-spacing letter-spacing color其他cursor visibility
2021-08-17 10:14:29
73
原创 instanceof 的实现原理
while (x.__proto__) { if (x.__proto__ === y.prototype) { return true; } x.__proto__ = x.__proto__.__proto__;}if (x.__proto__ === null) { return false;}
2021-08-17 10:13:26
39
原创 React 中 setState 什么时候是同步的，什么时候是异步的？
在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。原因：在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还..
2021-08-11 13:54:52
371
原创 react 组件的生命周期
初始化阶段constructor(): 用于绑定事件，初始化 state componentWillMount()：组件将要挂载，在 render 之前调用，可以在服务端调用。 render()：用作渲染 dom； componentDidMount()：在 render 之后，而且是所有子组件都 render 之后才调用。更新阶段getDerivedStateFromProps：getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新
2021-08-10 23:51:49
53
原创 从输入URL到页面加载发生了什么
1.DNS解析2.建立tcp连接3.发送http请求4.服务器处理http请求,并发送报文5.关闭tcp连接6.浏览器解析渲染页面
2021-08-10 13:36:58
55
原创 数组扁平化处理
方案一:es6中数组扁平化处理var arr = [[1, 2, 3, [12]], [1, 3], [1, 8]]console.log(arr.flat(Infinity));方案二:序列化var arr = [[1, 2, 3, [12]], [1, 3], [1, 8],"23"]var newArr = JSON.stringify(arr).replace(/(\[|\])/g, '').split(',')console.log(newArr);...
2021-08-06 16:51:44
62
原创 js函数的私有属性和方法、静态属性和方法、实例属性和方法、原型属性和方法
function Foo(name) { let age = 25 // 私有属性 function sex() { // 私有方法 console.log('male') } this.name = name // 实例属性 this.run = function() { // 实例方法 console.log('run') }}Foo.home = 'Bei.
2021-08-06 16:05:33
484
原创 实现字符串方法 indexof
var str = "my name is ahao";var findStr = "ah";~(function () { function myFind(str) { let T = this.length; let t = str.length; let res = -1; for (let i = 0; i <= T - t; i++) { if (str === this.substr(i, t)) { res = i;.
2021-08-06 15:41:37
113
原创 如何实现字符串中大写全部变小写,小写变大写
var str = 'abcHeight'var newStr = str.replace(/[a-zA-Z]/g, (content) => { console.log(content); return content.toUpperCase() === content? content.toLowerCase():content.toUpperCase()}) console.log(newStr);
2021-08-06 11:59:23
382
原创 setTimeout、Promise、Async/Await 的区别
setTimeout:setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行；Promise:Promise本身是同步的立即执行函数，当在 executor 中执行 resolve 或者 reject 的时候，此时是异步操作，会先执行 then/catch 等，当主栈完成时，才会去调用 resolve/reject 方法中存放的方法。async:async函数返回一个Promise对象，当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再执行...
2021-08-05 11:36:06
196
原创 Vue 双向数据绑定原理
vue 通过双向数据绑定，来实现了 View 和 Model 的同步更新。vue 的双向数据绑定主要是通过数据劫持和发布订阅者模式来实现的。首先我们通过Object.defineProperty()方法来对 Model 数据各个属性添加访问器属性，以此来实现数据的劫持，因此当 Model 中的数据发生变化的时候，我们可以通过配置的 setter 和 getter 方法来实现对 View 层数据更新的通知。对于文本节点的更新，我们使用了发布订阅者模式，属性作为一个主题，我们为这个节点设置一个订...
2021-08-03 17:45:26
49
原创 什么是懒加载?如何实现懒加载?
懒加载也叫延迟加载，指的是在长网页中延迟加载图像，是一种很好优化网页性能的方式。懒加载的优点：提升用户体验，加快首屏渲染速度； 减少无效资源的加载； 防止并发加载的资源过多会阻塞 js 的加载；懒加载的原理：首先将页面上的图片的src属性设为空字符串，而图片的真实路径则设置在data-original属性中，当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域，如果图片在可视区内则将图片的src属性设置为dat...
2021-08-02 10:49:38
12983
原创 Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？
原因如下：Object.defineProperty无法低耗费的监听到数组下标的变化，导致通过数组下标添加元素，不能实时响应； Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历。如果属性值是对象，还需要深度遍历。Proxy可以劫持整个对象， 并返回一个新的对象。 Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。...
2021-08-01 22:16:29
402
原创 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化？
浏览器渲染机制浏览器采用流式布局模型（Flow Based Layout）； 浏览器会把HTML解析成DOM，把CSS解析成CSSOM,DOM和CSSOM合并就产生了渲染树（Render Tree）； 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上； 由于浏览器使用流式布局，对Render Tree的计算通常只需要遍历一次就可以完成，但table及其内部元素除外，他们可能需要多次计算，通常要花 3 倍于同等...
2021-08-01 21:58:22
149
原创 什么是BFC及其应用
BFC（Block Format Context）块级格式化上下文，是页面盒模型中的一种CSS渲染模式，相当于一个独立的容器，里面的元素和外部的元素相互不影响。创建BFC的方式有：html根元素 float浮动 绝对定位 overflow不为visible display为表格布局或者弹性布局；BFC主要的作用是：清除浮动 防止同一BFC容器中的相邻元素间的外边距重叠问题...
2021-07-30 14:53:13
91
原创 前端性能优化
页面内容方面通过文件合并、css 雪碧图、使用 base64 等方式来减少 HTTP 请求数，避免过多的请求造成等待的情况； 通过 DNS 缓存等机制来减少 DNS 的查询次数； 通过设置缓存策略，对常用不变的资源进行缓存； 通过延迟加载的方式，来减少页面首屏加载时需要请求的资源，延迟加载的资源当用户需要访问时，再去请求加载； 通过用户行为，对某些资源使用预加载的方式，来提高用户需要访问资源时的响应速度； CSS放在页面最上部，javascript放在页面最下面 减少DOM操作服务器方面
2021-07-30 14:16:33
51
原创 页面导入样式时,使用link和@import的区别
1.从属关系的区别:@import 只能导入样式表，link 还可以定义 RSS、rel 连接属性、引入网站图标等；2.加载顺序区别:加载页面时，link 标签引入的 CSS 被同时加载；@import 引入的 CSS 将在页面加载完毕后被加载；...
2021-07-30 13:46:48
57
原创 什么是webp
WebP 是谷歌开发的一种新图片格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用 webp 格式的最大优点是是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减少，这样会提高用户的体验。这是谷歌开发的一种新的图片格式。浏览器如何判断是否支持 webp 格式图片？通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp
2021-07-30 13:42:52
1744
原创 防抖和节流
目的:限制函数的执行次数.1.防抖(debounce): 通过setTimeout的方法.在一定时间间隔内,将多次触发变成一次触发.const debounce = function(fn,delay=1000){ let time = null return function(...args){ time&&clearTimeout(time) time = setTimeout(()=>{ fn(args) },delay)
2021-07-30 11:40:42
41
原创 谈谈对vue渐进式的理解
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
2021-07-29 14:56:04
1226
原创 js中的new
new的过程1.创建一个新的对象obj2.这个新对象的__proto__属性指向原函数的的prototype属性.(也就是继承原函数的原型)3.将这个新对象绑定到此函数的this.4.返回新对象,如果这个函数没有返回其他对象.// new 生成对象的过程// 1、生成新对象// 2、链接到原型// 3、绑定 this// 4、返回新对象// 参数：// 1、Con: 接收一个构造函数// 2、args：传入构造函数的参数function create(Con, ...a
2021-07-29 14:55:20
90
原创 react的优缺点
优点：它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX，代码的可读性很好 React 很容易与 Meteor，Angular 等其他框架集成 使用React，编写UI测试用例变得非常容易缺点：React 只是一个库，而不是一个完整的框架 它的库非常庞大，需要时间来理解 新手程序员可能很难理解 编码变得复杂，因为它使用内联模板和 JSX...
2021-07-27 16:55:26
719
原创 什么是react
React 是 Facebook 在 2011 年开发的前端 JavaScript 库。 它遵循基于组件的方法，有助于构建可重用的UI组件。 它用于开发复杂和交互式的 Web 和移动 UI。 尽管它仅在 2015 年开源，但有一个很大的支持社区。...
2021-07-27 16:51:43
37
原创 虚拟Dom和真实Dom的区别
Real DOM Virtual DOM 1. 更新缓慢。 1. 更新更快。 2. 可以直接更新 HTML。 2. 无法直接更新 HTML。 3. 如果元素更新，则创建新DOM 3. 如果元素更新，则更新 JSX 。 4. DOM操作代价很高。 4. DOM 操作非常简单。 5. 消耗的内存较多。 5. 很少的内存消耗。 ...
2021-07-27 16:48:58
579
原创 vue生命周期
1.什么是生命周期Vue实例从创建 -- 运行 -- 销毁 的整个过程2.vue生命周期有三个阶段创建(初始化)运行(更新)销毁3、Vue 总共给提供了 8 个钩子函数created () {} --- 最早获取 ajax 的地方mounted () {} --- 最早处理 DOM 元素的地方(获取、赋值)updated () {} --- data 数据发生改变以后，会重新渲染页面destroyed () {} --- 实例或者组件从父级上中删除、销毁
2021-07-26 16:03:56
63
原创 css3 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：margin（外边距），border（边框），padding（内边距），content（内容）默认情况下，盒子的width和height属性只是设置content（内容）的宽和高盒子真正的宽应该是：内容宽度+左右填充+左右边距+左右边框盒子真正的高应该是：内容高度+上下填充+上下边距+上下边框盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。正常盒模型正常盒模型，是指块元素box-sizing属性为cont
2021-07-07 18:34:46
180
原创 网络中使用最多的图片格式有哪些？
JPEG,GIF,PNG,最流行的是jpeg格式，可以把文件压缩到最小 在ps以jpeg格式存储时，提供11级压缩级别。推荐在线压缩网站：https://tinypng.com/
2021-07-06 18:20:32
1040
原创 空值合并操作符（??）
空值合并操作符（??）是一个逻辑操作符，当左侧的操作数为null或者undefined时，返回其右侧操作数，否则返回左侧操作数。与逻辑或操作符（||）不同，逻辑或操作符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用||来为某些变量设置默认值，可能会遇到意料之外的行为。比如为假值（例如，''或0）时。使用场景当你左侧操作数为null或undefined ，然而仍继续想取右边的值例子：const ahao = undefinded;const xiyimin =...
2021-07-06 18:05:30
289
原创 可选链操作符( ?. )
可选链操作符(?.)允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?.操作符的功能类似于.链式操作符，不同之处在于，在引用为空(nullish)(null或者undefined) 的情况下不会引起错误，该表达式短路返回值是undefined。与函数调用一起使用时，如果给定的函数不存在，则返回undefined。当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很...
2021-07-06 17:50:44
267
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人