- 博客(102)
- 收藏
- 关注
RSS订阅原创 前端充电 - 移动端 - 小程序登录、跳转/嵌入H5页面
https://www.bilibili.com/video/BV1PE421A7Pt?spm_id_from=333.788.videopod.sections&vd_source=c919d6976fd77ac77f9860cf2e7e0e11产品APP：安卓端，ios端和小程序端。产品要做一个活动页，需要在3个端侧把活动页展示出来。但活动有效期只有3天。可供选择的方案包括：使用uniapp的web-view实现。操作：通过webview内置组件进行H5页面嵌入，src填入要打开的H5页面的网址示例
2025-03-08 20:47:52
1455
原创 前端充电 - 移动端小知识
https://www.bilibili.com/video/BV1rW42197Ux?spm_id_from=333.788.videopod.sections&vd_source=c919d6976fd77ac77f9860cf2e7e0e11
2025-03-08 11:03:27
194
原创 前端充电 - uniapp开发小知识
uniapp优势：一套代码可以生成多端侧应用。问题：uniapp项目可能会做H5端、app或小程序端，可能不同端侧的表现形式不同。场景：微信小程序只能通过微信支付，但H5端，可能会有支付宝支付和微信支付此时需要针对不同端侧，对代码进行不同处理，这就用到条件编译。
2025-03-08 10:48:49
225
原创 【极客时间】浏览器工作原理与实践-3 浏览器中的JavaScript执行机制 (5讲) - 3.2 调用栈：为什么JavaScript代码会出现栈溢出？
函数调用就是运行一个函数，具体使用方式是使用函数名称跟着一对小括号。var a = 2var b = 10return a+badd()这段代码很简单，先是创建了一个 add 函数，接着在代码的最下面又调用了该函数。那么下面我们就利用这段简单的代码来解释下函数调用的过程。在执行到函数 add() 之前，JavaScript 引擎会为上面这段代码创建全局执行上下文，包含了声明的函数和变量，你可以参考下图：从图中可以看出，代码中全局变量和函数都保存在全局上下文的变量环境中。
2025-03-05 21:40:07
630
原创 【极客时间】浏览器工作原理与实践-3 浏览器中的JavaScript执行机制 (5讲) - 3.1 变量提升：JavaScript代码是按顺序执行的吗？
JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。
2025-03-04 23:39:47
1020
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器 (6讲) - 2.6 渲染流程（下）：HTML、CSS和JavaScript，是如何变成页面的？
好了，我们现在已经分析完了整个渲染流程，从 HTML 到 DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
2025-03-03 22:38:35
765
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器 (6讲) - 2.5 渲染流程（上）：HTML、CSS和JavaScript，是如何变成页面的？
DOM 生成、样式计算和布局。浏览器不能直接理解 HTML 数据，所以第一步需要将其转换为浏览器能够理解的 DOM 树结构；生成 DOM 树后，还需要根据 CSS 样式表，来计算出 DOM 树所有节点的样式；最后计算 DOM 元素的布局信息，使其都保存在布局树中。到这里我们的每个节点都拥有了自己的样式和布局信息，那么后面几个阶段就要利用这些信息去展示页面了，由于篇幅限制，剩下的这些阶段我会在下一篇文章中介绍。
2025-03-02 23:12:37
1328
1
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器 (6讲) - 2.4 导航流程：从输入URL到页面展示，这中间发生了什么？
服务器可以根据响应头来控制浏览器的行为，如跳转、网络数据类型判断。Chrome 默认采用每个标签对应一个渲染进程，但是如果两个页面属于同一站点，那这两个标签会使用同一个渲染进程。浏览器的导航过程涵盖了从用户发起请求到提交文档给渲染进程的中间所有阶段。导航流程很重要，它是网络加载流程和渲染流程之间的一座桥梁，如果你理解了导航流程，那么你就能完整串起来整个页面显示流程，这对于你理解浏览器的工作原理起到了点睛的作用。
2025-03-02 15:39:46
904
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器 (6讲) - 2.3 HTTP请求流程：为什么很多站点第二次打开速度会很快？
HTTP 请求示意图：从图中可以看到，浏览器中的 HTTP 请求从发起到结束一共经历了如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。然后我还通过 HTTP 请求路径解答了两个经常会碰到的问题，一个涉及到了 Cache 流程，另外一个涉及到如何使用 Cookie 来进行状态管理。
2025-03-02 12:22:15
736
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器-2.2 TCP协议：如何保证页面文件能被完整送达浏览器？
互联网中的数据是通过数据包来传输的，数据包在传输过程中容易丢失或出错。IP 负责把数据包送达目的主机。UDP 负责把数据包送达具体应用。而 TCP 保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输数据和断开连接。其实了解 TCP 协议，是为了全方位了解 HTTP，包括其实际功能和局限性，之后才会更加深刻地理解为什么要推出 HTTP/2，以及为什么要推出 QUIC 协议，也就是未来的 HTTP/3。
2025-03-02 12:06:53
869
原创 【极客时间】浏览器工作原理与实践-2 宏观视角下的浏览器- 2.1 Chrome架构：仅仅打开了1个页面，为什么有4个进程？
计算机中的并行处理就是同一时刻处理多个任务。正常情况下程序可以使用单线程来处理，也就是分四步按照顺序分别执行这四个任务。如果采用多线程，会怎么样呢？我们只需分“两步走”：第一步，使用三个线程同时执行前三个任务；第二步，再执行第四个显示任务。通过对比分析，你会发现用单线程执行需要四步，而使用多线程只需要两步。因此，使用并行处理能大大提升性能。进程中的任意一线程执行出错，都会导致整个进程的崩溃。线程之间共享进程中的数据。当一个进程关闭之后，操作系统会回收进程所占用的内存。
2025-03-02 12:04:30
1002
原创 【极客时间】浏览器工作原理与实践-1 开篇词
概括。李兵，05年开始工作，08年体验Chromium开源项目。创业时基于Chromium和IE发布双核浏览器——太阳花，除了可以享受Chrome的快捷外，还能兼容只支持IE的站点。开发中的最大挑战时如何在Chromium中集成IE模块，为此研究Chromium的进程架构和渲染流程。11年任职盛大创新院，参与研发WebOS项目。WebOS愿景是基于WebKit内核打造一个和安卓并存的操作系统。
2025-03-01 17:52:24
653
原创 一些耳朵起茧子的名词解释
是一种通过浏览器访问的软件程序，它运行在服务器上，用户通过网络（如互联网或内网）与它进行交互。与传统网站（主要提供静态内容）不同，Web应用更注重动态功能、数据处理和用户交互。总结来说，Web应用是功能丰富的在线工具，结合了前端交互、后端逻辑和数据库，为用户提供动态服务。从社交到办公，它已成为现代互联网的核心组成部分。
2025-02-19 22:45:56
1040
原创 Vue2官网教程查漏补缺学习笔记 - Part2深入了解组件 - 1组件注册&2Prop&3自定义事件
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。-- 没有效果 --> < my-component v-on: my-event = " doSomething " > </ my-component >-- 没有效果 --> < my-component v-on: my-event = " doSomething " > </ my-component >
2025-02-15 15:53:00
875
原创 Vue2官网教程查漏补缺学习笔记 - Part1基础 - 6Class与Style绑定&7条件渲染&8列表渲染
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 用于 和 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。我们可以传给 一个对象，以动态地切换 class：上面的语法表示 这个 class 存在与否将取决于数据 property 的 truthiness。你可以在对象中传入更多字段来动态切换多个 cla
2025-01-25 23:11:39
762
原创 Vue2官网教程查漏补缺学习笔记 - Part1基础 - 3Vue实例&4模板语法&5计算属性&监听器
每个 Vue 应用都是通过用 函数创建一个新的 Vue 实例开始的：虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 (ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。一个 Vue 应用由一个通过 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 to
2025-01-25 20:17:53
742
原创 Vue2官网教程查漏补缺学习笔记 - Part1基础 - 1安装&2介绍
Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看。
2025-01-25 17:40:03
568
原创 【前端充电】跨域问题及解决方案
同源策略是浏览器为确保资源安全，而遵循的一种策略，该策略对访问资源进行了一些限制。W3C 上对同源策略的说明。源的组成部分下面表格中，只有最后一行的两个源是同源。源 1源 2是否同源httphttps⛔非同源️http://wwwhttp://mail⛔非同源8080/home8090/home⛔非同源homesearch✅同 源︎所处源：所处位置 / 浏览器地址栏出现的地址 / 网页的地址。同源请求非同源请求同源请求：所处源和目标源是同源的。非同源请求：所处源和目标源不是同源的。
2025-01-05 21:47:40
821
1
原创 【读书打卡版】【读书笔记】半小时漫画中国地理4
一、如果全中国是个班级，西北同学有自己的“小道”消息！在前三册书里，我们顺着长江，介绍了长江沿岸的13个省份。下面我们把目光移向祖国的西北、北方。这里有两条大河：塔里木河、黄河。塔里木河流经新疆，在甘肃和宁夏两位同学的帮助下，大陕成功建立起了一条可以沟通新疆的通道——丝绸之路。大陕旁边还有一个同学，他火力十足，古道热肠，有事儿他顶上。这个热心的火力少年，就是山西。二、新疆——最具融合美的同学！那新疆的融合美，美在哪里呢？2.1 融合1：既大又小我们先介绍一下新疆：我国陆地面积
2024-12-29 11:36:21
926
原创 【读书打卡版】【读书笔记】半小时漫画中国地理3
继续跟随长江的脚步，认识坐在长江中下游平原上的省份：安徽、江苏、江西、浙江、上海。他们同属于一个美丽又富饶的大区——江南。那么问题来了，一提到江南，你会想到什么？河湖纵横，渔业发达。通江达海，交通便利，经济发达，商品包邮。口味清淡，喜甜厌辣。
2024-12-21 23:15:46
604
原创 【读书笔记】半小时漫画中国地理2
上一本书，我们顺着长江，讲完了两个高原组合：青藏高原：西藏&青海，云贵高原：云南&贵州。长江从高原流下，转头就流进了两个“坑”里：四川盆地和两湖盆地，分别孕育了巴蜀文化和荆楚文化，也分别发展出了四川和湖广两省，经过多次区域调整，到现在变成了三个省和一个直辖市：四川&重庆，湖北&湖南。由于这四位同学都地处南方，倚靠长江，环境状况很像，因此都有水多、天热的特点，不约而同地做到了——水火相容。这里水资源丰富，四川盆地组可以用水发电，西电东送，支援东边的同学。两湖盆地组可以直接送水，南水北调，支援北边的同学。
2024-12-08 18:35:41
958
原创 Vant组件
进阶用法-浏览器适配-Rem布局适配Vant 默认使用px作为样式单位，如果需要使用viewport单位 (vw, h, qvmin, vmax)，推荐使用进行转换。是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。Rem 布局适配如果需要使用rem是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位用于设置 rem 基准值推荐全局注册，只需要注册一次，局部注册比较麻烦。通过icon选项可以自定义图标，支持传入图标名称或图片链接，通过属性可以自定义加载图标类型。
2024-11-17 22:25:20
1247
1
原创 Vue生命周期
Vue生命周期：Vue实例从创建到销毁的过程，即指从创建、初始化数据、编译模板、挂载DOM到渲染、更新到渲染、销毁等一系列过程。主要分为创建前后、载入前后、更新前后、销毁前后以及一些特殊场景的生命周期。组件销毁时，触发这两个方法（v-if由true变为false，是组件销毁的一种情况）组件销毁时，触发这两个方法（v-if由true变为false，是组件销毁的一种情况）vue实例的数据对象data：undefined。vue实例挂载完成，用户可以看到渲染完成的页面。vue实例的数据对象data：创建完成。
2024-10-31 22:33:05
456
1
原创 Vue-$el属性
Vue.js自定义指令可以用于扩展HTML元素功能，其中用到了$el属性。el.focus();});$el提供了一种在Vue中直接操作DOM元素的途径。但实际开发中，要谨慎使用$el属性，避免过度依赖$el破坏Vue.js数据驱动的优势。充分利用$el属性的强大功能，结合Vue.js其他API，构建更加灵活高效的Vue.js应用程序。
2024-10-30 23:08:20
1822
原创 【b站-湖科大教书匠】6 应用层 - 计算机网络微课堂
具体内容如下。例如，这就是推动因特网发展的万维网的应用，相关的应用层协议为超文本传送协议HTTP。用户在浏览器地址栏输入的是见名知意的域名，而TCP/IP体系的网际层使用IP地址来标识目的主机。从域名到IP地址的转换工作，由属于应用层范畴的域名系统DNS在后台帮用户自动完成，以方便用户使用。除万维网应用和域名系统外，常见的应用还有动态主机配置、电子邮件、文件传送和P2Peye.com文件共享、多媒体网络应用等。总结。
2024-07-28 17:21:46
501
原创 【b站-湖科大教书匠】5 运输层 - 计算机网络微课堂
具体内容如下。如上图所示，局域网1上的主机，与局域网2上的主机，通过互联的广域网进行通信。网络层的作用范围是主机到主机，但实际上在计算机网络中进行通信的真正实体是位于通信两端主机中的进程。上图，AP1和AP2是局域网1这台主机中的与网络通信相关的2个应用进程。AP3和AP4是局域网2上这台主机的与网络通信相关的2个应用进程。AP是应用进程的英文缩写词。运输层协议又称为端到端协议，运输层的作用范围是应用进程到应用进程，也称为端到端。从计算机网络体系结构的角度看运输层应用进程在应用层。
2024-07-25 22:32:21
1055
原创 【b站-湖科大教书匠】4 网络层 - 计算机网络微课堂
具体内容如下。具体内容如下。降2取余法和凑值法总结具体内容如下。因特网是全球最大的互联网络，选择动态路由选择协议。主机和路由器使用ICMP来发送差错报告报文和询问报文的。
2024-07-21 16:33:56
1095
原创 【b站-湖科大教书匠】3 数据链路层-计算机网络微课堂
复习一下主机收发数据过程。主机H1将待发送的数据逐层封装后，通过物理层将构成数据报的比特转换为电信号，发送到传输媒体。数据包进入路由器后，由下往上逐层解封到网络层路由器根据数据报的目的网络地址和自身转发表，确定数据包的转发端口然后从网络层向下逐层封装数据包，并通过物理层将数据包发送到传输媒体。数据包最终到达主机H2时，继续由下往上逐层解封，最终解封出主机H1所发送的数据。
2024-06-23 22:50:06
846
原创 【b站-湖科大教书匠】2 物理层-计算机网络微课堂
课程地址：【微课堂（有字幕无背景音乐版）】 https://www.bilibili.com/video/BV1c4411d7jb/?
2024-06-23 20:05:15
1097
原创 【b站-湖科大教书匠】1 计算机网络概述-计算机网络微课堂
计算机网络已由一种通信基础设施发展成为一种重要的信息服务基础设施。计算机网络已经像水、电、煤气这些基础设施一样，成为我们生活中不可或缺的一部分。CNNIC 中国互联网络信息中心官网网站 www.cnnic.net.cn目前是第53次中国互联网络发展状况统计报告。
2024-06-20 23:32:03
1253
3
原创 【b站vue教程】2 浏览器渲染——前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】
performances里的事件日志里也可以看到浏览器的渲染流程。浏览器每次可以接收多少数据？64kb。可验证。一张超过64kb的照片，比如460kb。要分为8次才能完全接受这张图片，每次接受65536 bytes（即64kb）。同理，如果是1g的视频，也是分段接收的。
2024-05-04 23:40:41
805
原创 【b站vue教程】1 宏观视角下的浏览器——前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】
本课程以Chrome浏览器进行研究和分析。选择Chrome浏览器的原因，是Chrome，微软的edge以及国内的大部分浏览器都是基于Chrominum二次开发的。Chrome浏览器是Google官方发行的版本，是目前全球使用率最高的浏览器。Chrome最具代表性。为什么要学习浏览器？随着云计算的普及和HTML5技术的快速发展，越来越多的应用从c/s架构转化b/s架构。这种改变让浏览器的重要性与日俱增。c/s架构，clinet --server，（王者荣耀，英雄联盟）
2024-05-04 18:02:30
882
2
原创 【b站前端-小鑫】Vue Router(路由)快速掌握（入门到精通5节课）
当进入一个页面，但是没有登陆，此时该页面会提示需要登陆才可继续访问页面。相当于路由拦截。
2024-05-01 13:35:00
1394
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人