- 博客(147)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 15 _ 消息队列和事件循环：页面是怎么“活”起来的？
好了，今天就讲到这里，下面我来总结下今天所讲的内容。如果有一些确定好的任务，可以使用一个单线程来按照顺序处理这些任务，这是第一版线程模型。要在线程执行过程中接收并处理新的任务，就需要引入循环语句和事件系统，这是第二版线程模型。如果要接收其他线程发送过来的任务，就需要引入消息队列，这是第三版线程模型。如果其他进程想要发送任务给页面主线程，那么先通过IPC把任务发送给渲染进程的IO线程，IO线程再把任务发送给页面主线程。消息队列机制并不是太灵活，为了适应效率和实时性，引入了微任务。
2024-05-23 19:45:00
415
原创 14 _ 编译器和解释器：V8是如何执行一段JavaScript代码的？
好了，今天就讲到这里，下面我来总结下今天的内容。首先我们介绍了编译器和解释器的区别。紧接着又详细分析了V8是如何执行一段JavaScript代码的：V8依据JavaScript代码生成AST和执行上下文，再基于AST生成字节码，然后通过解释器执行字节码，通过编译器来优化编译字节码。基于字节码和编译器，我们又介绍了JIT技术。最后我们延伸说明了下优化JavaScript性能的一些策略。
2024-05-22 19:30:00
421
原创 13 _ 垃圾回收：垃圾数据是如何自动回收的？
好了，今天就讲到这里，下面我们就来总结下今天的主要内容。首先我们介绍了不同语言的垃圾回收策略，然后又说明了栈中的数据是如何回收的，最后重点讲解了JavaScript中的垃圾回收器是如何工作的。从上面的分析你也能看出来，无论是垃圾回收的策略，还是处理全停顿的策略，往往都没有一个完美的解决方案，你需要花一些时间来做权衡，而这需要牺牲当前某几方面的指标来换取其他几个指标的提升。其实站在工程师的视角，我们经常需要在满足需求的前提下，权衡各个指标的得失，把系统设计得尽可能适应最核心的需求。
2024-05-21 20:15:00
362
原创 12 _ 栈空间和堆空间：数据是如何存储的？
好了，今天就讲到这里，下面我来简单总结下今天的要点。我们介绍了JavaScript中的8种数据类型，它们可以分为两大类——原始类型和引用类型。其中，原始类型的数据是存放在栈中，引用类型的数据是存放在堆中的。堆中的数据是通过引用和变量关联起来的。也就是说，JavaScript的变量是没有数据类型的，值才有数据类型，变量可以随时持有任何类型的数据。然后我们分析了，在JavaScript中将一个原始类型的变量a赋值给b，那么a和b会相互独立、互不影响；
2024-05-21 08:15:00
671
原创 11 _ this：从JavaScript执行上下文的视角讲清楚this
好了，今天就到这里，下面我们来回顾下今天的内容。当函数作为对象的方法调用时，函数中的this就是该对象；当函数被正常调用时，在严格模式下，this值是undefined，非严格模式下this指向的是全局对象window；嵌套函数中的this不会继承外层函数的this值。最后，我们还提了一下箭头函数，因为箭头函数没有自己的执行上下文，所以箭头函数的this就是它外层函数的this。
2024-05-20 19:45:00
693
原创 10 _ 作用域链和闭包 ：代码中出现相同的变量，JavaScript引擎是如何选择的？
首先，介绍了什么是作用域链，我们把通过作用域查找变量的链条称为作用域链；作用域链是通过词法作用域来确定的，而词法作用域反映了代码的结构。其次，介绍了在块级作用域中是如何通过作用域链来查找变量的。最后，又基于作用域链和词法环境介绍了到底什么是闭包。通过展开词法作用域，我们介绍了JavaScript中的作用域链和闭包；通过词法作用域，我们分析了在JavaScript的执行过程中，作用域链是已经注定好了，比如即使在foo函数中调用了bar函数，你也无法在bar函数中直接使用foo函数中的变量信息。
2024-05-17 08:00:00
955
原创 09 _ 块级作用域：var缺陷以及为什么要引入let和const？
好了，今天的内容就讲到这里，下面我来简单总结下今天的内容。由于JavaScript的变量提升存在着变量覆盖、变量污染等设计缺陷，所以ES6引入了块级作用域关键字来解决这些问题。之后我们还通过对变量环境和词法环境的介绍，分析了JavaScript引擎是如何同时支持变量提升和块级作用域的。既然聊到了作用域，那最后我们再简单聊下编程语言吧。
2024-05-16 19:30:00
885
原创 08 _ 调用栈：为什么JavaScript代码会出现栈溢出？
函数调用就是运行一个函数，具体使用方式是使用函数名称跟着一对小括号。var a = 2var b = 10return a+badd()这段代码很简单，先是创建了一个add函数，接着在代码的最下面又调用了该函数。那么下面我们就利用这段简单的代码来解释下函数调用的过程。在执行到函数add()之前，JavaScript引擎会为上面这段代码创建全局执行上下文，包含了声明的函数和变量，你可以参考下图：全局执行上下文从图中可以看出，代码中全局变量和函数都保存在全局上下文的变量环境中。首先，从。
2024-05-15 19:15:00
789
原创 07 _ 变量提升：JavaScript代码是按顺序执行的吗？
JavaScript代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为JavaScript代码在执行之前需要先编译。在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为undefined；在代码执行阶段，JavaScript引擎会从变量环境中去查找自定义的变量和函数。如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。先编译，再执行。
2024-05-14 19:30:00
1635
原创 06 _ 渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？
好了，我们现在已经分析完了整个渲染流程，从HTML到DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：完整的渲染流水线示意图渲染进程将HTML内容转换为能够读懂的DOM树结构。渲染引擎将CSS样式表转化为浏览器可以理解的，计算出DOM节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
2024-05-13 21:45:00
1924
原创 05 _ 渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？
好了，今天正文就到这里，我画了下面这张比较完整的渲染流水线，你可以结合这张图来回顾下今天的内容。渲染流水线图从图中可以看出，本节内容我们介绍了渲染流程的前三个阶段：DOM生成、样式计算和布局。浏览器不能直接理解HTML数据，所以第一步需要将其转换为浏览器能够理解的DOM树结构；生成DOM树后，还需要根据CSS样式表，来计算出DOM树所有节点的样式；最后计算DOM元素的布局信息，使其都保存在布局树中。
2024-05-12 13:30:00
802
原创 04 _ 导航流程：从输入URL到页面展示，这中间发生了什么？
服务器可以根据响应头来控制浏览器的行为，如跳转、网络数据类型判断。Chrome默认采用每个标签对应一个渲染进程，但是如果两个页面属于同一站点，那这两个标签会使用同一个渲染进程。浏览器的导航过程涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。导航流程很重要，它是网络加载流程和渲染流程之间的一座桥梁，如果你理解了导航流程，那么你就能完整串起来整个页面显示流程，这对于你理解浏览器的工作原理起到了点睛的作用。
2024-05-11 20:00:00
999
原创 03 _ HTTP请求流程：为什么很多站点第二次打开速度会很快？
本篇文章的内容比较多、比较碎，但是非常重要，所以我先来总结下今天的主要内容。为了便于你理解，我画了下面这张详细的“HTTP请求示意图”，用来展现浏览器中的HTTP请求所经历的各个阶段。HTTP请求流程示意图从图中可以看到，浏览器中的HTTP请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备IP和端口、等待TCP队列、建立TCP连接、发起HTTP请求、服务器处理请求、服务器返回请求和断开连接。
2024-05-09 19:45:00
901
原创 02 _ TCP协议：如何保证页面文件能被完整送达浏览器？
好了，这一节就到这里，下面我来做一个简单的总结。互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。IP负责把数据包送达目的主机。UDP负责把数据包送达具体应用。而TCP保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。其实了解TCP协议，是为了全方位了解HTTP，包括其实际功能和局限性，之后才会更加深刻地理解为什么要推出HTTP/2，以及为什么要推出QUIC协议，也就是未来的HTTP/3。
2024-05-08 19:15:00
950
原创 01 _ Chrome架构：仅仅打开了1个页面，为什么有4个进程？
无论你是想要设计高性能Web应用，还是要优化现有的Web应用，你都需要了解浏览器中的网络流程、页面渲染过程，JavaScript执行流程，以及Web安全理论，而这些功能是分散在浏览器的各个功能组件中的，比较多、比较散，要怎样学习才能掌握呢？通过浏览器的多进程架构的学习，你就可以把这些分散的知识点串起来，组成一张网，从而让自己能站在更高的维度去理解Web应用。因此，学习浏览器的多进程架构是很有必要的。需要说明的是，在本专栏中，所有的分析都是基于Chrome浏览器的。
2024-05-07 09:08:21
584
原创 前端开发（一些常用的插件使用和网站）
目前编辑器包含了语法高亮，如果需要添加目录索引，可以监听文档编辑的change事件，获取markdown文档内容，通过正则表达式解析即可。近似 vue 和 react。
2023-11-14 11:20:45
152
原创 响应式布局
早在2010年，设计人员和开发人员就开始实践“响应网页设计”(RWD):随着网络设备尺寸千变万化，为了达到相同的体验，通常的做法是剪切不相关的设计。实际上，我们可以让我们的设计更好的适应渲染屏幕。响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。
2023-07-25 17:30:35
196
原创 包含p标签的字符串中高亮搜索内容
this.searchTxt 是查询的内容， string 有可能包含 p 标签。当查询 p 字母的时候需要避免标签的 p。
2023-07-19 17:03:01
876
原创 Typescript 学习笔记
/ ---------- void 类型， typescript 中的void 表示没有任何类型，一般用于定义方法没有返回值----------// ---------- null 和 undefined 其他（never类型） 数据类型的子类型 -----------// ts 继承的探讨： 父类和子类中的方法一致。// ---------- 数组类型（array） ts 中定义数组有两种方式----------// ---------- 数字类型（number）-------------------
2023-05-30 10:11:38
471
原创 echarts 实现以中国为中心的世界地图
echarts 实现以中国为中心的世界地图记录：https://download.csdn.net/download/qq_46143850/87751339
2023-05-04 10:59:45
625
1
原创 JavaScript核心高级内容复习4
进程：程序的一次执行, 它占有一片独有的内存空间线程： CPU的基本调度单位, 是程序执行的一个完整流程进程与线程一个进程中一般至少有一个运行的线程: 主线程一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的一个进程内的数据可以供其中的多个线程直接共享多个进程之间的数据是不能直接共享的浏览器运行是单进程还是多进程?有的是单进程firefox老版IE有的是多进程chrome新版IE如何查看浏览器是否是多进程运行的呢?任务管理器==>进程。
2023-03-30 20:45:00
192
原创 JavaScript核心高级内容复习3
- 方式一 : Object构造函数模式 * 套路 : 先创建空Object对象 , 再动态添加属性 / 方法 * 适用场景 : 起始时不确定对象内部数据 * 问题 : 语句太多 -- > < script type = "text/javascript" > /*一个人: name:"Tom", age: 12*/ // 先创建空Object对象 var p = new Object() p = {
2023-03-30 20:15:00
499
原创 JavaScript核心高级内容复习2-2
文章目录4、闭包5、内存溢出与内存泄露详细讲解闭包前置知识理解闭包常见的闭包闭包的作用闭包的生命周期闭包的应用_自定义JS模块闭包的缺点及解决闭包面试题内存溢出与内存泄露4、闭包理解:当嵌套的内部函数引用了外部函数的变量时就产生了闭包通过chrome工具得知: 闭包本质是内部函数中的一个对象, 这个对象中包含引用的变量属性作用:延长局部变量的生命周期让函数外部能操作内部的局部变量写一个闭包程序function fn1() { var a = 2; function fn
2023-03-22 19:00:00
278
原创 JavaScript核心高级内容复习2-1
所有函数都有一个特别的属性:prototype: 显式原型属性所有实例对象都有一个特别的属性:__proto__: 隐式原型属性显式原型与隐式原型的关系函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象实例对象的__proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值原型对象即为当前实例对象的父对象原型链所有的实例对象都有__proto__属性, 它指向的就是原型对象。
2023-03-22 10:39:16
238
原创 vue3.0 基础学习（组合式api）
用于批星设置多个数据为响应式数据toRefs与原始数据有交互，修改响应式数据会影响到原数据, 但是不会更新视图层 toRefs还可以与其他响应式函数交互，更加方便处理视图层数据使用需引入toRef也可以创建—个响应式数据ref本质是拷贝粘贴一份数据，脱离了与原数据的交互ref函数将对象中的属性变成响应式数据，修改响应式数据是不会影响到原数据,但是会更新视图层。toRef的本质是引用，与原始数据有交互，修改响应式数据会影响到原数据,但是不会更新视图层使用需引入。
2023-03-22 10:30:20
469
原创 52、前端架构中，每个逻辑页面如何可以做到独立发布呢？
上一期的答疑文章发布之后，同学们的热情很高，我在后台又收到了一批新的问题，今天我们继续来答疑。1. 请问前端架构中，每个逻辑页面如何可以做到独立发布呢？答：首先，我们要知道发布是什么意思，我们平时开发好一个网页，把它放到线上真实对用户服务的机器上，这个过程叫做发布。正常来讲，前端工程师发布的原材料是HTML，产出是一个线上的URL地址。各个公司的发布系统差异非常的大，有的是前端发HTML，有的是前端把代码给服务端同学，改成JSP之类的代码，再一起发布。对于逻辑页面而言，我们需要发布的从HTML变成了Java
2022-07-11 08:48:49
435
原创 VueComponent 笔记
1、 school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是由 Vue.extend 生成的。2、我们只需要写 ,Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行的：new VueComponent(options)。3、特别注意： 每次调用 Vue.extend ，返回的都是一个全新的 VueComponent ！！！4、关于 this 指向：（1）组件配置中：data函数、methods 中的函数、watch 中的函数、c
2022-06-28 09:14:01
198
原创 51、前端代码单元测试怎么做？
集中解决一下大家在学习中遇到的问题，我争取用快问快答的形式，咱们多回答一些问题。1. 前端代码单元测试还是非常有必要的，不知道老师这一块是怎么做的，能否分享一下？答：关于单元测试这件事，虽然在业务代码我没做成功过，但是它在框架和基础库开发中起到了非常积极的作用。我们平时写代码也肯定写一部分就要运行一下试试，其实这种行为就是单元测试，只是我们把很多自动化的内容，用人肉执行了，并且没有保存和管理case，也没有统计code coverage。只要选择一个好的单元测...
2022-06-23 08:33:39
927
原创 50、前端交互基础设施的建设
分享内容大纲Vue、React等现代前端框架很好地解决了组件化和数据视图解耦问题。而对前端来说，新交互永远是花费时间最多的工作，新交互也是前端团队的自然价值和核心竞争力之一。在这次话题中，我会分享在交互的基础设施的建设上的一些思考和实践，包括图形图像基础、事件机制与视图层架构模式、交互管理框架等内容。首先我们要了解一下历史。在70年代，大概是70年代的尾巴，1979年左右，有了特别有名的，MVC架构。MVC之后，经过了差不多十几年的发展，到了90年代，准确地说应该是95年左右的时候，这个有一个公司的CTO，
2022-05-30 08:48:04
295
1
原创 4、React 之 收集表单数据 与 组件生命周期（1）
一、收集表单数据1、效果需求：定义一个包含表单的组件输入用户名密码后，点击登录 提示输入信息代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="test"></div></body&g
2022-05-29 18:07:34
347
原创 49、前端与图形学
（点击视频观看完整分享内容。）主要内容关于前端和图形学，我分成了三个部分来讲解。第一部分是讲前端和图形学有什么样的关系。我们为什么要在前端里引入图形学，这个也是我的一段心路历程。第二部分相对来说是比较实用的，就是图形学的应用场景。如何在前端的日常的工作中，把图形学的知识用进去，为我们的工作和业务创造价值。最后一部分是对图形学基础设施的一些建设，目前还是一个比较初级的阶段，但是对大家来说，应该有些思路还是可以去思考的。前端和图形学首先讲第一部分前端和图形学，先讲讲缘起。缘起2011年我做了
2022-05-20 08:16:39
661
原创 48、学了这么多前端的“小众”知识，到底对我有什么帮助？
1.老师讲的内容是不是工作中用不到的，对掌握前端的实际工作有什么帮助呢，我们有必要掌握这些比较偏的内容吗？我自己一直奉行着一个观点，不要执着于知识的“临时”实用性。因为我总是感觉，掌握知识越多的人，更喜欢花费时间学习一些暂时可能无法变现的知识，原因有两点：一是其实学知识花费的时间比想象中的要少，这边在纠结它有没有用，那边可能都学完了；二是知识的实用性其实不怎么好判定，比如当年黎曼搞出非欧几何的时候，全世界都觉得纯粹是数学的思维游戏，直到黎曼死了很多年后，相对论出世，黎曼几何有了实际用途。不过，这里我还是希望
2022-05-20 08:13:03
175
flutter使用webrtc技术实现共享桌面，视频
2021-02-22
flutter_practies.zip
2021-01-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人