- 博客(63)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 Webpack性能优化
Webpack性能优化在使用webpack打包的时候，当我们的项目工程越来越大的时候就会出现打包的时间越来越长，这个时候需要对打包资源进行一系列的优化。减少Webpack打包时间优化Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。当然了，我们是有办法优化的。首先我们可以优化 Loader 的文件搜索范围module.exports
2020-06-15 10:33:38
125
原创 20道HTML基础面试题(附答案)
1、DOCTYPE有什么作用？标准莫诗雨混杂模式如何区分？它们有何意义？告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。2、HTML5为什么只需要写 <!DICTYPE HTM...
2020-04-27 10:36:56
1251
4
原创 JS深浅拷贝
为什么使用深浅拷贝在JS中我们经常会遇到一个数据赋值，但是又不符合真正意义上的数据赋值的问题。这个问题产生的原因又是什么呢？这就先要了解一下JS的数据类型了，在JS中数据类型分为基本数据类型和引用数据类型两大派系。众所周知基本数据类型存储的位置就是栈中，以key=>value的形式去存储的，每一个value都对应一个key，但是在引用数据类型中他的存储结构并不是栈而是堆，在堆中堪比一个空间...
2020-04-06 20:44:37
103
1
原创 老司机带你解决浏览器兼容
为什么会出现浏览器兼容问题？1、各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦2、由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床 浏览器内核代表及代表作品Trident 代表作：IE元老级内核之一，有微软开发，并于1997年10月首次在ie4.0中使用，凭借其windows垄断...
2020-02-23 19:57:48
670
原创 最详细的高度塌陷解决方案
在网页布局中我们经常会遇到高度塌陷的这样的问题，那么什么是高度塌陷呢？什么是高度塌陷?父元素高度自适应，子元素float之后，造成父元素高度为0，称为高度塌陷。他的产生条件就是子元素浮动如何解决高度塌陷呢？这里作者总结了8种解决方法和每种方法的优缺点方案一给父元素添加固定高度，适合做高度固定的布局<!DOCTYPE html><html lang="en">...
2020-02-23 19:55:28
319
原创 原来Redux的原理这么简单
theme: v-green熟悉React的开发者并不陌生Redux是什么,一个状态管理容器，简单来说就是帮助前端存储交互的数据的容器。笔者今天聊的就是如何手写一个Redux，破除那些把Redux神话的同学么。Tip: 一定要熟悉JavaScript的原理哦了解Redux的运行原理三大原则单一数据流State只读只能使用纯函数来执行修改工作原理从图片中我们可以看到，Redux的工作原理Action Creators通过派发方法dispatch ,然后派发的action会被Red.
2021-05-10 22:05:38
298
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
421
原创 TailWind css 与 React框架结合使用
简介TailWind.css是什么？(顺风)？他是一个CSS的工具集。Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。繁杂在日常的项目开发阶段，我们最头疼的就是各种情况的兼容和布局自适应问题，每当不同的业务场景和数据场景都会出现不同的布局适应问题，这个时候开发人员大量时间都会忙于调试布局问题，兼容问题，包括每一个页面基础架子的搭建，都会需要重新设计，除非你自己设计一套可以兼容该项目的CSS框架，这
2021-03-15 22:09:15
2421
原创 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
1002
原创 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
759
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
14611
18
原创 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
255
原创 前端面试题(第一弹)
面试题(第一弹)1.vue-router路由权限认证如何做？vue-router做路由权限认证，首先需求来源，根据不同的用户拥有不同的权限，例如:管理员，超级管理员，普通用户，他们登陆成功，所看到的东西是不一样的，所以也引发了不同角色登录成功会出现不同的路由这个话题了。来讲讲具体怎么做吧！！！首先在没有登录之前，可能除了登录页面和注册页面，其他的页面是没有办法进入，的这个时候我们需要使用到vue的路由前置守卫beforeEach了router.beforeEach((to,from,next) =&
2020-08-26 08:22:48
978
原创 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
430
原创 关于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
447
原创 如何为你的网站加入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
484
原创 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
430
原创 什么是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
326
原创 关于如何计算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
7507
原创 性能优化琐碎事
图片优化计算图片大小对于一张 100 * 100 像素的图片来说，图像上有 10000 个像素点，如果每个像素的值是 RGBA 存储的话，那么也就是说每个像素有 4 个通道，每个通道 1 个字节（8 位 = 1个字节），所以该图片大小大概为 39KB（10000 * 1 * 4 / 1024）。但是在实际项目中，一张图片可能并不需要使用那么多颜色去显示，我们可以通过减少每个像素的调色板来相应缩小图片的大小。了解了如何计算图片大小的知识，那么对于如何优化图片，想必大家已经有 2 个思路了：减少像素
2020-05-27 22:14:02
197
原创 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
6085
原创 自定义视频组件
自定义视频播放组件css部分 <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .container { width: 80%; margin: 0 auto; } .videoBox { width: 8...
2020-05-08 14:33:12
637
原创 浏览器端存储技术
浏览器端存储技术CookieCookie 是指存储在用户本地终端上的数据，同时它是与具体的 Web 页面或者站点相关的。Cookie 数据会自动在 Web 浏览器和 Web 服务器之间传输，也就是说 HTTP 请求发送时，会把保存在该请求域名下的所有 Cookie 值发送给 Web 服务器，因此服务器端脚本是可以读、写存储在客户端的 Cookie 的操作。LocalStorage在 HTM...
2020-05-07 21:42:23
129
原创 再见了，Postman！HTTP 接口测试出现新杀器
作为 Web 开发人员，开发和调试 REST API 是家常便饭。我们会用一些工具来模拟 HTTP 请求，最常用的可能就是 Postman 了。前不久还冒出一个女版 Postman，那就是 Postwoman，详情可见我之前写的一篇介绍：还在用 Postman 测试接口？是时候试试 Postwoman 了！这些工具确实很实用，但也存在一些局限性。通过模拟 HTTP 请求来测试 REST API...
2020-04-28 16:02:07
179
原创 什么是楼梯特效？
什么是楼梯特效？如果各大网站点击按钮本页面跳转对应的板块的功能就是楼梯效果思路大家可以看到左侧的按钮和右侧的内容板块是一一对应的，所以我们需要知道右侧每个板块在当前页面的位置在可以通过左侧的楼梯去控制右侧的板块内容的跳转。试想，右侧每一个板块都会距离页面顶端距离，只需要点击左侧按钮让对应位置的楼梯跳转到对应板块的高度位置即可。接下来具体代码实现.js核心代码 // 梯子对象 ...
2020-04-28 16:01:15
245
原创 创建线程的方式及实现
继承 Thread 类创建线程类定义 Thread 类的子类，并重写该类的 run 方法，该 run 方法的方法体就代表了线程要完成的任务。因此把 run() 方法称为执行体。创建 Thread 子类的实例，即创建了线程对象。调用线程对象的 start() 方法来启动该线程。通过 Runnable 接口创建线程类定义 Runnable 接口的实现类，并重写该接口的 run() 方法...
2020-04-27 10:53:05
102
原创 sleep()、join（）、yield（）有什么区别
sleep()、join（）、yield（）有什么区别sleep()sleep() 方法需要指定等待的时间，它可以让当前正在执行的线程在指定的时间内暂停执行，进入阻塞状态，该方法既可以让其他同优先级或者高优先级的线程得到执行的机会，也可以让低优先级的线程得到执行机会。但是 sleep() 方法不会释放“锁标志”，也就是说如果有 synchronized 同步块，其他线程仍然不能访问共享数据。...
2020-04-27 10:52:36
195
原创 线程池的几种方式与使用场景
线程池的几种方式与使用场景在 Executors 类里面提供了一些静态工厂，生成一些常用的线程池。newFixedThreadPool：创建固定大小的线程池。线程池的大小一旦达到最大值就会保持不变，如果某个线程因为执行异常而结束，那么线程池会补充一个新线程。newCachedThreadPool：创建一个可缓存的线程池。如果线程池的大小超过了处理任务所需要的线程，那么就会回收部分空闲（60...
2020-04-27 10:51:28
801
原创 说说线程安全问题
说说线程安全问题线程安全是多线程领域的问题，线程安全可以简单理解为一个方法或者一个实例可以在多线程环境中使用而不会出现问题。在 Java 多线程编程当中，提供了多种实现 Java 线程安全的方式：最简单的方式，使用 Synchronization 关键字使用 java.util.concurrent.atomic 包中的原子类，例如 AtomicInteger使用 java.util....
2020-04-27 10:50:41
255
原创 synchronized 与 lock 的区别
synchronized 与 lock 的区别synchronized 和 lock 的用法区别synchronized(隐式锁)：在需要同步的对象中加入此控制，synchronized 可以加在方法上，也可以加在特定代码块中，括号中表示需要锁的对象。lock（显示锁）：需要显示指定起始位置和终止位置。一般使用 ReentrantLock 类做为锁，多个线程中必须要使用一个 Reent...
2020-04-27 10:49:51
110
原创 ABA问题
ABA 问题CAS 会导致“ABA问题”。CAS 算法实现一个重要前提需要取出内存中某时刻的数据，而在下时刻比较并替换，那么在这个时间差类会导致数据的变化。比如说一个线程 one 从内存位置 V 中取出 A，这时候另一个线程 two 也从内存中取出 A，并且 two 进行了一些操作变成了 B，然后 two 又将 V 位置的数据变成 A，这时候线程 one 进行 CAS 操作发现内存中仍然是 ...
2020-04-27 10:49:20
90
原创 乐观锁的业务场景及实现方式
乐观锁（Optimistic Lock）：每次获取数据的时候，都不会担心数据被修改，所以每次获取数据的时候都不会进行加锁，但是在更新数据的时候需要判断该数据是否被别人修改过。如果数据被其他线程修改，则不进行数据更新，如果数据没有被其他线程修改，则进行数据更新。由于数据没有进行加锁，期间该数据可以被其他线程进行读写操作。比较适合读取操作比较频繁的场景，如果出现大量的写入操作，数据发生冲突的可能...
2020-04-27 10:47:30
7027
原创 Spring 事务底层原理
Spring 事务底层原理划分处理单元IOC由于 Spring 解决的问题是对单个数据库进行局部事务处理的，具体的实现首相用 Spring 中的 IOC 划分了事务处理单元。并且将对事务的各种配置放到了 IOC 容器中（设置事务管理器，设置事务的传播特性及隔离机制）。AOP 拦截需要进行事务处理的类Spring 事务处理模块是通过 AOP 功能来实现声明式事务处理的，具体操作（比如事务实行...
2020-04-27 10:45:01
189
原创 Spring MVC 中的load-on-startup
在servlet的配置当中，1的含义是：标记容器是否在启动的时候就加载这个servlet。当值为0或者大于0时，表示容器在应用启动时就加载这个servlet；当是一个负数时或者没有指定时，则指示容器在该servlet被选择时才加载。正数的值越小，启动该servlet的优先级越高。如果我们在web.xml中设置了多个servlet的时候，可以使用load-on-startup来指定serv...
2020-04-27 10:44:13
1431
原创 jQuery zTree
jQuery zTreezTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本教程是为了配合项目实战 的简易教程，主要实现了 异步加载 树形结构数据的功能，具体用法请参考官方文档官方文档页面引用css部分 <link rel="stylesheet" href="/static/assets/plu...
2020-04-18 20:40:17
192
原创 jQuery treeTable
jQuery treeTabletreeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单优点：兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以组件性能高：内部实现了只绑定了 tabl...
2020-04-18 20:39:37
2380
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人