- 博客(32)
- 收藏
- 关注
RSS订阅
原创 浏览器基础（2）-跨域
跨域跨域是啥？下面是一个例子来理解同源策略为什么会有同源策略?解决跨域的常见方式JSONPCORS（Cross-origin resource sharing）跨域资源共享什么情况下需要 CORS ？简单请求预检请求（复杂请求）跨域是啥？ 因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。...
2020-04-01 20:45:09
456
原创 ES6新增系列一（模板字面量）
模板字面量基本语法多行字符串ES6 之前的权宜之计多行字符串的简单解决方法制造替换位标签化模板使用模板字面量中的原始值总结JS 的字符串相对其他语言来说功能总是有限的。为了让开发者能够解决复杂的问题， ES6的模板字面量（ template literal ）提供了创建领域专用语言（ domain-specific language ，DSL ）的语法，与 ES5 及更早版本的解决方案相比，处理内容可以更安全（领域专用语言是被设计用于特定有限目的的编程语言，与通用目的语言如 JavaScript 相
2020-08-04 21:25:44
621
原创 前端需要了解的Web安全知识
前端需要了解的Web安全知识XSS攻击XSS攻击的分类反射型 XSS存储型 XSSDOM 型 XSSXSS攻击的预防输入过滤预防存储型和反射型 XSS 攻击纯前端渲染转义 HTML预防 DOM 型 XSS 攻击CSP(Content Security Policy)CSRF攻击几种常见的攻击类型GET类型的CSRFPOST类型的CSRF链接类型的CSRFCSRF的特点防护策略Web安全的知识对于前端来说是必不可少的，本文主要讨论以下几种攻击方式: XSS攻击、CSRF攻击以及SQL 注入、DDoS 攻击、
2020-07-29 21:19:54
822
原创 算法总结-数组（剑指Offer）
算法数组总结剑指 Offer 13. 机器人的运动范围题目思路题解剑指 Offer 59 - I. 滑动窗口的最大值题目思路题解剑指 Offer 66. 构建乘积数组题目思路题解剑指 Offer 03. 数组中重复的数字题目思路题解剑指 Offer 57. 和为s的两个数字题目思路题解这是一篇关于总结剑指Offer数组相关的算法题的文章。剑指 Offer 13. 机器人的运动范围原题链接题目地上有一个m行n列的方格，从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0]
2020-07-28 17:25:36
596
原创 深入理解call、apply、bind与模拟实现
深入理解call、apply、bind与模拟实现call模拟实现apply使用场景模拟实现bind使用场景模拟实现call、apply、bind是显示绑定this的三种方式，其中bind某种程度上是用来解决this丢失的情况的。callcall() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。该方法的语法和作用与 apply() 方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而 apply() 方法接受的是一个包含多个参数的数组。call()方
2020-07-20 18:33:45
182
原创 JavaScript基础-this-丢失绑定对象
函数绑定丢失 “this”解决方案 1：包装器解决方案 2：bind便捷方法：bindAll偏函数（Partial functions）被忽略的this总结任务作为方法的绑定函数二次 bindbind 后的函数属性修复丢失了 "this" 的函数当将对象方法作为回调进行传递，例如传递给 setTimeout，这儿会存在一个常见的问题：“丢失 this”。在本篇中，我们会学习如何去解决这个问题。丢失 “this”我们已经看到了丢失 this 的例子。一旦方法被传递到与对象分开的某个地方 —— this
2020-07-10 22:15:00
848
原创 JavaScript基础-this
深入this解析关于this为什么要用thisthis到底是什么this全面解析调用位置绑定规则默认绑定隐式绑定显示绑定new绑定判断this关于thisthis关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字，被自动定义在所有函数的作用域中。为什么要用this下面我们解释一下为什么要使用thisfunction identify() { return this.name.toUpperCase();}function speak() { let gre
2020-07-10 17:34:57
287
原创 常用git操作（复习）
这里写目录标题备忘录配置工具创建仓库进行更改同步更改简单例子配合vscode使用备忘录配置工具对所有本地仓库的用户信息进行配置$ git config --global user.name "[name]"对你的commit操作设置关联的用户名$ git config --global user.email "[email address]"对你的commit操作设置关联的邮箱地址$ git config --global color.ui auto查看配置$ git config
2020-07-09 19:58:57
108
原创 JavaScript基础-Why 0.1+0.2 != 0.3
0.1 + 0.2不等于0.3？前言JavaScript中计算的翻车现场JavaScript是如何表示浮点数的？运算时发生了什么？进制转换对阶运算IEEE754标准下的舍入规则怎么解决精度问题？将数字转成整数三方库前言随着消费观念的改变，线上消费已经成为大众生活中不可或缺的一部分。在保证消费安全和用户隐私的同时，精准度也是必不可少的一环。试想一下，用户在一款产品上消费，结算金额出错，用户会怎么想？妥妥的差评了吧。 这样不要说用户粘性了，留存都是问题。当Boss得知用户的遭遇后，估计贡献代码的同志会成为前
2020-07-08 17:55:02
273
原创 #每日一题# 介绍一下JavaScript的闭包以及应用场景
JavaScript的闭包以及应用场景闭包嵌套函数词法作用域（Lexical scope）最后BOSS闭包闭包的缺点应用场景函数防抖与节流使用闭包设计单例模式为多个组件独立属性拿到正确的值（老掉牙的问题了????）模块机制闭包JavaScript 是一种非常面向函数的语言。它给了我们很大的自由度。在 JavaScript 中，我们可以动态创建函数，可以将函数作为参数传递给另一个函数，并在完全不同的代码位置进行调用。正如你不知道的JavaScript中定义的那样：当函数可以记住并访问所在的词法作用域时，就
2020-06-30 23:11:49
253
原创 #每日一题# 介绍一下JavaScript的作用域链
JavaScript的作用域链作用域词法作用域与动态作用域主要区别举例作用域链函数创建函数激活捋一捋作用域作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。作用域包括全局作用域、函数作用域、块级作用域。当作用域进行嵌套的时候，就会形成作用域链。词法作用域与动态作用域作用域共有两种主要的工作模型。第一种是最为普遍的，被大多数编程语言所采用的词法作用域。另外一种叫做动态作用域，仍然有一些语言在使用（比如bash脚本）。需要明确的是，事实上JavaScript并不具有动态作用域。它只有词法作用域
2020-06-30 12:48:36
252
原创 #每日一题# 介绍一哈JavaScript的执行上下文
JavaScript的执行上下文什么是执行上下文？执行上下文的类型执行上下文栈思考题什么是执行上下文？简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。执行上下文的类型全局执行上下文 — 这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文
2020-06-30 07:48:19
401
2
原创 #每日一题# 函数节流与函数防抖
函数节流与函数防抖什么是函数节流与函数防抖函数节流(throttle)说明函数防抖(debounce)总结什么是函数节流与函数防抖举个栗子，我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。再举个栗子，假设电梯一次只能载一人的话，10 个人要上楼的话电梯就得走 10 次，是
2020-06-24 21:53:15
159
原创 #每日一题# new操作符做了什么？如何自己实现new操作符？
new操作符做了什么？如何自己实现new操作符？new操作符做了什么？new操作符做了什么？MDN给出的定义是：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 简单的说就是用来创建一个新实例。在看《JS高级程序设计（第三版）》这本书时，P145是这样写到的。要创建Person的新实例，必须使用new操作符。以这种方式调用构造函数实际上会经历以下4个步骤：创建一个新对象；将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；执行构造函数中的代码（为
2020-06-24 13:32:04
234
转载 性能优化（3）-HTTP/2简介
HTTP/2简介SPDY 与 HTTP/2 简史设计和技术目标二进制分帧层数据流、消息和帧请求与响应复用数据流优先级每个来源一个连接流控制服务器推送PUSH_PROMISE 101标头压缩HPACK 的安全性和性能深入阅读HTTP/2 可以让我们的应用更快、更简单、更稳定 - 这几词凑到一块是很罕见的！HTTP/2 将很多以前我们在应用中针对 HTTP/1.1 想出来的“歪招儿”一笔勾销，把解决那些问题的方案内置在了传输层中。 不仅如此，它还为我们进一步优化应用和提升性能提供了全新的机会！HTTP/2
2020-06-20 21:28:30
663
原创 性能优化（4）-预加载和预渲染
预加载和预渲染预加载用例：字体用例：关键路径 CSS 和 JavaScript预渲染预提取预提取不会替换内容浏览器基于自身对资源重要性的判断，为不同类型的资源分配相应的优先级。当您发现任何资源标记的优先级不是您想要的优先级时，您能做什么？预加载<link rel="preload"> 告知浏览器当前导航需要某个资源，应尽快开始提取。 以下为相关使用示例：<link rel="preload" as="script" href="super-important.js"><
2020-05-25 12:46:46
1873
原创 性能优化（2）-浏览器缓存
浏览器缓存机制：强缓存、协商缓存概述基本原理相同点不同点强缓存ExpiresCache-Control协商缓存Last-Modified，If-Modified-SinceETag、If-None-Match几种状态码的区别如何选择合适的缓存概述良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度。通常浏览器缓存策略分为两种：强缓存和协商缓存基本原理浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。如
2020-05-23 20:48:33
346
原创 性能优化（1）-DNS预解析
DNS预解析原理如何使用打开和关闭DNS预解析自动解析手动添加解析在浏览器中设置看看淘宝的DNS预解析使用场景如何更好的使用？对哪些资源做手动prefetch域名发散和域名收敛域名发散域名收敛当用户输入URL后第一步就是DNS预解析原理域名系统 - 维基百科，自由的百科全书Domain Name System 是将域名和IP地址相互映射的一个分布式数据库DNS 预读取是一项使浏览器主动去执行域名解析的功能，其范围包括文档的所有链接，无论是图片的，CSS 的，还是 JavaScript 等其他用
2020-05-17 15:53:03
1171
原创 性能优化（7）-webpack性能优化
webpack性能优化减少 Webpack 打包时间优化 LoaderHappyPackDllPlugin代码压缩一些小的优化点减少 Webpack 打包后的文件体积按需加载Scope HoistingTree Shaking监视和分析应用程序记录bundle的大小webpack-dashboardbundlesize在这部分的内容中，我们会聚焦于以下三个知识点有哪些方式可以减少 Webpack 的打包时间有哪些方式可以让 Webpack 打出来的包更小监视和分析应用程序减少 Webpack
2020-05-14 16:27:17
613
原创 性能优化（6）-文件优化
文件优化图像优化选择正确的图像格式消除和替换图像提供缩放的图像资产图像精灵延迟加载非关键图像延迟加载为何有用？缓存图像资产预加载关键图像资产高效压缩图像使用服务器与 CDNCloudinary 和 Imgix需要了解的基本信息是什么？接下来介绍图像处理默认情况下会发生什么？性能如何？两种服务的比较结果如何？结论CDN图像优化图像通常占据了网页上下载字节的大部分，通常也占据了大量的视觉空间。 因此，优化图像通常可以最大限度地减少从网站下载的字节数以及提高网站性能：浏览器需要下载的字节越少，占用客户端的带宽
2020-05-13 17:04:35
715
原创 性能优化（5）-懒执行
懒执行场景描述通用方案场景描述简单来说，懒执行（Lazy Execution）就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒。通用方案某一业务功能如果被设置了懒执行，则需要满足特定条件后该功能才会被初始化（唤醒）。因此，从触发（唤醒）方式上来看，懒执行的通用方案可以大致上分为两个思路：自动唤醒和手动唤醒自动唤醒自动唤醒的核心思想是轮询，实现方法则是依靠 setInte
2020-05-12 12:47:03
828
原创 性能优化（5）-如何推迟、延迟加载和与交叉观察者一起行动
用IntersectionObserver实现Lazy-Load什么是延迟加载（Lazy-Load）？为何要延迟加载图像或视频，而不是直接加载？IntersectionObserver API的引入Observer Vs. Event（观察者 Vs 事件）通用观察者的结构IntersectionObserver API什么是交叉观察者。交叉观察者初始化交叉观察者回调一些应用什么是延迟加载（Lazy-Load）？在网站典型负载中，图像和视频是非常重要的一部分内容。 不过遗憾的是，项目干系人并不愿意从其现有
2020-05-10 14:09:13
600
原创 浏览器基础（5）-重绘（Repaint）和回流（Reflow）的那些猫腻
重绘（Repaint）和回流（Reflow）浏览器的渲染过程回流 (Reflow)重绘 (Repaint)浏览器的优化机制减少回流和重绘最小化重绘和重排多次修改DOM避免触发同步布局事件css3硬件加速（GPU加速）css3硬件加速的坑减少回流和重绘总结浏览器的渲染过程在讲重绘（Repaint）和回流（Reflow）之间我们先来看一看渲染相关的有些知识，有助于我们理解。从上面这个图上，我们...
2020-04-28 17:00:34
671
原创 浏览器基础（5）-谈谈层合成（Composite）
谈谈层合成（Composite）Web页面的大致渲染过程什么是Composite？从Node节点到RenderObject从RenderObject到RenderLayer从RenderLayer到GraphicsLayerComposite隐式合成Web页面的大致渲染过程浏览器对于一个Web页面的展示大致可以认为经历了以下几个步骤。JavaScript：一般来说，我们会使用 JavaS...
2020-04-23 13:14:48
2451
原创 浏览器基础（5）-DOMContentLoaded与Load详解
DOMContentLoaded与Load详解DOMContentLoaded与LoadDOMContentLoaded与Load首先我们先直观感受一哈什么是DOMContentLoaded与Load。打开Chrome DevTools，切换到Network面板，按F5刷新一哈页面，得到如下截图：...
2020-04-20 17:00:21
2378
原创 浏览器基础（4）-存储的前身后世
storagecookie，localStorage，sessionStorage，indexDBCookie创建CookieCookie的Secure 和HttpOnly 标记Cookie的作用域SameSite CookiesJavaScript通过Document.cookie访问Cookie基于cookie的登陆验证与退出localStorage 和 sessionStorageindex...
2020-04-10 19:11:16
299
原创 浏览器基础（2）Node 中的事件循环
Node.js 事件循环，定时器和 process.nextTick什么是事件轮询事件轮询机制解析阶段概述阶段的详细概述定时器待定回调轮询检查阶段关闭的回调函数setImmediate() 对比 setTimeout()process.nextTick()process.nextTick() 对比 setImmediate()为什么要使用 process.nextTick()什么是事件轮询事件...
2020-04-09 17:48:41
431
原创 浏览器基础（3）-浏览器中的 Event Loop
浏览器中的 Event LoopJavaScript到底是什么？JavaScript调用（执行）栈我们调试代码中也可以看到调用（执行）栈的身影你也许听过内存泄露，ok!。让我们看一个例子。阻塞浏览器中的 Event Loop微任务与宏任务的区别Event loopJavaScript到底是什么？JavaScript是一个单线程、非阻塞、异步、解释性脚本语言。单线程的运行环境，使的它有且只有一个...
2020-04-04 22:41:20
430
原创 浏览器基础（3）-javascript 执行栈
javascript 执行栈执行栈执行栈可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。当开始执行 JS 代码时，首先会执行一个 main 函数，然后执行我们的代码。根据先进后出的原则，后执行的函数会先弹出栈，在图中我们也可以发现，foo 函数后执行，当执行完毕后就从栈中弹出了。平时在开发中，大家也可以在报错中找到执行栈的痕迹function foo() { thr...
2020-04-03 11:07:04
225
原创 事件机制（问题解答）
问题列表是不是所有事件都会有冒泡阶段？捕获阶段有什么用？在有些情况下我们并不希望捕获和冒泡阶段中当前事件的进一步传播，那么如何阻止捕获和冒泡？如何注销一个事件？比如像a标签，当你点击后会有一个默认行为，那么我们怎么取消默认事件？第一个问题：是不是所有事件都会有冒泡阶段？答：并不是所有事件都会有冒泡阶段，请参考https://developer.mozilla.org/zh-CN/...
2020-03-31 10:57:55
161
原创 浏览器基础（1）-事件机制
事件机制事件触发三阶段捕获阶段目标阶段冒泡阶段事件触发三阶段告一段落，我们来思考以下问题：事件的注册addEventListener接下来我们看一个例子事件的注册就告一段落，我们来思考以下问题：事件代理例子事件代理的优点事件机制就告一段落，对于文中的问题会在相对于的问题解答文章中给出。如有错误，希望大家指正，下次见。事件触发三阶段 事件触发三个阶段...
2020-03-30 21:42:52
718
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人