- 博客(19)
- 收藏
- 关注
RSS订阅原创 稳定性保障-前端
模拟用户操作，自动化测试 UI & 交互。前端稳定性保障是确保应用在各种环境下都能。：无头浏览器，测试 SSR & SEO。：测试核心逻辑（例如：函数、工具库）。：测试 React 组件渲染是否正确。（Lazy Load），减少首屏体积。：保证代码风格 & 语法规范。：新功能灰度上线，减少影响面。：两个环境切换，避免全量崩溃。：检测页面性能、可访问性。，静态资源放在全球节点。，减少线上 bug。：分析网页加载瓶颈。：提前发现类型错误。，避免升级导致异常。
2025-03-06 20:43:27
396
原创 WebSocket相关技术
• WebSocket 是一种强大的协议，适用于实时双向通信场景，如即时消息、实时股票数据等。• WebSocket 在现代 Web 和移动应用中广泛使用，能有效减少请求和响应的延迟，提升用户体验。• 使用 WebSocket 时要小心内存管理，确保在不需要的时候关闭连接，避免造成资源浪费。
2025-02-27 20:55:23
1028
原创 React Native 原理
React Native 的基本原理是利用JavaScript 线程和原生线程进行通信，构建跨平台的原生应用。具体来说，它采用了虚拟 DOM和桥接机制，使得 JavaScript 代码与原生 UI 组件能够相互协调和交互。React Native 的原理通过 JavaScript 和原生代码之间的桥接实现了跨平台的能力。它通过将业务逻辑与 UI 渲染分开，采用虚拟 DOM 和异步执行机制，能够在 iOS 和 Android 上以接近原生的性能和体验运行。
2025-02-27 10:44:22
981
原创 react native和react、H5的区别
React 是一个用于构建用户界面的 JavaScript 库，专注于构建 UI 组件。它允许开发者创建单页应用（SPA）和复杂的前端应用。•。
2025-02-26 15:55:13
757
原创 动画了解多少
动画是前端开发中不可或缺的一部分，通过提升 UI 的交互性和表现力，可以增强用户体验。在 React 和 React Native 中，我们可以通过多种方式（如 CSS 动画、JavaScript 动画、Lottie 动画等）来实现丰富的动画效果。动画的流畅性和性能非常重要，优化动画性能是实现良好用户体验的关键。
2025-02-26 15:10:44
889
原创 iconfont和TTF
在 React Native 中，我们可以使用第三方库（如 react-native-vector-icons）来轻松使用图标。是一种通过字体文件（如 TTF、OTF 格式）来展示图标的技术，主要优点是图标的可缩放性和样式的灵活性。：通过第三方库（如 react-native-vector-icons）使用 IconFont 图标。：谷歌推出的图标库，可以通过类似的方式在 Web、React 和 React Native 中使用。在 React 中，可以通过 react-icons 或自己集成的。
2025-02-26 14:18:02
621
原创 浏览器基础概览
XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
2025-02-19 10:13:13
828
原创 网络基础了解多少
的方式，第一次浏览器发送请求给服务器，服务器收到后 发送一个认证，带有公钥和数据验签给浏览器，浏览器内部含有认证公司的公钥，将其hash 后再用认证公司的公钥加密。发现和数据验签的值一样，确认了服务器发送的公钥是对的。采用了二进制帧结构，语法、语义与 HTTP 完全不兼容，相比http/2，WebSocket更侧重于“实时通信”，而HTTP/2 更侧重于提高传输效率，所以两者的帧结构也有很大的区别。从上图可见，websocket服务器与客户端通过握手连接，连接成功后，两者都能主动的向对方发送或接受数据。
2025-02-19 10:10:30
654
原创 简单小算法 写起来（前端同学）
否则，返回 false。结果：['河南', '信阳', '商城', '固始', '南阳', '镇平', '新野', '安徽', '六安', '金寨', '霍邱', '合肥', '肥东', '肥西']对于下标 4 ，出现在下标 3 和下标 5 处的 'e' 都离它最近，但距离是一样的 abs(4 - 3) == abs(4 - 5) = 1。输入：nums1 = [1,2,3,2,1], nums2 = [3,2,1,4,7]输入：nums = [-2,1,-3,4,-1,2,1,-5,4]
2025-02-08 20:18:36
685
原创 性能优化一览
但对于使用频率并不高的第三方库，就需要按实际情况灵活判断，例如项目中只有某个页面 A 接入了 Three.js，如果将这个库跟其它依赖打包在一起，那用户在访问其它页面的时候都需要加载 Three.js，最终效果可能反而得不偿失，这个时候可以尝试使用异步加载功能将 Three.js 独立分包。在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。所以我们需要有合理的分包策略。
2025-02-08 20:17:21
766
原创 React基础了解一下
说是讲React的合成事件，实际上讲了React的事件系统。做下总结：事件注册；事件监听；事件合成；事件派发；事件系统流程：在React代码执行时，内部会自动执行事件的注册；第一次渲染，创建fiberRoot时，会进行事件的监听，所有的事件通过addEventListener委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数；
2025-02-08 20:15:00
741
原创 JavaScript 了解多少
1.对于基本类型，除 null 以外，均可以返回正确的结果。2.对于引用类型，除 function 以外，一律返回 object 类型。3.对于 null ，返回 object 类型。4.对于 function 返回 function 类型。由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。忽略图片等资源加载情况，只考虑页面主要 DOM只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容。
2025-02-08 20:09:32
695
原创 手机适配之媒体查询
/适配iPhone XR/@media only screen and (device-width: 375px) and (device-height: 812px) { .p_privileges .ui_page_title{ width: 100%;font-size: 18px;height: 45px;line-height: 45px;text-align:...
2018-12-18 14:09:40
467
原创 react 中监听scroll
1. dom.addEventListener('scroll', this.orderScroll.bind(this)); orderScroll() { / ****** / } 1.document.body.clientWidth //浏览器窗口的宽度 2.div.clientWidth //div的宽度 3.div.offsetLef...
2018-12-18 14:06:09
3640
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人