前端
关注
分享
扫一扫
文章平均质量分 80
小白6402
这个作者很懒，什么都没留下…
展开
-
前端性能优化（实践篇）
前端开发中随着项目体积的增加，代码也会以一定数量级增加，所生成的静态资源文件也会随之增多，加上一般质量的网络，很容易出现较长时间的白屏问题，影响用户体验。本文侧重于加载性能方面给出了一些具体的白屏优化措施：主要分为网络层面和代码优化方面。前者有使用h2、使用CDN、域名分片、gzip压缩、缓存策略等，后者分别结合了webpack和vite提供了代码分割、代码压缩、异步（动态）加载、懒加载、图片优化并充分利用打包工具自身的tree shaking特性。原创 2025-04-28 14:14:09 · 1206 阅读 · 0 评论 -
需要掌握的前端安全概念以及实操
在前端开发领域，安全问题如同隐藏在代码深处的暗礁，稍有不慎就可能让产品陷入漏洞风险。尤其是在面试场景中，面试官往往会跳出概念考核，直击「如何在实际开发中落地安全防护」的核心能力。作为高频考点的等安全问题，不仅需要理解原理，更要掌握与主流框架（如 Vue、React、Next.js）深度结合的实践方案。下文就将的技术栈:Vue、React、Next.js，谈一谈总结到的解决方法。原创 2025-04-28 10:12:25 · 963 阅读 · 0 评论 -
纯css实现翻书效果
前言：在做一些自己网站的时候，如何封装自己的作品链接，如果直接放，感觉太冰冷，所以需要包装啊，用一本本书，封装自己的作品链接，优雅而不失礼，当然你也可以做一些表白的女朋友的效果，打开书籍，看到的是她。emm,话不多说先看效果图：这是页面加载出来的效果图。这是打开书本后的效果，看你自己改哦你也可以这样：源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-11-25 17:29:16 · 2096 阅读 · 2 评论 -
深入理解React Hooks
前言：Hook 是 React 16.8的新增特性。它可以让你在不编写 class 的情况下使用state以及其他的 React 特性。即react hook只存在于函数组件中，在类组件中不受用.1.首先为什么要使用Hook？动机Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React，或每天使用，或者更愿尝试另一个和 React 有相似组件模型的框架，你都可能对这些问题似曾相识。痛点问题：1.在组件之间复用状态逻辑很难a.之前的解决方案是原创 2021-11-24 17:25:31 · 1575 阅读 · 0 评论 -
react Hook的简单理解
对于钩子（hook)的理解一句话，钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。函数组件的主体只应该用来返回组件的 HTML 代码，所有的其他操作（副效应）都必须通过钩子引入。哪什么是副效应？函数式编程将那些跟数据计算无关的操作，都称为 “副效应” 。为什么要用hook?首先我们要明白，react有类组件，有函数组件，而函数组件是没有状态，跟生命周期这个概念的。而hook刚好能够弥补这缺陷。像，useSate,useEffect配合使用，它就有模拟生命周原创 2021-11-22 15:19:09 · 1212 阅读 · 1 评论 -
前端面试知识点总结
前言:参加过今年秋招的同学就会发现今年的前端非常的“内卷”，“内卷”的非常厉害，应届生问的非常非常的难，直接问底层的原理，说真的。我也遇到过好几家公司，问我底层原理，叫我重写实现，我也是懵逼。虽然很艰难，但我也收到几家公司的offer。下面是我面试了十几家公司的面试题。刚开始找工作很困难，很心酸，但是坚持下去。每一场面试当做一次经历，每一次面试都是一次知识的积累。经历的多了，积累的多了，后面就简单了。加油。一起成长，fight！！！Never give up！一.HTML ,CSS3，JS1.js和cs原创 2021-11-15 19:11:20 · 1248 阅读 · 0 评论 -
对axios总结
一.对axios的了解1.Axios 是什么?Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。axios官方文档地址连接：https://www.axios-http.cn/docs/intro2.特性从浏览器创建 XMLHttpRequests从 node.原创 2021-11-02 09:38:27 · 586 阅读 · 1 评论 -
Vue2.0自学笔记
一.对Vue的了解作者：尤雨溪渐进式框架：根据自身需求，选择框架的中的工具,VUE不强求你一次性接受并使用它的全部功能特性Vue数据驱动渐进式框架基于MVVM软件设计模式React开发大型项目最严谨的框架（学习成本较高，适用于中级或者高级前端开发工程师）Anagle适用于大型项目，项目开发较为沉重，不够灵活Vue与jquery的区别(打扫卫生)原生JS扫把、簸箕、拖把Jquery戴森吸尘器Vue扫地机器人（保姆）2.MVVM（软件设计模式）Vue.js根据这种模式设计出原创 2021-11-02 09:18:52 · 313 阅读 · 1 评论 -
对事件循环机制简单概括
首先JavaScript是单线程语言，在执行JavaScript代码时所有的同步任务都在主线程上执行，形成一个执行栈。除了主线程外，还存在一个任务队列，存放着异步任务，当执行完所有的同步任务后，就会从任务队列中逐个取异步任务放入执行栈中执行，而异步任务又分有宏任务跟任务。异步任务执行顺序：1.先执行微任务，执行完全部的微任务在执行宏任务2.执行宏任务结束后查看有没有产生新的微任务，若产生新的微任务就把新的微任务执行完3.最后开启下一轮事件循环也就是说有同步任务就先执行同步任务，同步任务按顺序执行，原创 2021-11-01 09:43:08 · 565 阅读 · 0 评论 -
ES6基础知识总结
一、ES6介绍1.ES6介绍ES6是ES2015、ES2016、ES2017他们的统称官方名字：《ECMAScript 2015 标准》=> ES62.包管理机制（npm）1)初始化项目npm init -y 初始化项目（不询问项目信息）2)安装依赖全局依赖（在电脑的C盘保存依赖的源码）cnpm install xxx --global简写：cnpm i xxx -g局部依赖（在项目的根目录下保存依赖源码信息）开发依赖cnpm install xxx --save-dev原创 2021-10-31 20:08:32 · 168 阅读 · 1 评论 -
对BFC的理解和使用
对BFC(Block formatting context)深度理解直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素.常见的定位方案### 1.普通流1.元素按照其在HTML中的先后位置至上而下进行布局2.行内元素水平排列，直至当行被占满然后换行，块级元素则会被渲染为完整的一整行3.所有元素默认都是普通流定位### 2.浮动元素首先按照普通流的位置出现原创 2021-10-09 23:36:23 · 109 阅读 · 0 评论 -
html实现好看的照片墙
照片可缩放可移动效果：鼠标没进入之前的效果鼠标悬浮在某一张图片之上当鼠标移动时里面的图片也是可以移动的，如果你不想要这种效果，把js代码去掉就好了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-09-24 09:24:16 · 7313 阅读 · 1 评论 -
好看实用的六个html登录页面
本人找到了六个html登录页面，感觉还行，也挺好看的。1.效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>原创 2021-09-21 12:34:39 · 218983 阅读 · 42 评论 -
Linux系统常见软件安装与配置
常见软件安装与配置1.进程命令查看全格式的全部进程$ ps -ef查看apache进程$ ps -ef | grep httpd查看mysql进程$ ps -ef | grep mysqld结果 UID PID PPID C STIME TTY TIME CMD root 1 0 0 09:19 ? 00:00:01原创 2021-09-15 15:17:16 · 524 阅读 · 0 评论 -
js的正则表达式的使用
js.正则表达式的使用是一个描述字符模式的对象.2.正则表达式创建1.构造函数var pattern=new RegExp('正则表达式',“修饰符”);var pattern=new RegExp("qwer","igm")2.字面量var pattern=/正则表达式/修饰符;var pattern=/qwer/igm3.修饰符i ignore case 不区分大小写g g global 全局m multiline 多行4.实例方法1.exec 用来原创 2021-09-09 15:32:55 · 102 阅读 · 1 评论 -
js的迭代方法学习
js.迭代方法学习1.every(function(item,index,arr){},this对象) 1.第一个参数在数组中的每个元素都会执行到的函数，固定的 2.第二个参数是前面function内的this指向-- 第二个参数任意数据类型,传什么都可以 3.判断数组元素是否都满足某一条件,一项不满足直接跳出当前判断,符合短路原则2.some(function(item,index,arr){},this对象)第一个参数在数组中的每个元素都会执行到的函数，原创 2021-09-09 15:27:14 · 227 阅读 · 0 评论 -
Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runt
前言：今天跑项目的时候我也遇到了这个问题。Error: Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runt怎么解决的呢：1.首先你要明白这是你当前的node版本与node-sass的版本不同造成的。2.所以你要搞清楚你的node-sass版本是多少的，与多少的node版本是可以支持运行的。3.这个你要去看你的项目依赖，node-sass的版本。emm,我也看了原创 2021-11-28 14:26:29 · 1164 阅读 · 1 评论 -
前端一张连续的静态长图鼠标移入移除显示动态效果。
前言：看了腾讯云有静态的一张长图，动画的那种移入移出的效果。我们的项目也想做这种效果。主管叫我看了下怎么实现的，叫我模仿一下实现。我也试了一下。先看效果图吧然后我写的原生代码是这样的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-12-11 21:45:52 · 840 阅读 · 0 评论 -
create-react-app 使用craco修改webpack编译时输出隐藏日志信息
前言：create-react-app 项目名，创建出一个项目来，使用yarn start的时候发现输出很多的日志信息，这些日志信息开发的时候像我这种只有做项目优化的时候才想看到，但是进行开发的时候我们并不想看到。如图：如何使用 craco修改webpack参考这篇create-react-app craco进行webpack配置(修 改篇)不过不能完全安照他的来，安装的时候要使用yarn add来安装使用npm可能装不上。然后我只说怎么屏蔽这些输出，如果在craco.config.js文件你直接原创 2022-01-13 15:17:59 · 1557 阅读 · 3 评论 -
js常用数组方法
这是对原生js常用的数组方法进行总结以及对一些方法进行重构，记住一些常用的数组方法，再开发中，可以让我们快速使用，不过我也一般记不住，但还是多看看吧，让自己有个印象，用到的时候可以更好的百度，更有利于面向csdn编程，哈哈哈。...原创 2022-05-31 14:10:01 · 380 阅读 · 1 评论 -
flex布局详细教程
flex布局详细介绍转载 2022-06-02 17:13:52 · 4288 阅读 · 0 评论 -
SSR 服务端渲染
闲来无事，研究一下SSR，主要原因在于上周一位后端同学在一次组内技术分享的时候说，对前后端分离、服务端渲染特别感兴趣，在他分享了后端微服务之后，专门点名邀请我下周分享服务端渲染，然后我还没同意，领导就内定让我下周分享了（其实就是下周愿意下周分享，我是那个替死鬼）。本人主要从个人角度介绍了对服务端渲染的理解，读完本文后，你将了解到：在讲服务度渲染之前，我们先回顾一下页面的渲染流程：在没有AJAX的时候，也就是web1.0时代，几乎所有应用都是服务端渲染（此时服务器渲染非现在的服务器渲染），那个时候的页面渲染大转载 2022-06-08 15:08:20 · 7690 阅读 · 0 评论 -
SVG图像使用
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。...原创 2022-06-08 15:34:24 · 3246 阅读 · 0 评论 -
Nginx详细学习介绍
Nginx 是一款面向性能设计的 HTTP 服务器，能反向代理 HTTP，HTTPS 和邮件相关(SMTP，POP3，IMAP)的协议链接。并且提供了负载均衡以及 HTTP 缓存。它的设计充分使用异步事件模型，削减上下文调度的开销，提高服务器并发能力。采用了模块化设计，提供了丰富模块的第三方模块。所以关于 Nginx，有这些标签：「异步」「事件」「模块化」「高性能」「高并发」「反向代理」「负载均衡」Linux系统：Nginx版本：CentOS 6.5 我安装的时候是选择的“基本服务器”，默认这两个包都没转载 2022-06-15 14:22:16 · 254 阅读 · 1 评论 -
yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。
昨天换了台新电脑，配环境的时候，使用 VSCode 的命令行安装yarn npm install yarn -G,安装成功后，查看版本报错，yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行 脚本。而当我在VSCode外面运行cmd是可以看到yarn 已经是安装上去了的。按照上面两个步骤执行后，即可重新进入VSCode使用yarn。然后找到发现原因：命令行执行策略，默认设置为。不加载配置文件或运行脚本。原创 2022-08-26 08:58:43 · 1787 阅读 · 0 评论 -
前端开发规范
作为一名合格的前端开发工程师，良好的代码编写规范是必须具备的。其实对于必要的约束直接采用eslint进行一个约束就好了，代码的统一风格采用 pretter进行一个格式化的统一。主要是命名上的统一，这个要大家共同参与才能维护的。原创 2022-12-05 09:06:26 · 1048 阅读 · 0 评论 -
前端本地存储数据库存储之IndexedDB
IndexedDB数据库没有我们想象的那么复杂，了解了它的几个基本概念，上手还是很快的，无非就是增删改查等等，虽然可能开发中用的少，但是了解一下不至于真正用到的时候两眼抓瞎。原创 2023-02-24 14:44:10 · 2446 阅读 · 0 评论 -
react 使用 mqtt
MQTT 主要应用在物联网等场景，WebSocket 因为有配套的浏览器API，主要应用在 Web 开发领域。但两者均为通用的应用层协议，可以在任何相关的场景使用。 MQTT和WebSocket都是面向报文的二进制传输协议。WebSocket更简单，更灵活；MQTT相对复杂，但功能强大。大家可以根据自己的使用场景按需选择。原创 2023-03-02 17:15:00 · 2073 阅读 · 0 评论 -
一个使用 react+vite4+ts+react-router-dom6v Hooks Admin搭建的轻量级后台管理模板。
一个使用 react+vite4+ts+react-router-dom6v Hooks Admin搭建的轻量级后台管理模板。原创 2023-03-03 22:21:52 · 2475 阅读 · 0 评论 -
一个基于dumi搭建的react组件库,特别的开源组件项目,主要用于学习
在日常开发中，肯定会积累许许多多的业务组件在项目内，部分可以作为公共组件被抽离到公共组件库，但大部分或许与业务强相关，或许带有接口请求，并不适合抽离为公共组件，但仍需要有一个地方去展示这些组件的效果和用法，dumi 除了单独作为组件库文档外，也是支持和项目集成，展示项目内的业务组件的。原创 2023-04-05 22:54:20 · 2025 阅读 · 0 评论 -
web worker创建多个 JavaScript 线程 (使用GTP写的文章)
最近在优化公司的一个项目，使用的就是web worker去优化，做了那些优化，一个是状态的优化，（通信的状态实时更新，以前的做法是做个定时任务实时获取它的状态，然后让它在页面渲染，这样就会造成了，一个是定时任务，实时获取，一个是一直在不断的渲染，虽然肉眼看不出什么，但是这样会造成一个主进程的负担非常大，然后我就引用了web worker开一个进程给它，定时去获取，然后在做判断是否与前面的状态是否一致，一直不传入主进程，不一直传入，然后这样就可以页面的明显的比较丝滑了原创 2023-06-11 15:08:45 · 1086 阅读 · 0 评论 -
使用android studio将网站打包成apk(可以直接使用替换为自己的网站连接即可)
这是一个适用于Android Studio的模板项目，可让你在几分钟内创建一个android webview应用程序。你可以使用它为您的网站创建一个简单的应用程序，或作为基于 HTML5 的 android 应用程序的起点。原创 2023-07-04 12:52:24 · 5861 阅读 · 0 评论 -
vue项目中的vue.config.js配置文件中的proxy代理post一直在预检
记录一个比较有意思的bug,帮别人调试遇到的，一个哥们一直在群里问了好几次同一个问题了，他配置了代理，请求一直在发送，postman测试没问题，可以成功接收到，但是在项目前端请求，确实一点响应没有，刚开始我以为是content-type数据格式跟后端没对应上，但是他说试了很多，各种数据类型都没有用，后端他自己写，第一次用。如果在 Vue 项目中设置代理时，GET 请求能够正常代理，而 POST 请求无法生效，可能是因为在默认情况下，webpack-dev-server 只对 GET 请求进行代理。原创 2023-07-04 16:03:39 · 1297 阅读 · 0 评论 -
打包时未添加livepusher模块
可以看到HBuilderx V3.0.1开始就支持livepusher模块了。但是这时候你肯定会跟我一样的懵逼，我去哪里拿这个SDK去哪里拿？？？？？注意官方介绍的使用这个包是错的！！！！是错的！！！！是错的！！！！应该是media_livepusher-realase.aar文件包出现这次失误的原因是官方的文档没有进行一个实时的更新，其实HTML5+ 还是挺好用的，只是你不熟，官方的没有及时更新，然后导致我们看文档吃力，才会导致我们开发如此吃力。原创 2023-07-05 19:32:23 · 1208 阅读 · 2 评论 -
react hooks 对工作中常用到业务进行hooks再次封装成自己的hook库。
工作中难免很多的重复的业务，或者场景react hooks 无法满足的，那我们可以封装成自己的react hooks 库,学习中遇到的也可以进行一个封装，日积月累，就会多起来了嘛。原创 2023-07-18 18:04:30 · 807 阅读 · 0 评论 -
一个22届被裁前端思想上得转变
思想上的转变：其实就学习上得探索深入，多问个为什么，形成自己得知识体系，层层深入理解。原创 2023-11-15 22:47:47 · 876 阅读 · 0 评论 -
H5嵌入小程序适配方案
本文是针对是把h5应用嵌入其它平台得流程。不是单独taro发布一个小程序，单独打包成app得流程，是从一个主平台直接进入一个子系统得嵌入适配方案。原创 2024-01-21 00:01:18 · 4078 阅读 · 0 评论 -
迷茫下是自我提升
谁的青春不迷茫，迷茫下只能是顺势而为，不断提升自己。迷茫中不忘初心，坚持心中得所想，不断进步。当然特别迷茫得时候，去吹吹海风，去看看路上得风景，说不定哪一天风告诉了你答案，你一瞬间就明白了自己想要什么样得人生。最近宫崎骏，新出了一部动漫《你想活出怎样得人生》看看别人得人生，说不定也有你想有得答案。每个人想法都是不一样得，想要得人生也不一样。有点鸡汤了哈，言而总之，迷茫下还是要提升自我，不管是前端，还是其它得都好。原创 2024-04-06 21:05:12 · 1758 阅读 · 0 评论 -
前端复习资料
核心知识，必须掌握的，也是最基础的，譬如浏览器模型，渲染原理，JS解析过程，JS运行机制等，作为骨架来承载知识体系.原创 2024-04-24 13:54:49 · 1473 阅读 · 0 评论 -
浏览器预加载器如何使页面加载速度更快
预加载器并不是什么新鲜事，它提供了显着的性能提升，作为开发者，我们不需要做任何特殊的事情来利用它。原创 2024-04-30 16:07:33 · 1272 阅读 · 0 评论