- 博客(38)
- 收藏
- 关注
RSS订阅原创 关于元素 offsetWidth、offsetHeight、clientWidth、clientHeight 等等的详解
width 和 height宽度：offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）style.width 返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）scrollWidth 返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同高度：offsetHeight 返回元素的高度（包括元素高度、内边.
2022-04-02 20:41:51
142
原创 querystring 插件库使用方法总结
安装及引入qs 是一个 npm 仓库所管理的包,可通过 npm install qs 命令在项目中进行安装，通过 import qs from 'query-string' 引入即可使用。querystring 这个库是干什么的？querystring 从字面上的意思就是查询字符串，一般是对http请求所带的数据进行解析，即是 url 中 ? 后的字符串参数。它可以将这些字符串解析为对象，也可以将对象转换为符合格式的字符串。这个库方法有哪些？提供四个方法（主要使用前两个）：1、q.
2021-09-22 16:20:46
3139
原创 React面试题：setState是同步还是异步的？
总结：某些情况下是同步的，某些情况下是异步的setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout中都是同步的。setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。setState .
2021-08-17 00:46:32
445
原创 JavaScript 中判断数据类型的几种方法及其特点
1、typeof对于基本数据类型，null不能准确判断，会显示为object对于引用类型，数组类型不能准确判断，会显示为object2、instanceof原理：通过原型链进行判断[] instanceof Array // true{} instanceof Object // truenew String('welnee') instanceof String // true实现：function myInstanceof(left, right) { left = l
2021-02-15 16:09:25
198
原创 详解 localStorage 的使用
什么是 localStorage ？在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。localStorage 的使用首先在使用 localStorage 的时候，我们需要判断浏览器是否支持localStorage 这个属性if( !window.l.
2020-12-15 22:12:06
1778
3
原创 Javascript 刷新页面的几种常用方法
1、history.go(0)2、window.location.reload() 或 window.location.reload(true)3、location = location4、location.assign(location)5、document.execCommand(’‘Refresh’’)6、window.navigate(location)7、location.replace(location)8、document.URL = location.href...
2020-12-11 16:47:38
222
原创 better-scroll框架优化了什么
详见：如何在vue框架中better-scroll插件优点：体验像原生：滚动非常流畅，而且没有滚动条。记录当前路由滚动位置：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。...
2020-12-02 16:18:49
257
原创 浏览器Web安全相关知识
1、常见六大Web安全攻防解析2、web安全：CSRF攻击原理以及防御完成 CSRF 攻击必须要有三个条件：1、用户已经登录了站点 A，并在本地记录了 cookie2、在用户没有登出站点 A 的情况下（也就是 cookie 生效的情况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。3、站点 A 没有做任何 CSRF防御...
2020-11-08 02:20:15
145
原创 说说 keep-alive 的实现原理
keep-alive如何实现缓存？1、Vue keep-alive的实现原理2、浅析Vue中keep-alive实现原理以及LRU缓存算法3、聊聊keep-alive组件的使用及其实现原理4、keep-alive实现原理
2020-10-24 01:40:06
918
原创 前端模块化相关
1、模块化开发2、ES6的 module 和 CommonJS 的差异：1、CommonJS模块输出的是一个值的拷贝， ES6 module 模块输出的是值的引用。● CommonJS旦输出一个值，模块内部的变化就影响不到这个值。● ES6的 import 只是产生一个只读引用，原始值改变后，import加载的值也会发生变化。2、CommonJS 模块是运行时加载， ES6 module 模块是编译时输出接口。运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个
2020-10-24 01:01:32
82
1
原创 Webpack相关面试题汇总
1、Webpack是什么2、Webpack篇3、再来一打 Webpack 面试题4、Loader 和 Plugin 有什么区别Loader 和 Plugin 的区别loader & plugin5、说说Webpack构建流程Webpack 构建流程简单说一下Webpack的构建流程及原理Webpack构建流程：Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader
2020-10-23 00:25:45
316
原创 说说回流和重绘
详见：重绘和重排如何减少回流和重绘？使用 transform 替代 top使用 visibility 替换 display: none。因为前者只会引起重绘，后者会引发回流（改变了布局）不要把节点的属性值放在一个循环里当成循环里的变量不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrameCSS 选择符从右往左匹配查找，避免节点层级过多...
2020-10-21 10:42:23
146
原创 前端Vue面试题汇总（持续更新...）
1、前端面试之 vue 篇2、vue 生命周期钩子函数有哪些，分别什么时候触发？3、vue 中 computed 和 watch 的区别，以及适用场景4、vue 的父组件和子组件生命周期钩子执行顺序5、vue 的响应式原理：Vue源码解读一：Vue数据响应式原理Vue响应式原理Observer、Dep、Watcher理解vue源码分析之响应式原理(Watcher、Observer、Dep)过程：1、使用Object.defineProperty将data数据变成响应式对象，通过Obs
2020-10-18 00:43:49
352
1
原创 position:absolute相对哪个元素定位，那个元素要满足什么条件
1、position: absolute的元素会脱离页面中的文档流，相对于 static 定位以外的第一个父元素进行定位，父元素也要有定位position：relative或position：absolute
2020-10-13 23:50:22
1130
原创 ES6的class中的static方法和普通方法的区别
什么是静态（static）方法？类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。class Foo { static classMethod() { return 'hello'; }}Foo.classMethod() // 'hello'var foo = new Foo();foo.classMethod()// TypeError: foo.
2020-09-28 16:30:12
2581
1
原创 CSS渲染优化策略
优化策略1、尽量避免使用后代选择器，使用 id selector 非常的高效2、减少CSS文档体积值为 0 不需要单位使用缩写属性值为浮动小数 0.xx，可以省略小数点之前的 03、不滥用浮动4、让属性尽可能多的去继承参考1、CSS 渲染原理以及优化策略2、CSS渲染速度改善的十个方法与建议...
2020-09-26 23:51:28
198
原创 说说箭头函数与普通函数的区别
箭头函数与普通函数的区别1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。4、不可以使用 new 命令，因为：没有自己的 this，无法调用 call，apply。没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 _.
2020-09-23 11:27:49
251
原创 说说HTTP1.0 和 HTTP1.1 的区别 && HTTP1.x 和 HTTP2 的区别
HTTP的历史早在 HTTP 建立之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说，我们所写的HTML页面将要放在我们的 web 服务器上，用户端通过浏览器访问url地址来获取网页的显示内容，但是到了 WEB2.0 以来，我们的页面变得复杂，不仅仅单纯的是一些简单的文字和图片，同时我们的 HTML 页面有了 CSS，Javascript，来丰富我们的页面展示，当 ajax 的出现，我们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP.
2020-09-22 17:36:46
310
原创 谈谈浏览器的跨域问题
说说什么是跨域？浏览器有基源策略。当协议、域名、端口至少有一个不一致时就会发生跨域，ajax请求会失败。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。这也说明了跨域并不能完全阻止 CSRF攻击，因为请求毕竟是发出去了。允许跨域加载资源的标签：<img src=xxx><script src=xxx><link href=xxx>有哪些方法解决跨域？1、JSONP利用<script>标.
2020-09-22 16:10:33
204
原创 谈谈JS的内存泄漏
什么是内存泄漏？字面上的意思，申请的内存没有及时回收掉，被泄漏了为什么会发生内存泄漏？虽然JS有垃圾回收机制，但当某块无用的内存，却无法被垃圾回收机制认为是垃圾时，也就发生内存泄漏了。而垃圾回收机制通常是使用标志清除策略，简单说，也就是引用从根节点开始是否可达来判定是否是垃圾。上面是发生内存泄漏的根本原因，直接原因则是，当不同生命周期的两个东西相互通信时，一方生命到期该回收了，却被另一方还持有时，也就发生内存泄漏了。哪些情况会造成内存泄漏？1、意外的全局变量全局变量的生命周期最长，.
2020-09-22 15:30:12
929
原创 说说JS垃圾回收机制的两种策略
垃圾收集器通常有两种策略收集内存中无用的变量：1、标记清除：JavaScript中最常用的垃圾收集方式是标记清除垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记，然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。2、引用计数：另一种不太常见的垃圾收集策略叫做引用计数另一种不太常见的垃圾收集策略叫做
2020-09-21 23:03:36
625
原创 JS函数防抖和节流及其应用场景
函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。通俗来讲就是：假设一个按钮在2000毫秒内被点击100次，等到最后一次触发该函数开始计时，过了delay毫秒后才会触发一次函数。 // 1.防抖 function debounce(fn, wait) { let timer; return function() { if (timer) clearTimeout(timer); timer = s.
2020-09-20 01:04:10
1024
1
原创 说说var 和 let、const 区别
var 定义变量会提升，let、const 不会，let、const有暂时性死区var可以重复声明，let、const不可以，声明const必须赋初值var是函数作用域，let、const是块级作用域全局作用域下：使用 var 声明的变量会被挂载到 window 上使用 let 和 const 声明的变量，不会被挂载到 window 上...
2020-09-20 00:21:10
80
原创 HTTP 和 HTTPS 的区别以及 HTTPS 握手过程
HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP） 数据传输过程是加密的，安全性较好。使用 HTTPS 协议需要到 CA（数字证书认证机构） 申请证书。HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者.
2020-09-16 13:20:12
533
原创 基于Vue开发的电商APP项目（仿蘑菇街）
项目源码已放到GitHub上，欢迎访问~项目地址：https://github.com/weining-zhang/mall如果觉得有用请不要忘记右上角给个star哟~~说明：该项目是本人在学习Vue过程中的一个练习实战项目1、项目描述项目基于VueCLI3脚手架 + Vue全家桶 + ES6 + Webpack等技术开发项目采用模块化、组件化、工程化的模式开发项目主要分为四大模块：首页 + 分类 + 购物车 + 我的2、使用的插件或第三方库使用 vue-router 开发单页面使
2020-07-27 20:15:37
3740
4
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人