前端优化方案
一、无损压缩图片大小,提升页面加载速度使用工具如TinyPNG压缩PNG和JPEG格式的图片,调整图片质量参数以获得最佳压缩效果。使用CSS Sprites将多个小图片合并成一张大图,减少HTTP请求,将多个...
浅谈Web实时通信-SSE(Server-Sent Events)技术及简单演示
一、什么是SSEServer-Sent Events (SSE) 是一种用于实现服务器主动向客户端推送数据的技术,也被称为“事件流”(Event Stream)。这种技术的核心思想是服务器通过HTTP连接持续推送数据到客户端...
学习笔记──React──单元测试
单元测试可以针对组件的各个部分进行测试,包括组件的渲染、状态管理、事件处理、生命周期方法等。常见的单元测试内容渲染测试:确保组件能够正确地渲染到 DOM 中。验证组件的静态输出是否符合...
学习笔记──React──端到端测试
端到端(E2E)测试是一种重要的测试方法,用于确保整个应用从用户界面到后台服务都能正常工作。对于React应用来说,E2E测试可以模拟用户行为,验证应用的各个功能模块是否协同工作。本文将详细...
前端性能优化-CSS动画性能
一、浏览器渲染流程网页的生成过程,大致可以分成五步。很快: 解析HTML【遇到标签加载图片】 —> 构建DOM树很快: 加载样式 —> 解析样式【遇到背景图片链接不加载...
学习笔记──React──搭建
方法一:使用 create-react-app 搭建 React 项目1. 确保电脑已经安装 Node.js 和 npm2. 安装 create-react-appcreate-react-app 是一个全局命令行工具,可以帮助你创建一个新的 React 项目。npx...
学习笔记──React──性能优化
常见的性能优化策略1. 使用 React.memo 优化函数组件React.memo 是一个高阶组件,可以缓存组件的输出结果,从而避免不必要的重新渲染。它类似于类组件中的 shouldComponentUpdate。它通过对比前...
学习笔记──React──依赖安装
一、一些必要的依赖# 安装 Babel 和相关插件npm install @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader# 安装 ESLint 和相关插件npm install esli...
学习笔记──React──生命周期
1. React 组件生命周期概述React 组件的生命周期可以分为三个主要阶段:挂载(Mounting):组件被创建并插入到 DOM 中。更新(Updating):组件的状态或属性发生变化。卸载(Unmounting):组件...
学习笔记──React──集成测试
集成测试(Integration Testing)在 React 应用中至关重要,通过模拟多个组件或模块之间的交互和用户行为,可以确保整个系统的稳定性和可靠性。结合 Jest 和 React Testing Library,可以编写高...

