前端知识点
文章平均质量分 85
学习㇐种方案或者技术,需要自己动手总结,定期复习,强化记忆。
星辰迷上大海
饮水思源,行胜于言。这盛世如你所愿!运动使我健康,旅行使我记忆,学习让我懂得思考。
展开
-
前端JavaScript篇之禁止F12、禁止右键、屏蔽复制、屏蔽剪切、禁止选中、检测开发者工具、拒绝另存、禁止缓存
这些措施可以帮助保护网站内容和提升用户体验,但应该谨慎使用,避免影响正常用户操作和网站性能。原创 2024-05-18 07:45:00 · 883 阅读 · 0 评论 -
前端之seturlParams、randomString、Math.random()、Crypto.getRandomValues()相关知识点
当你需要在 JavaScript 中操作 URL 参数时,你可以使用 seturlParams 函数来轻松添加、修改或删除 URL 参数。结合 randomString 函数,你可以生成随机字符串,这在创建临时标识符或验证令牌时非常有用。原创 2024-05-17 08:15:00 · 898 阅读 · 1 评论 -
前端JavaScript篇之indexOf方法:用于查找数组中元素索引的方法之一
JavaScript的indexOf()方法用于查找数组中指定元素的位置。它接受一个参数,即要查找的元素,并返回该元素在数组中第一次出现的索引。如果数组中不包含该元素,则返回-1。原创 2024-05-17 07:45:00 · 267 阅读 · 0 评论 -
前端性能优化篇之如何对项目中的图片进行优化?常见的图片格式及使用场景
在项目中对图片进行优化是提高网站性能和用户体验的重要步骤。原创 2024-04-30 07:45:00 · 539 阅读 · 0 评论 -
前端性能优化篇之对节流与防抖的理解、如何实现节流函数和防抖函数
节流和防抖是优化前端性能和提升用户体验的两种技术。节流控制函数在一定时间间隔内最多执行一次特定操作,常用于处理频繁触发的事件;而防抖延迟执行函数,在一段时间内只执行一次特定操作,常用于处理连续触发的事件。原创 2024-04-29 07:45:00 · 471 阅读 · 0 评论 -
前端性能优化篇之回流与重绘的概念及触发条件、如何避免回流与重绘?如何优化动画?documentFragment 是什么?用它跟直接操作 DOM 的区别是什么?
回流和重绘是与网页性能优化密切相关的概念。回流是指浏览器重新计算元素的位置和大小,然后重新绘制页面的过程,而重绘是指在元素样式改变但不影响其布局的情况下,浏览器重新绘制元素的过程。原创 2024-04-28 07:45:00 · 692 阅读 · 0 评论 -
前端性能优化篇之懒加载的概念、特点、实现原理、懒加载与预加载的区别
懒加载是一种网页优化技术,其概念是延迟加载页面中的资源,特点是在用户需要访问时才加载,可以减轻初始加载压力和节省带宽。原创 2024-04-27 07:45:00 · 1603 阅读 · 0 评论 -
前端性能优化篇之CDN的概念、作用、原理、使用场景
CDN(内容分发网络)是一种通过部署位于全球各地的服务器,将网站的静态资源缓存在这些服务器上,并根据用户位置和服务器负载将用户请求路由到最近的服务器上,从而加速网站内容的传输,提高网站性能和用户体验。它的作用是加速网站的加载速度,降低网络延迟,减轻原始服务器压力,提供流媒体分发、软件分发、API请求加速等功能。原创 2024-04-26 07:45:00 · 508 阅读 · 0 评论 -
设置Mac上Git的多账户配置,用于同时访问GitLab和Gitee
这里的 “Your Name” 和 “[email protected]” 应该替换为你在 GitLab 和 Gitee 上注册的用户名和邮箱。这里的 “[email protected]” 应该替换为你在 GitLab 和 Gitee 上注册的邮箱。通过这些步骤,您可以在 Mac 上成功配置多个 Git 账户,以便同时访问 GitLab 和 Gitee 上的项目。在每个 Git 仓库中,你可以设置不同的用户名和邮箱。应该替换为你生成的 SSH 密钥的文件名。原创 2024-04-24 20:59:16 · 653 阅读 · 4 评论 -
参数(Parameters)在前端开发中的使用及相关知识:函数参数、回调函数和函数中的问题、常见的参数传递类型、传参方式有哪些?axios传参、传参出现参数异常、接口管理工具、请求方法
参数(Parameters)是在计算机编程和前端开发中用来传递数值、引用或者设置的特殊变量,它们允许我们向函数或者程序传递信息,以便进行相应的处理。原创 2024-04-21 07:45:00 · 1032 阅读 · 0 评论 -
Vue的性能优化常用的有哪些?
Vue性能优化包括减少数据量、合理使用v-if和v-for、懒加载组件和图片、优化路由、缓存、压缩代码、骨架屏等。同时需注意对象层级不宜过深、合理使用computed和watch、避免内存泄漏。整合这些方法可以显著提升Vue应用性能。原创 2024-04-07 07:45:00 · 724 阅读 · 0 评论 -
前端Vue篇之vue3 ref 能处理对象了?
使用 ref 来处理对象是完全可行的,只是它的工作方式与处理基本数据类型有所不同。如果你需要一个响应式的对象,并且希望对象内部的修改能够触发更新,那么使用 reactive 更加合适。如果你只是需要一个对象的引用,并且可以接受通过替换整个对象来触发更新,那么使用 ref 就足够了。原创 2024-03-30 09:44:08 · 720 阅读 · 0 评论 -
前端JavaScript篇之JavaScript 深浅拷贝?
浅拷贝只复制对象或数组的第一层内容,当原始数据改变时,浅拷贝的数据也会受影响;而深拷贝会递归复制所有层级的内容,确保复制的对象或数组与原始数据完全独立,不会相互影响。原创 2024-03-21 07:45:00 · 347 阅读 · 0 评论 -
前端Vue篇之Vue3响应式:Ref和Reactive
Ref适用于简单数据管理,如计数器,通过.value访问和修改数据;而Reactive适合处理复杂对象数据,使整个对象都变成响应式,方便管理对象属性的变化。原创 2024-03-22 07:45:00 · 2171 阅读 · 3 评论 -
前端之各浏览器间差异和平台的兼容性问题
浏览器间差异和平台的兼容性问题即不同浏览器和操作系统对网页技术的支持有差异,需要针对不同环境编写兼容性代码以保证网页在各种浏览器和平台上正常运行。原创 2024-03-20 07:45:00 · 1082 阅读 · 0 评论 -
前端React篇之React Hook 的理解及实现原理
React Hooks 是一种让函数组件拥有状态和副作用处理能力的特性。它的实现原理基于 React 的 Fiber 架构和 JavaScript 的闭包机制,通过 Hooks 链表来管理组件的状态和副作用。原创 2024-03-19 08:15:00 · 1296 阅读 · 0 评论 -
前端之Dva 和 Umi
Dva和Umi都是基于React的前端开发框架。Dva是一个基于Redux和React-Router的轻量级框架,提供了简洁的数据流方案和路由管理;而Umi是一个可插拔的企业级前端应用框架,内置了路由、构建、部署等功能,让前端开发更高效。原创 2024-03-19 07:45:00 · 980 阅读 · 0 评论 -
前端React篇之Redux 和 Vuex 的区别及共同思想
Redux和Vuex都是用于管理应用程序状态的工具,Redux是为React设计的,而Vuex是为Vue设计的。原创 2024-03-17 08:15:00 · 521 阅读 · 0 评论 -
前端React篇之React的生命周期有哪些?
React的生命周期包括几个重要阶段:首先是挂载阶段,包括constructor构造函数、render渲染方法和componentDidMount挂载完成方法;接着是更新阶段,涵盖shouldComponentUpdate、render和componentDidUpdate方法;最后是卸载阶段,包括componentWillUnmount方法。原创 2024-03-17 07:45:00 · 1168 阅读 · 0 评论 -
前端React篇之对 Redux 的理解,主要解决什么问题?Redux 原理及工作流程
Redux是一个用于管理应用程序状态的工具,主要解决了在大型前端应用中状态管理变得复杂和混乱的问题。原创 2024-03-16 10:44:18 · 1057 阅读 · 0 评论 -
前端React篇之组件通信的方式有哪些?父子组件的通信方式?跨级组件的通信方式?非嵌套关系组件的通信方式?如何解决 props 层级过深的问题?
在React中,组件通信的方式有多种:父子组件的通信可以通过props传递数据和回调函数来实现,父组件通过props向子组件传递数据,子组件通过回调函数将数据传递回父组件;原创 2024-03-16 07:45:00 · 986 阅读 · 0 评论 -
前端React篇之React-Router的实现原理是什么?React-Router的路由有几种模式?
React Router 的实现原理:它通过监听 URL 的变化,然后渲染相应的组件,从而实现页面之间的切换和跳转。原创 2024-03-15 08:15:00 · 1055 阅读 · 0 评论 -
前端React篇之setState和replaceState的区别是什么?React组件的state和props有什么区别?React中的props为什么是只读的?
在React中,setState和replaceState都是用于更新组件状态的方法,它们之间的主要区别在于更新方式。setState会通过浅合并的方式更新状态对象,只更新部分状态而保留其余不变,而replaceState会直接替换整个状态对象为新的状态对象。setState更符合React设计理念且推荐使用,而replaceState已被标记为过时方法,不建议在新代码中使用。原创 2024-03-15 07:45:00 · 872 阅读 · 0 评论 -
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
React中的setState方法是用于更新组件状态的重要方法。当setState被调用时,React会将新的状态放入组件的状态队列中,并在适当的时机进行批处理更新,以提高性能。原创 2024-03-14 08:15:00 · 1492 阅读 · 2 评论 -
一篇文章带你掌握Flex 布局:语法、实例
Flex布局是一种强大的CSS布局模型,通过简单的语法和灵活的属性设置,可以实现各种复杂的页面布局。其基本语法包括将容器设置为display: flex;,然后通过设置不同的flex属性来控制子元素的布局。原创 2024-03-14 07:45:00 · 1447 阅读 · 0 评论 -
前端JavaScript篇之常见事件
JavaScript中的事件是指用户与网页元素交互时所触发的动作或者状态变化。这些事件可以包括点击、悬停、键盘输入、页面加载等。原创 2024-03-13 08:15:00 · 998 阅读 · 0 评论 -
数据存储Cookie、SessionStorage、LocalStorage的了解和区别、二次封装一个 loaclStorage 的 hooks 时,需要考虑哪些问题呢?
cookie、sessionStorage 和 localStorage 是在客户端存储数据的三种主要方式,它们之间的区别主要在于存储位置、存储大小、数据共享、数据类型、生命周期和应用场景。当我们二次封装一个 localStorage 的 hooks 时,需要考虑以下问题: 数据类型、数据同步、数据共享数据安全、、数据清理等问原创 2024-03-13 07:45:00 · 1881 阅读 · 0 评论 -
使用npm安装依赖时遇到速度慢的问题,通常有几种解决方法?
1. 使用淘宝镜像或cnpm:淘宝镜像是一个 npm 镜像,可以提供快速的下载速度。原创 2024-03-12 10:08:28 · 1800 阅读 · 0 评论 -
前端React篇之类组件与函数组件有什么异同?
React类组件和函数组件是创建组件的两种不同方式。类组件使用类语法创建,可以管理状态和使用生命周期方法,适合处理复杂的逻辑。原创 2024-03-09 08:15:00 · 352 阅读 · 0 评论 -
前端React篇之React中什么是受控组件和非控组件?
在React中,受控组件和非控组件是用于处理表单元素的两种不同的方式。受控组件(Controlled Component)是指通过React的状态(state)来控制表单元素的值和状态。我们将表单元素的值存储在组件的状态中,并通过事件处理程序来更新状态。这种方式使得React具有对表单值的完全控制权,可以实时验证、处理和响应表单的变化。原创 2024-03-09 07:45:00 · 1690 阅读 · 0 评论 -
前端React篇之对有状态组件和无状态组件的理解及使用场景
有状态组件用于处理具有内部状态和复杂逻辑的组件,而无状态组件则更适合作为纯展示组件,专注于UI的呈现。在实际开发中,根据组件的功能和需求选择合适的组件类型非常重要。原创 2024-03-08 08:15:00 · 959 阅读 · 0 评论 -
前端React篇之哪些方法会触发 React 重新渲染?重新渲染 render 会做些什么?
在React中,组件的重新渲染可以通过setState()、forceUpdate()、props或state的改变、父组件的重新渲染以及context的改变来触发。当组件重新渲染时,React会执行render方法,生成新的虚拟DOM树原创 2024-03-08 07:45:00 · 1256 阅读 · 0 评论 -
前端React篇之React 高阶组件、Render props、hooks 有什么区别,为什么要不断迭代
高阶组件(HOC)、渲染属性(Render Props)和Hooks是React中用于代码复用和状态管理的不同方式。它们各有优势,不断迭代是为了提供更灵活、简洁的解决方案,满足不同开发需求。原创 2024-03-07 08:15:00 · 435 阅读 · 0 评论 -
前端React篇之React 事件机制
React事件机制简化了事件处理,通过JSX绑定事件、提供合成事件对象、支持事件委托等方式,使事件处理更方便、性能更高。原创 2024-03-07 07:45:00 · 442 阅读 · 0 评论 -
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑,比如权限验证、全局加载状态等。原创 2024-03-06 08:15:00 · 1129 阅读 · 0 评论 -
前端Vue篇之如何获取页面的hash变化、`$route` 和`$router` 的区别、params和query的区别
获取页面的hash变化:通过监听 hashchange 事件,可以实时获取页面哈希的变化。使用 window.location.hash 可以读取当前哈希值。原创 2024-03-06 07:45:00 · 1885 阅读 · 0 评论 -
前端Vue篇之Vue-Router 的懒加载如何实现、如何定义动态路由?如何获取传过来的动态参数?
懒加载:在Vue Router中,使用懒加载可以通过import函数和Webpack的代码分割功能来实现。这意味着只有在需要时才会加载相应的组件,而不是一次性加载所有组件。原创 2024-03-05 08:15:00 · 1302 阅读 · 0 评论 -
前端Vue篇之Vue 3.0 中的 Vue Composition API?Composition API与React Hook很像,区别是什么
Vue 3.0 中的 Composition API 和 React Hooks 都是用于在函数式组件中管理状态和逻辑的工具,它们有相似之处,但也有一些区别。原创 2024-03-05 07:45:00 · 2036 阅读 · 0 评论 -
前端Vue篇之Vuex的严格模式是什么,有什么作用,如何开启?如何在组件中批量使用Vuex的getter属性、pinia与vuex有什么区别?
Vuex的严格模式是一种开发模式,用于监测状态的修改,帮助开发者发现对状态的非法修改,提供警告信息,以便更好地理解状态变化。开启严格模式后,Vuex会警告非法状态修改,帮助开发者维护应用的状态变化,提高代码质量。原创 2024-03-04 08:15:00 · 956 阅读 · 0 评论 -
前端Vue篇之Vuex和单纯的全局对象有什么区别?如何在组件中重复使用Vuex的mutation、为什么 Vuex 的 mutation 中不能做异步操作?
Vuex 和单纯的全局对象区别在于 Vuex 提供了更完善和可靠的状态管理方案。它包含了状态管理、响应式特性、组件通信和插件机制等功能,而单纯的全局对象则缺乏这些。原创 2024-03-04 07:45:00 · 2151 阅读 · 0 评论