- 博客(65)
- 收藏
- 关注
RSS订阅原创 package.json文件中的devDependencies和dependencies对象有什么区别？
摘要：package.json中的dependencies和devDependencies分别管理项目依赖。dependencies包含生产环境必需的运行时依赖，会被默认安装并打包部署；devDependencies则包含仅开发阶段需要的工具(如测试框架、构建工具等)，需通过--dev参数安装且不会被打包到生产环境。两者区分确保了开发效率与生产环境的轻量化。
2025-08-19 15:42:10
126
原创 WebSocket的连接原理
摘要：WebSocket是基于TCP的双向通信协议，通过HTTP握手建立持久连接，实现实时数据传输。其优势在于高效的双向通信能力，适用于即时通讯、在线游戏等场景。工作原理包括握手连接、建立TCP通道、双向通信和断开连接四个阶段，但需注意首次连接延迟和长连接稳定性问题。该协议在实时性、效率方面表现突出。
2025-08-19 09:42:46
155
原创 script标签中，async和defer两个属性的用途和区别分别是什么？
HTML中script标签有三种加载方式：普通script、async和defer。普通script会阻塞DOM渲染，可能造成页面白屏。defer属性使脚本在文档解析完成后顺序执行，保证执行顺序；async属性则使脚本异步加载并立即执行，执行顺序不可控。两者都能避免阻塞DOM渲染，defer适合依赖DOM的脚本，async适合独立模块。开发者应根据脚本依赖关系选择合适的加载方式。
2025-08-18 08:55:54
169
原创 对于this的理解
本文总结了JavaScript中this的绑定规则及应用场景。this的指向由函数调用方式决定，包括默认绑定（严格模式/非严格模式）、隐式绑定（对象方法）、显式绑定（call/apply/bind）、new绑定（构造函数）和箭头函数（词法作用域）。在React类组件中需手动绑定this（构造函数绑定或使用箭头函数），Vue组件则自动绑定实例。常见问题包括事件处理函数和回调中的this丢失，解决方案包括绑定this或使用箭头函数。核心原则是普通函数的this由调用方式决定，箭头函数的this由定义时的作用域决
2025-08-10 16:10:02
255
原创 什么是“三次握手”、“四次挥手”？
摘要：TCP连接通过三次握手建立，确保双方可靠通信。三次握手防止无效连接和资源浪费：客户端发送SYN，服务端回复SYN+ACK，客户端确认ACK。断开连接采用四次挥手：客户端发送FIN，服务端ACK后处理数据再发FIN，客户端确认后进入TIME-WAIT状态等待2MSL（最大报文生存时间），确保服务端收到最终ACK。这些机制保障了TCP连接的可靠性和资源有效释放。
2025-08-10 10:13:14
505
原创 从输入网址到页面显示的过程是什么？
输入www.google.com网址后，首先在本地的域名服务器中查找，没找到去根域名服务器查找，没有再去com顶级域名服务器查找，，如此的类推下去，直到找到IP地址，然后把它记录在本地，供下次使用。客户端发送一个FIN，用来关闭客户端到服务器的数据传送，也就是客户端告诉服务器：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，客户端依然会重发这些数据)，但是，此时客户端还可以接受数据。同样，撤销TCB后，就结束了这次的TCP连接。
2025-08-10 09:24:58
461
原创 SSR, SSG, ISR三者的区别（简单明了）
本文对比了三种前端渲染技术：SSR（服务器端渲染）在每次请求时实时生成HTML，内容最新但TTFB受影响；SSG（静态站点生成）在构建时预生成所有页面，性能最优但内容需重新构建更新；ISR（增量静态再生）是Next.js的折中方案，先静态生成再按需更新。三者区别在于：SSR即来即做，SSG提前全做，ISR先做后补。
2025-08-09 20:45:11
181
原创 闭包导致的内存泄漏问题及解决方案
摘要：闭包引用外部变量可能导致内存泄漏，因为这些变量不会被垃圾回收器回收。当闭包持有大量数据时，即使外部函数执行完毕，这些数据仍被保留。解决方案包括手动释放引用（设为null）或使用弱引用（WeakMap/WeakSet）。垃圾回收器通过标记-清除（标记可达对象后清除未标记的）、引用计数（计数归零时回收）及代际回收（分新生代/老年代管理）机制回收内存。合理管理闭包引用可避免内存泄漏问题。（149字）
2025-08-09 20:38:05
179
原创 为什么React需要fiber架构，而Vue却不需要
React采用Fiber架构实现异步渲染和任务优先级调度，支持中断恢复机制和增量更新，提升复杂界面的性能表现。而Vue基于不同的响应式系统设计，通过更简洁的机制实现高效渲染，无需类似Fiber架构。两种框架分别针对不同设计目标采取了最优解决方案，React侧重灵活性和性能优化，Vue更注重开发体验和简洁性。
2025-08-09 09:01:28
78
原创 HTTP状态码详解
HTTP状态码分为五大类：1xx信息性状态码表示请求正在处理；2xx成功状态码（如200、204、206）表示请求被正常处理；3xx重定向状态码（如301永久重定向、302临时重定向）表示需要额外操作；4xx客户端错误状态码（如400请求错误、404资源不存在）表示客户端请求有问题；5xx服务器错误状态码（如500服务器内部错误、503服务不可用）表示服务器处理请求出错。不同状态码对应不同的请求处理情况和后续操作指引。
2025-08-07 18:12:00
442
原创 transition和animation的区别（简短）
CSS中transition和animation都用于实现动画效果，但工作原理不同。transition需要事件触发（如鼠标悬停），只能在起始和结束状态间过渡。animation则无需触发事件，可自动执行并循环，通过@keyframe定义多个关键帧实现复杂动画。两者都类似于Flash的补间动画，但animation提供更灵活的动画控制。
2025-08-07 15:54:41
70
原创 什么是requestIdleCallback？
requestIdleCallback是浏览器提供的API，能在主线程空闲时执行非关键任务，优化网页性能。它通过将耗时任务（如复杂计算、大量DOM渲染）延迟到浏览器空闲期处理，避免阻塞主线程，提升交互流畅度。使用时需传入回调函数，该函数接收IdleDeadline对象，开发者可根据剩余时间决定任务执行策略。该API能有效减少资源浪费，显著提高Web应用响应速度。
2025-08-07 10:44:34
198
原创 什么是防抖和节流？
防抖和节流是优化高频事件处理的两种技术。防抖（Debounce）在连续触发时只执行最后一次（如搜索联想），节流（Throttle）则固定执行频率（如滚动加载）。防抖适用于等待操作结束（输入停止、窗口调整），节流适合控制执行节奏（按钮防重、鼠标移动）。两者都能有效提升性能，需根据场景选择使用。
2025-08-07 10:05:02
154
原创 SEO的原理是什么？
摘要：搜索引擎优化分为四个核心步骤：1.爬行抓取（蜘蛛程序跟踪链接发现新页面）；2.索引建立（分解网页内容存入数据库）；3.搜索词处理（分词、纠错等实时分析）；4.结果排序（复杂算法计算相关性并过滤）。整个过程从发现网页到返回结果仅需数秒，但涉及海量数据处理和实时计算，其复杂性远超表面所见。反向链接是SEO的基础，直接影响网页被发现和排名的可能性。
2025-08-07 09:22:14
156
原创 什么是低代码？
摘要：低代码开发平台（LCDP）通过可视化拖拽方式实现快速应用开发，分为面向开发人员的模型驱动和面向业务人员的表单驱动两种技术路线。低代码起源于20世纪80年代的可视化编程概念，2014年正式提出，2018年进入爆发期。其优势在于降低开发门槛、提升效率，适用于企业数字化场景，但无法替代传统复杂软件开发。据预测，到2024年低代码将占应用开发总量的65%以上，成为企业数字化转型的重要工具。
2025-08-05 18:53:58
281
原创 TCP和UDP的区别是什么？
TCP与UDP是两种主要的网络传输协议。TCP面向连接，保证数据可靠传输，但开销大、速度慢，适合文件传输等场景；UDP无连接，不保证可靠性，但开销小、速度快，适合音视频、游戏等实时应用。两者在连接方式、可靠性、开销、速度和适用场景等方面存在显著差异。实际应用中需根据具体需求选择合适的协议。
2025-08-05 10:37:03
164
原创 Vue中computed和watch的区别
Vue中watch和computed都基于依赖追踪机制，但使用场景不同：computed用于数据依赖计算，当依赖值变化时自动更新结果并缓存；watch用于监听数据变化执行特定业务逻辑，支持异步但不缓存。computed适合处理模板复杂表达式和数值计算，watch适合处理数据变化时的特殊操作和异步任务。主要区别在于computed有缓存且必须返回计算值，而watch可执行任意操作且支持新旧值对比。
2025-08-05 09:50:41
187
原创 HTML、XML、XHTML的区别是什么？（简短）
XHTML：可扩展的超文本标记语言，基于XML，作用与HTML类似，但语法更严格。HTML：超文本标记语言，是语法较为松散的、不严格的Web语言。XML：可扩展的标记语言，主要用于存储数据和结构，可扩展。
2025-08-05 09:22:05
107
原创 HTTPS有哪些优点
3.HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，相比于HTTP，HTTPS可以提供更加优质保密的信息，保证了用户数据的安全性，此外HTTPS同时也一定程度上保护了服务端，使用恶意攻击和伪装数据的成本大大提高。2.HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比HTTP协议安全，可防止数据在传输过程中不被窃取、修改，确保数据的完整性。1.使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器。
2025-08-04 22:07:57
158
原创 为什么React需要Fiber架构，而Vue不需要
React引入Fiber架构实现异步渲染和任务优先级调度，通过中断恢复机制和增量更新提升性能。Vue因采用不同的响应式系统，无需类似架构，更注重开发简洁性。两者设计各有侧重，React强调性能优化，Vue侧重开发体验。
2025-08-04 15:38:58
101
原创 script标签放在header里和放在body底部里有什么区别？
摘要：脚本标签放置在<head>中会阻塞页面渲染但确保脚本优先执行，适合关键初始化代码；放在<body>底部可提升加载速度，但延迟脚本执行。现代方案推荐使用defer（异步下载，DOM解析后执行）或async（异步下载并立即执行）属性平衡性能与功能需求，前者适合依赖DOM的脚本，后者适用于独立脚本。合理选择位置和属性能优化用户体验与页面性能。
2025-08-04 15:00:29
331
原创 强缓存和协商缓存分别是什么？
**摘要：**浏览器缓存通过本地存储访问过的资源副本，提升性能并减少服务器压力。缓存分为强缓存和协商缓存：强缓存通过Expires或Cache-Control（优先级更高）判断资源是否可用，命中时直接读取缓存（状态码200/304）；协商缓存则通过Last-Modified/If-Modified-Since或ETag/If-None-Match与服务器通信验证资源是否变更，未变更返回304，否则返回新资源并更新缓存字段。ETag基于哈希值更精准，而Last-Modified依赖时间戳可能因时钟偏差失效。
2025-08-03 18:48:55
511
原创 async/await和Promise之间的关系是什么？（补充）
Promise是异步操作代理对象，允许绑定成功/失败处理方法。async/await是ES2017语法糖，基于Promise实现：async函数返回Promise，其内部await会暂停执行直到Promise状态变更。无await时async函数直接返回resolved/rejected状态的Promise；有await时返回pending状态的Promise，其resolve/reject决定后续执行流程。await会获取Promise结果或抛出异常，实现类似同步的异步编程体验。
2025-08-03 16:11:55
183
原创 WebSocket和HTTP的区别
3.在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，如果客户端再次访问这个服务器上的网页，会继续使用这一条已经建立的连接。当客户端将HTTP请求发送到服务器时，客户端和服务器之间将打开TCP连接，并且在收到响应后，TCP连接将终止，每个HTTP请求都会建立单独的TCP连接到服务器，例如如果客户端向服务器发送10个请求，则将打开10个单独的HTTP连接，并在获得响应后关闭。1.HTTP协议的长连接和短连接，实质上是TCP协议的长连接和短连接。
2025-08-03 15:25:03
335
原创 行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
HTML元素主要分为行内元素、块级元素和空元素三类。行内元素（如span、a、img）不独占一行，常用于文本格式化或插入内容；块级元素（如div、p、h1-h6）独占一行，用于内容分组和布局；空元素（如br、img、input）没有闭合标签，用于特定功能。HTML5允许空元素使用自闭合语法（如<br/>）。这些元素类型共同构成了HTML文档的基本结构。
2025-08-03 10:10:00
128
原创 什么是DOM和BOM？
DOM和BOM是JavaScript操作网页和浏览器的核心模型。DOM将HTML/XML文档表示为树状对象结构，通过document对象操作页面元素。BOM以window对象为核心，控制浏览器窗口行为，包含location、history、navigator等子对象。DOM专注于文档内容操作，BOM处理浏览器交互功能，二者共同构成前端开发的基础。
2025-08-02 21:24:51
207
原创 什么是CDN？
CDN（内容分发网络）是一种基于边缘服务器的智能虚拟网络，通过分布式节点和负载均衡技术，使用户就近获取内容，从而提升访问速度、降低延迟。其核心技术包括内容存储与分发机制，能够有效缓解网络拥堵问题，优化用户体验。
2025-08-02 21:14:24
89
原创 什么是WebSocket？
WebSocket是HTML5提供的全双工通信协议，基于TCP并复用HTTP握手通道。相比HTTP，其主要优势包括：1)支持双向实时通信；2)更好的二进制数据处理能力；3)协议头开销小（2-10字节）；4)支持自定义扩展和子协议。这些特性使WebSocket在实时性、效率和可扩展性方面表现更优。
2025-08-02 21:10:59
211
原创 对于前端闭包的详细理解
JavaScript闭包是指内部函数访问外部函数变量的特性。其优点包括数据封装、状态保持和模块化开发，缺点则是内存消耗大、性能稍差和调试复杂。适用场景涵盖模块化、柯里化、事件处理等。实现原理基于词法作用域和垃圾回收机制，当内部函数保持外部引用时，变量不会被释放。面试时可从定义、特点、优缺点及应用场景等方面简明回答，突出其"函数嵌套+变量访问+内存保持"的核心特征。
2025-08-01 22:04:46
426
原创 深度SEO优化的方式有哪些，从技术层面来说
深度SEO优化涉及多项技术策略，包括网站结构优化、速度提升（压缩文件/CDN）、页面渲染技术（SSR）、URL与链接优化、Schema标记应用、XML网站地图提交、Robots.txt设置、HTTPS加密部署以及移动端适配等。这些技术手段协同作用，能有效提升网站在搜索引擎中的可见性和排名，需根据具体情况针对性实施。
2025-08-01 21:30:06
294
原创 git pull和git fetch的区别
摘要：git pull和git fetch都是用于从远程仓库更新本地代码的Git命令，但工作方式不同。git fetch仅下载远程变更到本地副本，不自动合并；git pull则是fetch后自动合并到当前分支。fetch更安全，允许查看变更后再决定是否合并；pull更直接，但可能引发需要手动解决的合并冲突。根据需求选择使用：仅查看变更用fetch，快速更新用pull。
2025-08-01 20:30:32
216
原创 从React层面上，能做的性能优化有哪些？
本文介绍了10种React性能优化方法：1）使用React.memo/useMemo记忆化；2）类组件中使用shouldComponentUpdate/PureComponent；3）用React.lazy实现按需加载；4）列表虚拟化技术；5）合理使用useCallback/useRef；6）设置唯一key值；7）借助Profiler分析性能；8）开发环境开启StrictMode；9）减少组件嵌套层级；10）组件拆分。这些方法从渲染控制、资源加载、代码结构等方面提升React应用性能。
2025-08-01 15:10:42
128
原创 小程序的双线程分别是什么？
小程序采用双线程设计，渲染线程负责界面显示与用户交互，逻辑线程处理业务计算与数据请求。两线程独立运行、互不阻塞，通过微信客户端进行通信，既提升了响应速度又避免界面卡顿。这种分离架构实现了高效渲染与流畅交互的平衡，是小程序性能优化的核心设计。
2025-08-01 13:03:01
202
原创 什么是CI/CD？
CI/CD是现代软件开发中的关键实践，包含持续集成(CI)和持续交付/部署(CD)两个部分。CI通过频繁代码集成和自动化测试，确保早期发现问题；CD在此基础上实现自动化交付流程，将软件可靠地部署到生产环境。这套方法通过自动化流程提高了开发效率和质量，使团队能快速交付新功能，已成为软件开发的标准实践。
2025-08-01 09:58:43
172
原创 对于前端工程化的理解
前端工程化通过标准化和自动化提升开发效率与代码质量。主要包括模块化拆分、自动化构建（Webpack等工具）、自动化测试（Jest等框架）、CI/CD部署（Jenkins等）以及代码规范管理（ESLint等）。这种现代化开发方式能有效降低维护成本，适应不同规模项目需求，在快速变化的技术环境中保持竞争力。
2025-07-31 21:38:31
256
原创 Webpack中Loader和Plugin的区别是什么？
摘要：Webpack中Loader和Plugin作用不同，Loader让Webpack能处理非JS文件，在module.rules中配置；而Plugin扩展Webpack功能，监听构建事件改变输出结果，在plugins数组中单独配置。两者分别通过test/loader选项和构造函数参数来使用。
2025-07-31 20:54:38
139
原创 Webpack中的module、bundle、chunk分别是什么？
Webpack中的三个核心概念：module（单个文件）、bundle（最终输出文件）和chunk（逻辑代码块）。module是基础单元，bundle是打包结果，chunk是依赖模块组。Webpack根据入口文件和模块依赖生成bundle，通过代码分割形成chunk，实现按需加载。理解三者关系有助于优化构建流程和性能。
2025-07-31 15:37:49
337
原创 瀑布流是什么？
摘要：构建响应式布局的三种方案：1)Grid布局通过grid-template-columns、grid-auto-rows和gap属性实现自适应列宽和行高；2)Flex布局配合flex-wrap和动态高度JS实现瀑布流；3)Column-count方案需结合绝对定位和JS实时计算。性能优化措施包括：IntersectionObserver懒加载、虚拟滚动、防抖resize处理、CSS硬件加速和渐进式图片加载，推荐使用imagesLoaded库确保高度计算准确。（149字）
2025-07-24 19:51:39
242
原创 从输入URL到页面渲染的流程
摘要：用户在浏览器输入网址后，首先进行DNS解析获取IP地址，可能通过CDN就近访问。浏览器通过TCP三次握手建立连接，HTTPS还会进行TLS加密。发送HTTP请求后，服务器返回响应，浏览器解析HTML构建DOM树，结合CSS生成渲染树并绘制页面。同时加载图片、JS等资源，JS执行可能触发异步请求更新页面内容。整个过程涉及网络连接、资源加载和页面渲染等多个环节。（148字）
2025-07-22 20:05:16
307
原创 后端传大数据如何减少渲染负担
本文总结了处理大数据量的前端性能优化方案：1）数据分页采用传统分页、无限滚动或虚拟滚动技术；2）数据优化方面建议压缩传输数据；3）前端渲染通过WebWorkers多线程和分批渲染提升性能；4）合理运用本地和服务端缓存；5）服务端采用流式传输和GraphQL精确获取数据。这些方法可有效降低数据传输量，提升页面响应速度，改善用户体验。
2025-07-19 18:20:20
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人