- 博客(137)
- 收藏
- 关注
RSS订阅原创 浏览器渲染过程
最后，总结浏览器渲染过程的所有步骤：DNS 查找：当输入 URL 时，浏览器执行 DNS 查找，将域名转换为 IP 地址，以便定位到网站服务器TCP/TLS 握手：浏览器发起 TCP 握手与服务器建立连接。如果网站是基于 https 的，还会进行 TLS 握手来加密传输的数据HTTP 请求/响应周期：建立连接后，浏览器发送一个 HTTP 请求获取网站的内容，服务器响应以必要的 HTML、CSS、JavaScript 或其他其他资源。
2025-03-27 21:01:22
614
原创 localhost 和 127.0.0.1 的区别
localhost 和 127.0.0.1 都是用来访问本地计算机的名称和地址，它们之间有紧密的关系，但也有一些区别。localhost 是一个域名，它在大多数操作系统中被配置为指向本地计算机，我们在浏览器中输入 localhost 时，浏览器会将其解析为本地计算机的地址。通常情况下，在操作系统的主机文件（如 /etc/hosts 或 C:\Windows\System32\drivers\etc\hosts）中，localhost 被定义为指向 127.0.0.1。
2025-03-27 20:40:04
724
原创 JavaScript 运算符助你简化逻辑赋值操作
仅在左侧变量为真值时才进行赋值，适合用于需要在保持假值的同时，根据真值条件更新变量的场景。操作符非常适合为可能未定义的变量设置默认值，且不会干扰有效的假值。时才进行赋值，适合用于为未定义或空值变量设置默认值的场景。函数仅在库存足够时才减少库存，防止出现负库存的情况。等合法值视为需要赋默认值的情况，可能导致意外的结果。在 JavaScript 中，以下值被认为是。这有助于在变量未被初始化时提供默认值。时才赋值，避免了上述问题。代码较为冗长，可读性不高。时才赋值，不影响其他假值。则提供了更为简洁的方式。
2024-12-11 13:22:15
427
原创 async、await 细节
类型(有确定的返回值)，会立即向微任务队列添加一个微任务。基本一样的代码为什么会出现差别，话不多说。类型，会立即向微任务队列添加一个微任务。类型，会立即向微任务队列添加一个微任务。函数，但是该函数的返回值本身是**非。一样，会对返回值的类型进行辨识。是用同步的方式，执行异步操作**才会放行，否则将一直等待（阻塞当前。函数处理返回值的问题，它会像。函数在抛出返回值时，会根据返回值。的情况如何处理进行了一次修改，函数内的后续代码），不服看看这个。函数在抛出返回值时，会根据返回值。的情况如何处理进行了一次修改，
2024-10-09 22:52:20
880
原创 JavaScript中闭包的概念与其造成的性能问题
如果一个函数没有访问任何外部作用域的变量或方法，那么它其实是拥有闭包特性的，因为在 JavaScript 中，每个函数都可以理解为对其创建时所处作用域的引用。从这个角度来说，即使普通函数本身并没有捕获外部变量，但它们仍然与词法作用域相关联，所以我们可以“轻微地”说它是闭包。但是它没有表达出闭包的特点，也就是访问父级作用域的变量，所以我们一般不把一个没有引用外部变量的函数称为是闭包的。
2024-08-09 22:37:12
741
1
原创 JS 数组对象的 用法
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找，如果要检索的元素没有出现，则该方法返回 -1，该方法将从尾到头地检索数组中指定元素 item，开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时），如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置，数组的索引开始位置是从 0 开始的，如果在数组中没找到指定元素则返回 -1。★注：如果你想查找数组首次出现的位置，请使用 indexOf() 方法。
2024-05-19 13:04:42
962
原创 前端本地存储
在知道iphone4居然支持indexDB后，我失去头绪了，拿着十年前的这个古董机，随便翻翻，看看系统，看看版本，没看出什么问题，但是我发现这iphone4的内存也是出奇的小，只有8G内存。然而，当产品不知道从哪找到了一部iphone4给我（我也真的服了这个老6），我拿到真机试了下，得到让我无法呼吸的结果，iphone4这古董机居然支持indexDB，那么就不是超过了5M的上限导致缓存失败了。随即，随便下载点软件，毫不费力就将这台iphone4的内存整得只剩下50M不到了，手机已经开始提示要清理内存。
2024-05-19 12:26:58
616
原创 JS优化技巧
/ 传统函数定义// 箭头函数简化// 传统对象创建age: 30,// 对象字面量简化第一次见这个写法，不知道是啥意思的小伙伴，把他当成vue2中的definePropertyconsole.log(this.name+'现在'+newAge+'岁')},return 18;})是一个意思，赋值的时候set会被触发，取值的时候get会被触发。巧用自带属性，提升性能。// ...
2024-04-30 15:46:31
676
原创 HTTP 多个版本
了解一下各个版本的HTTP。上个世纪90年代初期，蒂姆·伯纳斯-李（Tim Berners-Lee）及其 CERN的团队共同努力，制定了互联网的基础，定义了互联网的四个构建模块：超文本文档格式（HTML）数据传输协议（HTTP）用于查看超文本的网络浏览器（第一个浏览器，WorldWideWeb）用于传输数据的服务器（httpd的早期版本）HTTP重用了现有的 TCP/IP 协议来进行数据传输，其中 HTTP 消息字节位于应用层，如下图中的浅蓝色所示。
2024-04-30 15:42:07
1581
原创 JavaScript开发技巧
现在，使用 :checked 伪类和 CSS，我们可以实现自定义样式，而无需编写脚本。传统上，实现渐变边框涉及复杂的 CSS 或 JavaScript 解决方案。随着CSS中column属性的出现，我们无需编写脚本即可实现复杂的多列布局。创建覆盖菜单传统上涉及 JavaScript。通过利用CSS自定义属性和prefers-color-scheme媒体查询，无需任何JavaScript干预即可实现暗模式。CSS自定义属性和clamp()创建一个响应式且可扩展的排版系统，无需JavaScript也可以实现。
2024-04-30 15:13:23
950
原创 不再写满屏import导入
导致import占满全屏的原因有很多。但不用模块重导、require.context、import动态导入、webpack.ProvidePlugin等手段，一定会让我们写出满屏的import。只有想不到的，没有做不到的。只要你想、相信就一定能如愿以偿。
2024-04-14 23:11:15
7219
2
原创 执行 npm run serve 时发生了什么？
可执行文件，这样可以确保在不同的项目中使用不同版本的 Vue CLI 而不会相互影响。这个查找过程确保了我们可以在项目内部或全局的依赖中找到并执行指定的命令，相当于执行了。命令时，实际上是在调用这个项目本地的可执行文件，而不是全局安装的 Vue CLI。是一个常见的命令，尤其是在使用 Vue CLI 构建项目时。当我们通过 Vue CLI 创建一个新的 Vue.js 项目时，它会在项目的。文件的一个软链接，这个文件是 Vue CLI 提供的命令行工具的入口文件。就是我们需要执行的命令，其对应的值是执行。
2024-04-09 15:54:04
750
原创 localhost 与 127.0.0.1 在本地开发中有什么区别
一些域名可能没有注册，导致它们的IP地址无法找到，而其他域名可能有多个IP地址，DNS会根据某些规则自动返回其中一个。为了赚钱，虚拟主机提供商会在一台计算机上分配许多虚拟主机，允许每个人都可以使用默认的端口80访问他们的域名，而不会有任何问题。我们调试的程序绑定到这个IP地址。这种情况比较少见，如果你的计算机无法连接到LAN，你可能会看到这个IP地址，这是暂时分配的LAN地址。当网站请求到达Nginx的端口80时，它根据请求中的域名（主机头中的域名）识别出相应的网络程序，然后将请求转发给该网络程序。
2024-04-09 15:50:16
1067
原创 关于JSON
JSON 全称为 JavaScript Object Notation，是一种轻量级的数据交换格式。它是 JavaScript 中用于描述对象数据的语法的扩展。不过并不限于与 JavaScript 一起使用。它采用完全独立于语言的文本格式，这些特性使 JSON 成为理想的数据交换格式。易于阅读和编写，同时也易于机器解析和生成。所有现代编程语言都支持这些数据结构，使 JSON 完全独立于语言。
2024-04-07 23:28:49
905
原创 WebSocket
因此，在 WebSocket 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。客户端接收到服务端发送的新的Sec-WebSocket-Accept参数后，使用原来的随机密钥和新的Sec-WebSocket-Accept参数共同生成一个新的Sec-WebSocket-Key参数，用于加密数据传输。通过 WebSocket，客户端和服务器之间可以实时通信，无需依赖轮询，从而提高通信效率和减少网络延迟。
2024-04-06 23:13:13
1379
1
原创 不易发现的Bug
例如SQL注入、跨站脚本攻击(XSS)、权限绕过等，这些往往需要专业的安全知识和工具才能发现。UI/UX问题通常需要主观判断，可能包括设计不一致、导航困难、可访问性问题等。系统或组件集成时，接口不匹配、数据传递错误或依赖关系问题等会导致集成错误。进行专门的安全测试，包括使用自动化漏洞扫描工具和手工渗透测试。设计测试用例以覆盖所有边缘情况，包括最大、最小、零和负值等。包括处理数据边界时的错误，如数组边界、数值溢出或下溢等。在不同语言和文化环境下出现的格式、布局或语言问题。
2024-01-19 18:37:50
950
原创 web小技巧
good示例利用对外暴露实例的方式解耦了父组件与子组件状态的维护和管理逻辑，将状态通过调用组件实例的方式传给了子组件，如果有新的业务扩展，子组件完全有能力继续内聚继续扩展实例方法和属性。bad的写法会出现道具下钻陷阱，使代码难以阅读和理解，如果在子组件里面接收该方法，可能子组件的方法名与props传递下来的方法名不一致，代码阅读的链路和复杂性增加了。CSS 中的 display 条件渲染对性能影响较小，因为只需要在样式表中设置一个属性即可，不需要执行额外的代码来控制元素的显示或隐藏。延长了代码阅读的链路；
2024-01-19 18:34:44
447
原创 DOM 被劫持
DOM劫持的最常见原因之一是滥用JavaScript中的全局作用域。通过在特定的作用域范围内定义变量和函数，我们可以限制对该范围或任何嵌套范围的覆盖，并最大限度地减少潜在的冲突。我们来用JavaScript})();首先我们使用了DOMPurify来对上述代码块中的用户输入进行清理。在此版本的代码中，我们将所有内容都包含在立即调用函数表达式 (IIFE) 中，这会创建一个新作用域。form和变量以及分配给onsubmit事件处理程序的函数不在全局作用域内，因此它们不能被劫持。
2024-01-11 14:01:46
1099
原创 更好用的 node 版本管理工具
Volta是一种管理 JavaScript 命令行工具的便捷方式。volta的特点：速度无缝，每个项目的版本切换跨平台支持，包括 Windows 和所有 Unix shell支持多个包管理器稳定的工具安装-无需每次升级都重新安装!可扩展性挂钩用于特定于站点的定制。
2024-01-04 23:25:23
971
原创 了解 nextTick
nextTick简单的说，nextTick方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 JavaScript 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。在 Vue 中，数据的变化会触发重新渲染 DOM，但实际上，Vue 的数据更新是异步的。也就是说，当我们修改了 Vue 实例的数据后，并不会立即进行 DOM 更新，而是在下一个事件循环中才会进行。
2024-01-04 23:14:54
1154
原创 前端如何安全的渲染HTML字符串
使用js-xss，可以对用户提交的HTML内容进行净化，删除或转义所有潜在的危险代码，只保留安全的HTML标签和属性。它提供了一组方法和函数，可以净化和转义用户输入的HTML内容，以确保在浏览器环境中呈现的HTML是安全的。属性绑定时要特别小心。确保渲染的HTML字符串是可靠和安全的，避免直接从用户输入或不受信任的来源获取HTML字符串，以防止XSS攻击等安全问题。HTML Sanitizer API 的出现旨在提供一种方便且安全的方式来处理和净化 HTML，以减少潜在的安全风险，并提高用户代理的安全性。
2023-12-31 13:37:47
2360
原创 用 Node.js 写一个爬虫
自己设计一个网站，然后去爬取别人家页面的数据来做一个自己的网站。哈哈哈，如果自己写着玩可能没啥事，但如果用这个网站来获利，你可能就要被寄律师函了，毕竟这有点‘刑’。这篇文章呢，就带大家爬取豆瓣TOP250电影的信息。豆瓣电影 Top 250 \(douban.com\)[1]
2023-12-30 23:09:09
1393
原创 HTML可以使用属性访问AJAX、CSS过渡、WebSocket和服务器发送事件？
简而言之，htmx 是一种创新的HTML扩展框架，它通过在 HTML 中使用属性，让您可以轻松地访问AJAX、CSS过渡、WebSocket 和服务器发送事件等现代浏览器特性，从而实现现代用户界面的构建。它的设计目标是简化前端开发，减少复杂性，通过直接在 HTML 中定义交互行为，而不需要过多的JavaScript代码。这意味着您可以实现诸如局部更新、AJAX请求、CSS过渡、WebSocket和服务器发送事件等功能，而无需编写大量的JavaScript代码。
2023-12-05 22:47:29
415
原创 JavaScript 代码整洁技巧
让程序一开始就做到整洁，并不是一件很容易的事情。不要强迫症一样地反复更改代码，因为工期有限，没那么多时间。等到下次需求更迭，你发现到代码存在的问题时，再改也不迟。
2023-12-05 22:44:14
143
原创 强大JavaScript 技巧
当需要阻止用户刷新或关闭浏览器时，可以选择触发beforeunload事件，有些浏览器无法自定义文本内容。当您从客户端获取图片但无法立即上传到服务器，但需要预览时。当需要打印出当前页面，但需要修改当前布局时。当图片较多时，需要预加载图片以避免白屏。当您需要判断手机横屏或竖屏状态时。当你需要为横竖屏设置不同的样式时。当需要监听tab显示和隐藏事件时。当您需要退出全屏时。当您需要打印当前页面时。
2023-12-05 22:31:05
90
原创 TypeScript 的高级技巧
要定义命名空间，请使用namespace关键字后跟命名空间名称。然后您可以在大括号内添加任何相关的代码。在此示例中，我们定义了一个名为的命名空间，并在其中添加一个类MyClass。请注意，我们使用export关键字使该类在命名空间外部可访问。要定义混入类，请创建一个类，该类使用构造函数签名扩展泛型类型参数。这允许混入类与其他类组合。在此示例中，我们定义了一个名为 TimestampMixin 的混入类，它添加了一个 getTimestamp 方法，该方法返回当前日期和时间。
2023-12-04 22:00:28
227
原创 JS 高级用法
在本文中，我们介绍了一些JavaScript的高级知识点，如高级数据结构和算法、函数式编程、异步编程和面向对象编程。我们还提供了一些代码示例和实战案例，让掘友们更好地理解和掌握这些技术。
2023-12-04 21:56:09
300
原创 实用的 ES6 代码片段
在我们的开发流程中，我们经常会遇到一些具有挑战性的问题，而解决这些问题可能只需要几行代码。在本文中，我试图整理出一些有用的代码片段，帮助您在处理 URL、DOM、事件、日期、用户偏好等方面时更加便捷。所有这些代码片段都是从"30 seconds of code"中精心挑选的。这是一个很棒的资源，我强烈推荐去查看更多内容。这些代码片段被筛选的主要标准是实用性。希望您能找到一些有价值的东西，可以应用到未来的代码库中。
2023-12-04 21:49:19
91
原创 HTTP缓存
需求开发中不断的往项目中添加图片、字体等这些静态资源使得项目打包体积越来越大。打包后这些静态资源占据了包体积的大部分。基于此，我们准备将静态资源从项目中移出来放到 oss 云服务上，这样项目的体积会缩小很多，打包速度也会快很多但是，想法是好的，但是具体的操作上存在一些问题需要解决：静态资源的缓存问题目录结构问题资源更新问题这篇文章我会重点分享静态资源缓存问题的解决方案。
2023-12-04 16:14:37
75
原创 大部分只使用这 14 个 Git 命令就够了
如果你的修改还没有准备好提交，但你想要切换到另一个分支继续工作，你可以使用git stash命令将修改暂存起来，以便以后使用。它将一个分支的修改合并到另一个分支中，创建一个新的提交反映合并的变化，例如git merge new-branch。如果你在之前的提交中犯了一个错误，你可以使用git revert命令创建一个新的提交，撤销之前提交引入的修改。如果你的修改还没有准备好提交，但你想要切换到另一个分支继续工作，你可以临时保存你的修改以便以后使用，并在不丢失进度的情况下切换分支。
2023-12-04 16:07:09
51
原创 XHR 和 Fetch 的区别
网站开发普遍采用前后端分离的模式，数据交互成为了不可或缺的关键环节。在这个过程中，XHR和Fetch API是两种最常见的方法，用于从 Web 服务器获取数据。XHR是一种传统的数据请求方式，而Fetch API则代表了现代 Web 开发的新兴标准。接下来，我们将一同深入学习它们的使用方法和适用场景。XMLHttpRequestXMLHttpRequest，通常简称为 XHR。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。XMLHttpReque
2023-12-04 15:59:58
644
原创 ES6 — ES14 新特性
在 JavaScript 中，通过find()和查找数组中的值是一种常见做法。不过，这些方法从数组的开始进行遍历：// {v: 4}// 3如果要从数组的末尾开始遍历，就必须反转数组并使用上述方法。这样做就需要一个额外的数组操作。findLast()和的就解决了这一问题。语义。
2023-11-23 23:47:02
727
原创 JavaScript新数组方法介绍，不更改原数据的数
前文提到，map、filter 和 concat 等方法也都采取先复制再更改的思路，但这些方法与新的复制方法间仍有不同。如果要使用 toSpliced 代替 splice，但又想获取被删除的元素，则可对原始数组应用 toSpliced 和 slice，如下所示：。其工作方式如下：。解决这个问题的方法，是先复制数组，之后再执行变异。因此，与其通过以下方式直接更改数组：。可以使用 MyArray.from 将其转回您的自定义 Array：。
2023-11-23 23:34:07
277
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人