- 博客(78)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Webpack性能优化
Webpack性能优化在使用webpack打包的时候，当我们的项目工程越来越大的时候就会出现打包的时间越来越长，这个时候需要对打包资源进行一系列的优化。减少Webpack打包时间优化Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。首先我们可以优化 Loader 的文件搜索范围module.exports
2020-06-15 10:33:38
162
原创 20道HTML基础面试题(附答案)
1、DOCTYPE有什么作用？标准莫诗雨混杂模式如何区分？它们有何意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2、HTML5为什么只需要写 <!DICTYPE HTM...
2020-04-27 10:36:56
1347
4
原创 JS深浅拷贝
为什么使用深浅拷贝在JS中我们经常会遇到一个数据赋值，但是又不符合真正意义上的数据赋值的问题。这个问题产生的原因又是什么呢？这就先要了解一下JS的数据类型了，在JS中数据类型分为基本数据类型和引用数据类型两大派系。众所周知基本数据类型存储的位置就是栈中，以key=>value的形式去存储的，每一个value都对应一个key，但是在引用数据类型中他的存储结构并不是栈而是堆，在堆中堪比一个空间...
2020-04-06 20:44:37
130
1
原创 老司机带你解决浏览器兼容
为什么会出现浏览器兼容问题？1、各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦2、由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床 浏览器内核代表及代表作品Trident 代表作：IE元老级内核之一，有微软开发，并于1997年10月首次在ie4.0中使用，凭借其windows垄断...
2020-02-23 19:57:48
823
原创 最详细的高度塌陷解决方案
在网页布局中我们经常会遇到高度塌陷的这样的问题，那么什么是高度塌陷呢？什么是高度塌陷?父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动如何解决高度塌陷呢？这里作者总结了8种解决方法和每种方法的优缺点方案一给父元素添加固定高度，适合做高度固定的布局<!DOCTYPE html><html lang="en">...
2020-02-23 19:55:28
378
原创 vite 实战图片预加载方案
前端图片预加载是一种优化用户体验的技术，通过提前加载图片资源，确保用户在需要查看图片时能够快速显示，而不会因为图片加载延迟而导致界面卡顿或空白。
2024-12-12 14:51:12
561
1
原创 naiveui 在 nuxt 中使用 css 资源首次未加载
我真的被气死，最近在最 nuxt 开发，ui 库使用的是 naiveui 然后我使用的过程中发现每一次我刷新页面的时候我页面出现的时候都没有 css 样式但是过一会就出现了 css 样式，我真的被气死了，然后我查了好多资料，最后发现是 naiveui 的 ssr 的一个 bug，然后我找到了一个解决方法。
2024-11-22 14:45:59
436
原创 图片压缩工具
有提供了mac版本；win用户点击上面的下载即可，官网下载特别慢（因为需要魔法）声明：本站大部分素材均源于互联网收集整理，若侵犯第三方权益，请及时联系我们删除。这个软件叫Caesium👉。
2024-10-13 12:59:03
256
原创 视频下载工具
1️⃣浏览器插件：支持，就有些视频下载不高清2️⃣下载器：不限速下载，也具备资源嗅探功能3️⃣B站下载器：下载B站视频专门的软件4️⃣网页端提取视频：可以应个急用。
2024-10-13 12:50:47
468
原创 电脑录屏工具
大多数打工人应该都有飞书，所以我讲下这个方法飞书的录屏是继承在截图这个功能里的先Alt+shift+A就可以调出截屏，在最顶选择录屏如果调不出来就：点击左上角头像→设置→快捷键，里面就可以看到设置录屏的快捷键了。
2024-10-13 12:47:38
358
原创 视频格式转换
声明：本站大部分素材均源于互联网收集整理，若侵犯第三方权益，请及时联系我们删除。该demo仅用于学习交流，请勿用于商业用途，否则后果自负。如果实在搞不定就联系博主吧。
2024-10-13 12:45:27
332
原创 vue3.5最新发布，这几个新用法还不快来学习一下！
除了以上提到的外，vue3.5还重构了响应式系统，性能方面得到了提升，据说在处理某些情况下可使性能提高到10倍。
2024-09-04 23:42:34
667
原创 原来Redux的原理这么简单
theme: v-green熟悉React的开发者并不陌生Redux是什么,一个状态管理容器，简单来说就是帮助前端存储交互的数据的容器。笔者今天聊的就是如何手写一个Redux，破除那些把Redux神话的同学么。Tip: 一定要熟悉JavaScript的原理哦了解Redux的运行原理三大原则单一数据流State只读只能使用纯函数来执行修改工作原理从图片中我们可以看到，Redux的工作原理Action Creators通过派发方法dispatch ,然后派发的action会被Red.
2021-05-10 22:05:38
352
3
原创 vue3.0中的响应式钩子是如何实现的
先来聊聊Vue3.0的变化Vue3.0相比Vue2.0发生了翻天覆地的变化，从设计理念，到架构模式都发生了变化，笔者列入最核心的变化diff设计变化，将dom渲染做到极致优化静态变量提升，提高无效的dom渲染监听缓存机制，让重复的数据流操作消失组合式的API，然代码的耦合度更低重写object.defineproperty()的数据双向绑定,使用Proxy代理重写划重点，今天我们聊的只是基于Proxy实现的响应式代理默认大家已经明白Proxy的原理是什么，如果大家还不太了解Proxy
2021-04-30 10:11:09
467
原创 TailWind css 与 React框架结合使用
简介TailWind.css是什么？(顺风)？他是一个CSS的工具集。Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。繁杂在日常的项目开发阶段，我们最头疼的就是各种情况的兼容和布局自适应问题，每当不同的业务场景和数据场景都会出现不同的布局适应问题，这个时候开发人员大量时间都会忙于调试布局问题，兼容问题，包括每一个页面基础架子的搭建，都会需要重新设计，除非你自己设计一套可以兼容该项目的CSS框架，这
2021-03-15 22:09:15
2693
原创 react-hook的存在是否可以完全替代redux
前文react-redux主要提供的功能是将redux和react的组件关联起来。使用提供的connect方法可以使得任意一个react组件获取到全局的store。 实现方法是将store存放于由provider提供的context上，在调用connect时， 就可将组件的props替换， 让其可以访问到定制化的数据或者方法。目标本文尝试使用react-hook来替代react-redux的基本功能。react-redux的特点：全局维护一个store任何组件都可以获得store，最好prop
2021-02-08 21:58:20
1059
原创 Kbone原理解析
Kbone原理解析官方介绍Kbone 是一个致力于微信小程序和 Web 端同构的解决方案。Web框架的基本原理首先我们来看下普通Web端框架，以Vue框架为例，一份Vue模板对应一个组件，在代码构建阶段编译成调用Dom接口的JS函数，执行此JS函数就会创建出组件对应的Dom树，从而渲染到浏览器页面上。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cf3NBomO-1610640222649)(https://s3.ax1x.com/2021/01/13/sNoGk
2021-01-15 00:04:32
804
1
原创 为什么有人吐槽vue3.0没有vue2.0好用
vue3.0的发布的已经有三个月，三个月中作者尝试着vue3.0的完成一些模块的开发。这里分享一下vue3.0为什么有人说不太好用。一、完全抛弃options api的作风，改用composition api的写法了解vue2.0的都知道vue2.0是基于配置参数的风格去开发的，所有的代码都会已配置为入口，如data, method, computed, filter,watch这样的操作都是需要配置入口的，但是vue3.0完全抛弃这样的做法。采用了类似react的hooks的作风，如reactive,
2020-11-29 19:48:00
18488
20
原创 vue中Axios的封装和API接口的管理
vue中Axios的封装和API接口的管理如图，面对一团糟代码的你~~~真的想说，What FUC~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放
2020-09-01 19:57:52
290
原创 前端面试题(第一弹)
面试题(第一弹)1.vue-router路由权限认证如何做？vue-router做路由权限认证，首先需求来源，根据不同的用户拥有不同的权限，例如:管理员，超级管理员，普通用户，他们登陆成功，所看到的东西是不一样的，所以也引发了不同角色登录成功会出现不同的路由这个话题了。来讲讲具体怎么做吧！！！首先在没有登录之前，可能除了登录页面和注册页面，其他的页面是没有办法进入，的这个时候我们需要使用到vue的路由前置守卫beforeEach了router.beforeEach((to,from,next) =&
2020-08-26 08:22:48
1033
原创 1像素边框解决方案
border.css该css样式用于解决移动端1像素边框问题。问题分析：有些手机的屏幕分辨率较高，是2-3倍屏幕。css样式中border:1px solid red;在2倍屏下，显示的并不是1个物理像素，而是2个物理像素。为了解决这个问题，引入border.css是非常有必要的。具体代码@charset "utf-8";.border,.border-top,.border-right,.border-bottom,.border-left,.border-topbottom,.bor
2020-07-29 16:59:58
469
原创 关于for in 与 Object.keys()在遍历对象上面的区别
使用for in 去遍历 对象会将prototype上面扩展的方法或者属性也打印出来// 递归写法Object.prototype.clone = function(){ let o = this.constructor === Array ? [] : {}; for(let e in this){ o[e] = typeof this[e] === "object" ? this[e].clone() : this[e]; } return o; }
2020-07-27 08:57:48
480
原创 如何为你的网站加入FPS监测
$('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); var showFPS = (function () { var requestAnimationFrame = window.requestAnimationFrame || .
2020-07-25 18:04:41
567
原创 react项目中使用装饰器
首先安装babel转换器yarn add @babel/core @babel/preset-env @babel/plugin-proposal-decorators -Dnpm i @babel/core @babel/preset-env @babel/plugin-proposal-decorators -D在你的react根目录下创建.babelrc文件写入{ "presets": [ "@babel/preset-env" ], "plugins"
2020-07-24 20:07:32
461
原创 什么是MVVM？
MVVM是Model-View-View-Model的缩写Model:代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑View: 代表UI组件，他负责将数据模型转化UI展现出来ViewModel: 监听模型数据的改变和控制视图行为。处理用户交互，简单理解是一个同步View和Model的对象，连接Model和View。在MVVM架构下，View和Model之间没有直接的联系，而是通过ViewModel进行交互 ，Model和ViewModel之间的交互是双向的，因此View数据的变化
2020-07-21 14:16:00
378
原创 关于如何计算rem
关于如何计算remrem是指根元素(root element html) 的字体大小 ，根元素默认的字体大小为16px。rem是通过根元素进行适配的，网页中的根元素是html我们通过设置html的字体大小就可以控制rem的大小；所以默认我们认为1rem=16px； 2rem=32px。如果为了方便计算我们一般设置1rem=100px，我们需要设置字体大小为100px所以我们一般在js中做判断；：<script> (function(){ let a = d
2020-06-25 14:26:02
8164
原创 性能优化琐碎事
图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：减少像素
2020-05-27 22:14:02
228
原创 node-sass安装错误，提示缺少python2包
解决办法参考https://segmentfault.com/a/1190000010984731?utm_source=tag-newestnpm uninstall node-sassnpm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
2020-05-25 10:36:44
6197
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人