- 博客(183)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 浏览器中的JavaScript执行机制（五）this：从JavaScript执行上下文视角讲this
当函数作为对象的方法调用时，函数中的 this 就是该对象； 当函数被正常调用时，在严格模式下，this 值是 undefined，非严格模式下 this 指向的是全局对象 window； 嵌套函数中的 this 不会继承外层函数的 this 值。 最后，我们还提了一下箭头函数，因为箭头函数没有自己的执行上下文，所以箭头函数的 this 就是它外层函数的 this。这是我们“JavaScript 执行机制”模块的最后一节了，五节下来，你应该已经发现我们将近一半的时间都是在谈 JavaScript 的各种
2022-03-16 14:31:07
213
原创 你有想过如何合适地给 JavaScript 变量命名吗？
在开发过程中，遵循标准的命名约定可以提高代码的可读性。下面就来看看 JavaScript 中命名约定的最佳实践。
2022-03-15 10:43:35
1429
原创 从零开始深入理解 ESLint 核心原理
概述本文将介绍 ESLint 的工作原理，内容涉及 ESLint 如何读取配置、加载配置，检验，修复的全流程。为什么需要 ESLintESLint 相信大家都不陌生，如今前端工作越来越复杂，一个项目往往是多人参与开发，虽然说每个人的代码风格都不一样，但是如果我们完全不做任何约束，允许开发人员任意发挥，随着项目规模慢慢变大，很快项目代码将会成为不堪入目的💩山，因此对于代码的一些基本写法还是需要有个约定，并且当代码中出现与约定相悖的写法时需要给出提醒，对于一些简单的约定最好还能帮我们自动修复，而这正
2022-03-15 10:39:12
2186
原创 浏览器中的JavaScript执行机制（四）：作用域链和闭包：代码中出现相同的变量，JavaScript引擎如何选择
作用域链和闭包：代码中出现相同的变量，JavaScript引擎如何选择理解作用域链是理解闭包的基础，而闭包在 JavaScript 中几乎无处不在，同时作用域和作用域链还是所有编程语言的基础。所以，如果你想学透一门语言，作用域和作用域链一定是绕不开的那今天我们就来聊聊什么是作用域链，并通过作用域链再来讲讲什么是闭包。首先我们来看下面这段代码：function bar() { console.log(myName)}function foo() { var myName
2022-03-11 23:44:03
150
原创 浏览器中的JavaScript执行机制（三）：块级作用域：var缺陷以及为什么要引入let和const
块级作用域：var缺陷以及为什么要引入let和const在前面《07 | 变量提升：JavaScript代码是按顺序执行的吗？》这篇文章中，我们已经讲解了JavaScript中变量提升的相关内容，正是由于JavaScript存在变量提升这种特性，从而导致了很多与直觉不符的代码，这也是JavaScript的一个重要设计缺陷虽然ECMAScript6（以下简称ES6）已经通过引入块级作用域并配合let、const关键字，来避开了这种设计缺陷，但是由于JavaScript需要保持向下兼容，所以变量提升在相
2022-03-11 23:42:02
711
原创 浏览器中的JavaScript执行机制（二）：调用栈：为什么JavaScript代码会出现栈溢出
调用栈：为什么JavaScript代码会出现栈溢出在上篇文章中，我们讲到了，当一段代码被执行时，JavaScript引擎先会对其进行编译，并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范那么接下来我们就来明确下，哪些情况下代码才算是“一段”代码，才会在执行之前就进行编译并创建执行上下文。一般说来，有这么三种情况当JavaScript执行全局代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。 当调用一个函数的时候，函数体内的代码会
2022-03-11 23:40:27
742
原创 浏览器中的JavaScript执行机制（一）：变量提升：JavaScript代码是按顺序执行的吗？
讲解完宏观视角下的浏览器后，从这篇文章开始，我们就进入下一个新的模块了，这里我会对JavaScript执行原理做深入介绍。今天在该模块的第一篇文章，我们主要讲解执行上下文相关的内容。那为什么先讲执行上下文呢？它这么重要吗？可以这么说，只有理解了JavaScrip的执行上下文，你才能更好地理解JavaScript语言本身，比如变量提升、作用域和闭包等。不仅如此，理解执行上下文和调用栈的概念还能助你成为一名更合格的前端开发者。
2022-03-11 23:37:05
280
原创 浏览器第六节：渲染流程（下）：HTML、CSS和JavaScript是如何变成页面的
在上篇文章中，我们介绍了渲染流水线中的DOM生成、样式计算和布局三个阶段，那今天我们接着讲解渲染流水线后面的阶段。这里还是先简单回顾下上节前三个阶段的主要内容：在HTML页面内容被提交给渲染引擎之后，渲染引擎首先将HTML解析为浏览器可以理解的DOM；然后根据CSS样式表，计算出DOM树所有节点的样式；接着又计算每个元素的几何坐标位置，并将这些信息保存在布局树中
2022-03-07 19:29:24
595
原创 浏览器第五节：渲染流程（上）：HTML、CSS和JavaScript是如何变成页面的
在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用JavaScript优化动画流程，通过优化样式表来防止强制同步布局，等等。
2022-03-07 19:27:26
267
原创 浏览器第四节：导航流程：从输入URL到页面展示这中间发生了什么
导航流程：从输入URL到页面展示这中间发生了什么“在浏览器里，从输入URL到页面展示，这中间发生了什么？ ”这是一道经典的面试题，能比较全面地考察应聘者知识的掌握程度，其中涉及到了网络、操作系统、Web等一系列的知识。所以我在面试应聘者时也必问这道题，但遗憾的是大多数人只能回答其中部分零散的知识点，并不能将这些知识点串联成线，无法系统而又全面地回答这个问题。那么今天我们就一起来探索下这个流程，下图是我梳理出的“从输入URL到页面展示完整流程示意图”：从图中可以看出，整个过程需要各个进程之间的
2022-03-03 20:53:54
746
原创 浏览器第三节：HTTP请求流程：为什么很多站点第二次打开速度会很快
HTTP请求流程：为什么很多站点第二次打开速度会很快一个TCP连接过程包括了建立连接、传输数据和断开连接三个阶段。而HTTP协议，正是建立在TCP连接基础之上的。HTTP是一种允许浏览器向服务器获取资源的协议，是Web的基础，通常由浏览器发起请求，用来获取不同类型的文件，例如HTML文件、CSS文件、JavaScript文件、图片、视频等。此外，HTTP也是浏览器使用最广的协议，所以要想学好浏览器，就要先深入了解HTTP。不知道你是否有过下面这些疑问：为什么通常在第一次访问一个站点时，打开速
2022-03-03 19:22:12
991
原创 浏览器第二节：TCP协议：如何保证页面文件能被完整送达浏览器
TCP协议：如何保证页面文件能被完整送达浏览器在衡量Web页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的PV、更高的参与度，以及更高的转化率。那什么影响FP指标呢？其中一个重要的因素是网络加载速度要想优化Web页面的加载速度，你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，不管你是使用HTTP，还是使用WebSocket，它们都是基于TCP/IP的，如果你对这些原
2022-03-02 19:18:00
2285
原创 浏览器第一节：Chrome架构：仅仅打开了1个页面，为什么有4个进程
Chrome架构：仅仅打开了1个页面，为什么有4个进程在开始之前，我们一起看下，Chrome打开一个页面需要启动多少进程？你可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”，这将打开Chrome的任务管理器的窗口，如下图和Windows任务管理器一样，Chrome任务管理器也是用来展示运行中Chrome使用的进程信息的。从图中可以看到，Chrome启动了4个进程，你也许会好奇，只是打开了1个页面，为什么要启动这么多进程呢？在解答这个问题之前，我们需要
2022-03-02 17:54:36
1119
原创 视频传输原理解码
视频传输原理视频是由一幅幅帧图像和一组音频构成的，视频的播放过程可以简单理解为一帧帧的画面按照时间顺序呈现出来的过程。但是在实际应用中，并不是每一帧都是完整的画面，因为如果每一帧画面都是完整的图片，那么一个视频的体积就会很大。这样对于网络传输或者视频数据存储来说成本太高，所以通常会对视频流中的一部分画面进行压缩（编码）处理。编码器将多张图像进行编码后生产成一段一段的GOP ( Group of Pictures )如下图，解码器在播放时则是读取一段一段的GOP进行解码后读取画面再渲染显示。...
2022-01-24 20:15:20
5632
原创 TS：接口VS类型别名
在接触 ts 相关代码的过程中，总能看到 interface 和 type 的身影。写代码感觉谁像是一堆亲兄弟，相同的功能用哪一个都可以实现。但最近总看到他们，就想深入的了解一下他们。1.interface：接口TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 而接口的作用就是为这些类型命名和为你的代码或第三方代码定义数据模型。interface ConfigValue { label: string;}function print(labelledObj: Co
2022-01-24 14:26:59
626
1
原创 WEB 性能优化：对关键请求进行排序
构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被请求的？内容概览： 什么是资产优先级？ Chrome 如何安排资源优先级？ 什么样的请求是关键的？ Lighthouse 审计：避免关键请求的依赖链。 技术：控制请求优先级。 技术：图片懒加载。 技术：font-display 关
2021-12-22 19:38:38
944
原创 小程序发展史与小程序的原理技术
小程序拥有接近原生 App 的体验。小程序并不是真正的“无需下载”，只是小程序的体积很小，在当今高速的网络环境下能够快速下载，用户感知不到，更确切的来说是“无感下载”。基于移动端布局的局限性，可以高效且简单的开发，迭代快速。小程序是双线程模型，逻辑层和渲染层分别运行在不同的线程中，通过 JSBridge 进行通信。在小程序里有实现专门的 JSBridge 来实现 JS 和 Native 的双向调用。wxml 文件通过 wcc 编译：wxml => JS => VirtualDOM。
2021-12-14 15:54:53
2623
原创 vite的底层原理一篇整的明明白白
工作原理：type="module"浏览器中ES Module原生native支持。 如果浏览器支持type="module"，我i们可以使用es6模块化的方式编写。浏览器会把我们需要导入的文件再发一次http请求，再发到服务器上。 开发阶段不需要打包 第三方依赖预打包 启动一个开发服务器处理资源请求一图详解vite原理：浏览器做的什么事啊宿主文件index.html<script type="module" src="/src/main.js"></s...
2021-12-07 10:47:11
1081
原创 package.json的奇淫巧技你知道吗？
今天来看看前端的大管家 package.json 文件相关的配置，充分了解这些配置有助于我们提高开发的效率，规范我们的项目。文章内容较多，建议先收藏在学习！在每个前端项目中，都有 package.json 文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。package.json 文件是一个 JSON 对象，该对象的每一个成员就是当前项目的一项设置。package.json 作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。当我们搭建一
2021-11-30 20:08:38
1358
2
原创 Webpake 5 核心打包原理
写在前边Webpack在前端前端构建工具中可以堪称中流砥柱般的存在，日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。也许对于它的内部实现机制你也许会感到疑惑，日常工作中基于Webpack Plugin/Loader之类查阅API仍然不明白各个参数的含义和应用方式。其实这一切原因本质上都是基于Webpack工作流没有一个清晰的认知导致了所谓的“面对API无从下手”开发。文章中我们会从如何实现模块分析项目打包的角度出发，使用最通俗，最简洁，最明了的代码带你揭开Webpac
2021-11-29 14:43:05
382
原创 react-useMemo/useCallback/memo使用
react提供useMemo/useCallback/memo方法，提高页面刷新效率。若组件依赖的属性没有发送变化，组件可以不刷新。以下提供两个场景的具体使用单组件内使用使用语法import React, { useMemo } from 'react'useMemo(() => {}, [] ) 1.useMemo第一个参数是函数，第二个参数是数组 2.如果第二个参数不传递，与useEffect类似，意味着每次都会执行第一个函数参数，则使用useMem就毫无意义 3.如果第
2021-11-12 17:24:38
1830
原创 await与async的爱恨情仇
我们使用异步函数，都是async/await一起用的，但是这回我准备拆开看，分别介绍async和await有什么用。async作用通常情况下使用async命令是因为函数内部有await命令，因为await命令只能出现在async函数里面，否则会报语法，这就是为什么async/await成对出现的原因，但是如果对一个普通函数单独加个async会是什么结果呢？来看个例子:async function test () { let a = 2 return a}const res =
2021-10-29 11:42:36
477
原创 TS学习 上W字，看完即精通
前言这篇文章前前后后写了几个月,之前总是零零散散的学习,然后断断续续的写文章(懒),自己参考了很多文章以及看了一些ts视频,然后把基础的知识点全部总结了一下.自我感觉比掘金上的所有typescript入门的热门文章都要详细 哈哈,因为那些热门文章我全部都参考了,内容基本都包含了.这一次一定得沉淀下来。好好的把这篇文章给写完.本来自己以前是不喜欢ts的,因为它有一定的学习成本,代码量增加,代码复杂度增加等.后来慢慢觉得，ts的静态检查使得开发者提前发现错误，在前端工程化开发的今天确实有必要，因为团队成
2021-10-25 15:36:25
662
原创 尤雨溪几年前开发的“玩具 vite”，才100多行代码，却十分有助于理解 vite 原理
1. 前言大家好，我是狗蛋。欢迎关注我的优加实习，大家一起交流学习，共同进步。在vuejs组织下，找到了尤雨溪几年前写的“玩具 vite”vue-dev-server，发现100来行代码，很值得学习。于是有了这篇文章。阅读本文，你将学到：1. 学会 vite 简单原理2. 学会使用 VSCode 调试源码3. 学会如何编译 Vue 单文件组件4. 学会如何使用 recast 生成 ast 转换文件5. 如何加载包文件6. 等等复制代码2. vue-dev-...
2021-10-25 15:28:53
709
原创 编译型语言和解释型语言的区别
我们编写的源代码是人类语言，我们自己能够轻松理解；但是对于计算机硬件（CPU），源代码就是天书，根本无法执行，计算机只能识别某些特定的二进制指令，在程序真正运行之前必须将源代码转换成二进制指令。所谓的二进制指令，也就是机器码，是 CPU 能够识别的硬件层面的“代码”，简陋的硬件（比如古老的单片机）只能使用几十个指令，强大的硬件（PC 和智能手机）能使用成百上千个指令。然而，究竟在什么时候将源代码转换成二进制指令呢？不同的编程语言有不同的规定：有的编程语言要求必须提前将所有源代码一次性转换成二进制..
2021-09-17 21:11:30
339
原创 代码格式化工具：具体访问：
前端代码格式化实践 eslint + prettier：优加实习需求背景多人合作开发需要对代码格式进行规范，为了方便和统一我们可以借助前端代码格式化工具，可以借助eslint来规定代码规范，prettier进行代码格式化。实践（vue项目）vscode配置setting.json文件,写入下面规则，在保存代码时自动格式化代码 { "editor.formatOnSave": true } 复制代码安装相关依赖（具体用处之后补充）npm i eslint es
2021-09-15 14:21:59
317
原创 代码规范工具ESlint你必须知道！
什么是 ESLint ？ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：ESLint 使用 Espree 解析 JavaScript。 ESLint 使用 AST 去分析代码中的模式 ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。以上来自官网。不想再说下去，反正就是一个代码风格检测工具就对了如何
2021-09-15 14:15:53
651
原创 React&&Vue 怎么正确使用Key
在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！循环子组件忘记加key了～出于方便，有时候会不假思索的使用循环的索引作为key，但是这样真的好吗？什么样的值才是key的最佳选择？为了弄明白，本文将从三个方面来分析"key"：1.为什么要使用key2.使用index做key存在的问题3.正确的选择key1.为什么要使用keyreact官方文档是这样描述key的：Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发...
2021-09-15 10:56:32
200
原创 TypeScripe中那些奇奇怪怪的符号？！？？
TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。本文阿宝哥将分享这些年在学习 TypeScript 过程中，遇到的 10 大 “奇怪” 的符号。其中有一些符号，阿宝哥第一次见的时候也觉得 “一脸懵逼”，希望本文对学习 TypeScript 的小伙伴能有一些帮助。好的，下面我们来开始介绍第一个符号 ——! 非空断言操作符。一、! 非空断言操作符在上下文中当类型检查器无法断定类..
2021-08-10 21:51:34
501
原创 Git教程详细版
0x00 写在前面现在大部分的开发团队都以 Git 作为自己的版本控制工具，需要对 Git 的使用非常的熟悉。这篇文章中本人整理了自己在开发过程中经常使用到的 Git 命令，方便在偶尔忘记时速查。使用 GUI 工具的同学，也可以对照起来看看。0x01 Git 配置1. 在安装完成 Git 后，开始正式使用前，是需要有一些全局设置的，如用户名、邮箱。设置的主要命令是git config:git config --global user.name "your name" .
2021-07-28 17:53:01
29774
6
原创 Git命令总结（进阶版）
小编来公司一个月，发现在外边学到的git命令都太基础，很多比较常用且不好查的我又总结了一遍！常用Git命令清单一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。名次解释下面是我整理的常用 Git 命令清单。几个专用名词的译名如下: Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或本地仓库） Remote：远程仓库一、新建代码库#在当前目录新建一个Git代码库$giti...
2021-07-28 16:59:11
313
原创 三.Typescript之接口
接口介绍TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。接口初探下面通过一个简单示例来观察接口是如何工作的：function printLabel(labelledObj: { label: string }) { console.log(labelledObj.label);}let myObj = { size: .
2021-07-09 11:14:03
224
原创 三.React之组件 & Props
组件 & Props组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。本指南旨在介绍组件的相关理念。你可以参考详细组件 API。组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。函数组件与 class 组件定义组件最简单的方式就是编写 JavaScript 函数：function Welcome(props) { return <h1>Hello, {
2021-07-08 17:00:15
280
原创 一.React之 JSX简介
为什么使用 JSX？React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。我们将在后面章节中深入学习组件。如果你还没有适应在 JS 中使用标记语言，这个会议讨论应该可以说服你。React不强制要求使用 JSX，但是大多数人发现，在.
2021-07-08 16:33:07
282
原创 二.Typescript 变量声明
变量声明let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的，let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。const是对let的一个增强，它能阻止对一个变量再次赋值。因为TypeScript是JavaScript的超集，所以它本身就支持let和const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替var。如果你之前使用JavaScript时没有特别在意，那么这节内容会唤起你的回忆。 ...
2021-07-08 10:37:02
285
原创 一.TypeScript基础类型
基础类型介绍为了让程序有价值，我们需要能够处理最简单的数据单元：数字，字符串，结构体，布尔值等。 TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做boolean（其它语言中也一样）。let isDone: boolean = false;数字和JavaScript一样，TypeScript里的所有数字都是浮点数。
2021-07-07 20:44:30
152
4
原创 Python算法入门4～7
1.有四个数字：1、2、3、4，能组成多少个互不相同且无重复数字的三位数？各是多少？解题思路：其实如果算个数，就很简单，以排列组合位解题突破口，但是居然要输出？听到也是很是吓了一跳？感觉要遍历？啊这？...
2021-07-05 01:01:28
566
前端面试宝典V3.0.docx
2021-03-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人