2021年09月_乐夫天命兮

原创寻找两个正序数组的中位数

给定两个大小分别为 m 和 n 的正序（从小到大）数组 nums1 和 nums2。请你找出并返回这两个正序数组的中位数。示例 1：输入：nums1 = [1,3], nums2 = [2]输出：2.00000解释：合并数组 = [1,2,3] ，中位数 2示例 2：输入：nums1 = [1,2], nums2 = [3,4]输出：2.50000解释：合并数组 = [1,2,3,4] ，中位数 (2 + 3) / 2 = 2.5示例 3：输入：nums1 = [0,0],

2021-09-16 14:28:37 68

原创无重复字符的最长子串

给定一个字符串 s ，请你找出其中不含有重复字符的最长子串的长度。示例 1:输入: s = “abcabcbb”输出: 3解释: 因为无重复字符的最长子串是 “abc”，所以其长度为 3。示例 2:输入: s = “bbbbb”输出: 1解释: 因为无重复字符的最长子串是 “b”，所以其长度为 1。示例 3:输入: s = “pwwkew”输出: 3解释: 因为无重复字符的最长子串是 “wke”，所以其长度为 3。请注意，你的答案必须是子串的长度，“pwke” 是

2021-09-15 10:41:49 62

原创多年前三月随感

偶然间翻出自己大学时期写的一些内心活动，挺好的，所思所想记下来。今天是乙未年己卯月乙巳日羊年的第89天，离今年的结束还有276天。今年特别的想家，多少年的情感在这一瞬迸发。离家十年读书的时间一晃就真的十年了。古人有十年寒窗苦读，只为一朝金榜题名。想我如今已经将近读了16年的书，可依旧是一事无成。想这一路走来的确坎坷。少年多病多灾，好在有个严厉要求我的母亲和永远把我的学业放在第一位的老爸。小时候特想过现在的日子，没有作业，没有考试，没有父母的逼迫。于是在15岁的时候就做了一个很蠢的决定.

2021-09-13 15:26:20 168 2

原创 JavaScript BOM的介绍

JavaScript的组成JavaScript基础分为三个部分：ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。什么是BOMBOM：Browser Object Model，浏览器对象模型。BOM的结构图：从上图也可以看出：window对象是BOM的顶层(

2021-09-13 09:55:56 246

原创 JavaScript原型对象

原型的引入 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function () { console.log("我是" + this.name);

2021-09-13 09:52:40 92

原创 JavaScript事件委托

事件委托事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素。比如说有一个列表 ul，列表之中有大量的列表项 <a>标签：<ul id="parent-list"> <li><a href="javascript:;" class="my_link">超链接一</a></li> <li><a href="javascript:;" class="my_

2021-09-10 14:23:35 108 1

原创 JavaScript事件的传播和事件冒泡

DOM事件流事件传播的三个阶段是：事件捕获、事件冒泡和目标。事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。如下图所示：PS：这个概念类似于 Android 里的 touch 事

2021-09-10 14:20:37 338 1

原创 JavaScript浅拷贝和深拷贝

概念浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。深拷贝：拷贝多层数据；每一层级别的数据都会拷贝。总结：拷贝引用的时候，是属于传址，而非传值。关于传值和传址的区别，是很基础的内容，详见《JavaScript 基础/对象简介.md》这篇文章。深拷贝会把对象里所有的数据重新复制到新的内存空间，是最彻底的拷贝。浅拷贝的实现方式用 for in 实现浅拷贝（比较繁琐）const obj1 = { name: 'qianguyihao', age: 28,

2021-09-10 14:15:16 62

原创 JavaScript作用域和变量提升

作用域（Scope）的概念概念：通俗来讲，作用域是一个变量或函数的作用范围。作用域在函数定义时，就已经确定了。目的：为了提高程序的可靠性，同时减少命名冲突。作用域的分类在 JS 中，一共有两种作用域：（ES6 之前）全局作用域：作用于整个 script 标签内部，或者作用域一个独立的 JS 文件。函数作用域（局部作用域）：作用于函数内的代码环境。作用域的访问关系在内部作用域中可以访问到外部作用域的变量，在外部作用域中无法访问到内部作用域的变量。代码举例：var a

2021-09-10 14:12:16 170 1

原创 JavaScript变量的数据类型：基本数据类型和引用数据类型

变量的数据类型为什么需要数据类型在计算机中，不同的数据所需占用的存储空间不同，为了充分利用存储空间，于是定义了不同的数据类型。而且，不同的数据类型，寓意也不同。我们都知道，无论这个变量是字符串类型，还是数字类型，我们都可以直接用 var 去定义它。比如：var a = 'hello word';var b = 123;为什么可以这样做呢？这是因为：JavaScript 是一种「弱类型语言」，或者说是一种「动态语言」，这意味着不需要提前声明变量的类型，在程序运行过程中，类型会自动被确定。JS

2021-09-10 09:54:39 148

原创 JavaScript简介

JavaScript背景Web前端有三层：HTML：从语义的角度，描述页面结构CSS：从审美的角度，描述样式（美化页面）JavaScript：从交互的角度，描述行为（实现业务逻辑和页面控制）发展历史JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，

2021-09-10 09:52:06 1041

原创 VS Code的使用

前言文章标题：《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容，更新于 2020-06-19。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。本文的最新内容，也会在GitHub上同步更新，欢迎 star。VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网青年正在使用它。前端男神尤雨溪大大这样评价 VS Code：有一点你可能会感到惊讶：VS Code 这款软件本身，是用 JavaScript 语言编写的

2021-09-09 09:59:39 6304 1

原创 call、apply、bind的区别

call()和apply()介绍这两个方法都是函数对象的方法，需要通过函数对象来调用。当函数调用call()和apply()时，函数都会立即执行。都可以用来改变函数的this对象的指向。第一个参数都是this要指向的对象（函数执行时，this将指向这个对象），后续参数用来传实参。显式绑定thisJS提供的绝大多数函数以及我们自己创建的所有函数，都可以使用call 和apply方法。它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象，因此我们称之为显式绑定。例1

2021-09-09 09:56:16 52

原创作用域和闭包

前言面试问题：说一下对变量提升的理解说明this的几种不同的使用场景创建10个<a>标签，点击的时候弹出来对应的序号如何理解作用域实际开发中闭包的应用涉及到的知识点：执行上下文this作用域作用域链闭包执行上下文执行上下文主要有两种情况：全局代码：一段<script>标签里，有一个全局的执行上下文。所做的事情是：变量定义、函数声明函数代码：每个函数里有一个上下文。所做的事情是：变量定义、函数声明

2021-09-09 09:55:21 172

原创 var、let、const的区别

var、let、const 的区别1、var 声明的变量会挂载在 window 对象上，而 let 和 const 声明的变量不会举例：var a = '我是a';console.log(a); // 打印结果：我是aconsole.log(window.a); // 打印结果：我是alet b = '我是b';console.log(b); // 打印结果：我是bconsole.log(window.b); // 打印结果：undefinedlet c = '我是c';consol

2021-09-09 09:53:59 362 2

原创页面渲染性能优化

浏览器渲染过程浏览器解析 HTML，生成 DOM Tree（Parse HTML）。浏览器解析 CSS，生成 CSSOM（CSS Object Model）Tree。JavaScript 会通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree，浏览器将 DOM Tree 和 CSSOM Tree 合成渲染树（Render Tree）。布局（Layout）：根据生成的 Render Tree，进行回流，以计算每个节点的几何信息（位置、

2021-09-09 09:49:02 604 1

原创静态资源优化

图片格式和应用场景JPEG 格式JPEG（Joint Photographic Experts Group）是一种针对彩色照片而广泛使用的有损压缩图形格式，属于位图。常用文件扩展名为.jpg，也有 .jpeg和.jpe。JPEG 在互联网上常被应用于存储和传输照片。适合：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。不适合：线条图形和文字、图标图形，因为它的压缩算法不太这些类型的图形；并且不支持透明度。PNG 格式PNG（Portable Network

2021-09-09 09:48:05 721

原创浏览器渲染机制

前言渲染机制包括的内容：什么是DOCTYPE及作用浏览器渲染过程。面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲染过程。Reflow：重排。面试官问完了渲染机制，一般会紧接着问重排Reflow，你可千万别说你没听过。Repaint：重绘Layout：布局。这里的Layout指的是浏览器的Layout。什么是DOCTYPE及作用定义DTD（Document Type Definition）：文档类型定义。是一系列的语法规则，用来定义XM

2021-09-06 14:09:25 112

原创前端性能分析工具和指标

性能指标和优化目标之：加载性能指标：我们在性能优化过程中可以参考的标准。这些标准都是业界或者前人总结出来的指导性经验。我们可以参考这些指标，去指导我们自己的优化。打开网站的初体验我们以淘宝网站为例，按下F12打开浏览器的调试模式。上图中，鼠标右键点击“刷新”图标（或者鼠标长按刷新图标，松开鼠标后），会弹出三个选项，我们选择最后一个选项“清空缓存并硬性重新加载”。补充：这三个选项都是在调试模式下（按下F12弹出调试面板）才会出现的。浏览器的DevTools初印象：上图中，打开 chrome

2021-09-06 10:34:59 121

原创页面性能优化

前言提升页面性能优化的方法有哪些：1、资源压缩合并，减少http请求2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别如果回答出非核心代码异步加载，就会层层深入。3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理缓存是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。4、使用CDN浏览器第

2021-09-06 10:23:26 916

原创前端错误监控

前言错误监控包含的内容是：前端错误的分类每种错误的捕获方式上报错误的基本原理面试时，可能有两种问法：如何监测 js 错误？（开门见山的方式）如何保证产品质量？（其实问的也是错误监控）前端错误的分类包括两种：即时运行错误（代码错误）资源加载错误每种错误的捕获方式即时运行错误的捕获方式方式1：try … catch。这种方式要部署在代码中。方式2：window.onerror函数。这个函数是全局的。 window.onerror = fu

2021-09-06 10:20:36 308

原创变量、作用域与内存

JavaScript 变量可以保存两种类型的值:原始值和引用值。原始值可能是以下 6 种原始数据类型之一: Undefined、Null、Boolean、Number、String 和 Symbol。原始值和引用值有以下特点。原始值大小固定，因此保存在栈内存上。从一个变量到另一个变量复制原始值会创建该值的第二个副本。引用值是对象，存储在堆内存上。包含引用值的变量实际上只包含指向相应对象的一个指针，而不是对象本身。从一个变量到另一个变量复制引用值只会复制指针，因此结果是两

2021-09-02 16:46:41 86

原创浏览器垃圾回收

JavaScript 是使用垃圾回收的语言，也就是说执行环境负责在代码执行时管理内存。在 C 和 C++等语言中，跟踪内存使用对开发者来说是个很大的负担，也是很多问题的来源。JavaScript 为开发者卸下了这个负担，通过自动内存管理实现内存分配和闲置资源回收。基本思路很简单:确定哪个变量不会再使用，然后释放它占用的内存。这个过程是周期性的，即垃圾回收程序每隔一定时间(或者说在代码执行过程中某个预定的收集时间)就会自动运行。垃圾回收过程是一个近似且不完美的方案，因为某块内存是否还有用，属于“不

2021-09-02 16:26:58 140

乐夫天命兮的博客