<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[welnee的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/welnee</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; welnee]]></copyright><item><title><![CDATA[SVG 图片颜色设置无效解决方法]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/128119131</link><guid>https://blog.youkuaiyun.com/welnee/article/details/128119131</guid><author>welnee</author><pubDate>Wed, 30 Nov 2022 17:35:47 +0800</pubDate><description><![CDATA[SVG图片颜色设置无效解决方法]]></description><category></category></item><item><title><![CDATA[如何使用正则表达式提取指定标签的指定属性值]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/127819916</link><guid>https://blog.youkuaiyun.com/welnee/article/details/127819916</guid><author>welnee</author><pubDate>Sat, 12 Nov 2022 14:22:12 +0800</pubDate><description><![CDATA[【代码】如何使用正则表达式提取指定标签的指定属性值。]]></description><category></category></item><item><title><![CDATA[使用 Node.contains 判断元素是否为后代元素对 svg 元素无效解决方案]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/127460161</link><guid>https://blog.youkuaiyun.com/welnee/article/details/127460161</guid><author>welnee</author><pubDate>Sat, 22 Oct 2022 12:36:14 +0800</pubDate><description><![CDATA[node.contains 对 svg 无效的解决方案]]></description><category></category></item><item><title><![CDATA[光标 cursor 属性值详解]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/127239967</link><guid>https://blog.youkuaiyun.com/welnee/article/details/127239967</guid><author>welnee</author><pubDate>Mon, 10 Oct 2022 10:29:09 +0800</pubDate><description><![CDATA[curson 属性值详解]]></description><category></category></item><item><title><![CDATA[关于元素 offsetWidth、offsetHeight、clientWidth、clientHeight 等等的详解]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/123925845</link><guid>https://blog.youkuaiyun.com/welnee/article/details/123925845</guid><author>welnee</author><pubDate>Sat, 02 Apr 2022 20:41:51 +0800</pubDate><description><![CDATA[width 和 height

宽度：

offsetWidth	返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
clientWidth  返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
style.width  返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
scrollWidth 返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同

高度：

offsetHeight 	返回元素的高度（包括元素高度、内边.]]></description><category></category></item><item><title><![CDATA[querystring 插件库使用方法总结]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/120416899</link><guid>https://blog.youkuaiyun.com/welnee/article/details/120416899</guid><author>welnee</author><pubDate>Wed, 22 Sep 2021 16:20:46 +0800</pubDate><description><![CDATA[安装及引入

qs 是一个 npm 仓库所管理的包,可通过 npm install qs 命令在项目中进行安装，
通过 import qs from 'query-string' 引入即可使用。

querystring 这个库是干什么的？

querystring 从字面上的意思就是查询字符串，一般是对http请求所带的数据进行解析，即是 url 中 ? 后的字符串参数。
它可以将这些字符串解析为对象，也可以将对象转换为符合格式的字符串。

这个库方法有哪些？

提供四个方法（主要使用前两个）：
1、q.]]></description><category></category></item><item><title><![CDATA[React面试题：setState是同步还是异步的？]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/119745730</link><guid>https://blog.youkuaiyun.com/welnee/article/details/119745730</guid><author>welnee</author><pubDate>Tue, 17 Aug 2021 00:46:32 +0800</pubDate><description><![CDATA[总结：某些情况下是同步的，某些情况下是异步的


setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout中都是同步的。
setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState, callback) 中的callback拿到更新后的结果。
setState .]]></description><category></category></item><item><title><![CDATA[JavaScript 中判断数据类型的几种方法及其特点]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/113816666</link><guid>https://blog.youkuaiyun.com/welnee/article/details/113816666</guid><author>welnee</author><pubDate>Mon, 15 Feb 2021 16:09:25 +0800</pubDate><description><![CDATA[1、typeof

对于基本数据类型，null不能准确判断，会显示为object
对于引用类型，数组类型不能准确判断，会显示为object

2、instanceof

原理：通过原型链进行判断

[] instanceof Array // true
{} instanceof Object // true
new String('welnee') instanceof String // true


实现：

function myInstanceof(left, right) {
	left = l]]></description><category></category></item><item><title><![CDATA[详解 localStorage 的使用]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/111240398</link><guid>https://blog.youkuaiyun.com/welnee/article/details/111240398</guid><author>welnee</author><pubDate>Tue, 15 Dec 2020 22:12:06 +0800</pubDate><description><![CDATA[什么是 localStorage ？

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage 的使用

首先在使用 localStorage 的时候，我们需要判断浏览器是否支持localStorage 这个属性
if( !window.l.]]></description><category></category></item><item><title><![CDATA[在vue项目中使用 SVG 建立图标系统并且使用]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/111051088</link><guid>https://blog.youkuaiyun.com/welnee/article/details/111051088</guid><author>welnee</author><pubDate>Fri, 11 Dec 2020 18:10:36 +0800</pubDate><description><![CDATA[在vue中使用SVG建立图标系统并且使用

]]></description><category></category></item><item><title><![CDATA[Javascript 刷新页面的几种常用方法]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/111042140</link><guid>https://blog.youkuaiyun.com/welnee/article/details/111042140</guid><author>welnee</author><pubDate>Fri, 11 Dec 2020 16:47:38 +0800</pubDate><description><![CDATA[1、history.go(0)
2、window.location.reload() 或 window.location.reload(true)
3、location = location
4、location.assign(location)
5、document.execCommand(’‘Refresh’’)
6、window.navigate(location)
7、location.replace(location)
8、document.URL = location.href

...]]></description><category></category></item><item><title><![CDATA[better-scroll框架优化了什么]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/110489093</link><guid>https://blog.youkuaiyun.com/welnee/article/details/110489093</guid><author>welnee</author><pubDate>Wed, 02 Dec 2020 16:18:49 +0800</pubDate><description><![CDATA[详见：如何在vue框架中better-scroll插件

优点：


体验像原生：滚动非常流畅，而且没有滚动条。
记录当前路由滚动位置：在vue中通过路由切换页面时组件会自动滚动到顶部，需要监听滚动行为才能让滚动位置固定，better-scroll解决了这个问题。


...]]></description><category></category></item><item><title><![CDATA[浏览器Web安全相关知识]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109555231</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109555231</guid><author>welnee</author><pubDate>Sun, 08 Nov 2020 02:20:15 +0800</pubDate><description><![CDATA[1、常见六大Web安全攻防解析
2、web安全：CSRF攻击原理以及防御

完成 CSRF 攻击必须要有三个条件：
1、用户已经登录了站点 A，并在本地记录了 cookie
2、在用户没有登出站点 A 的情况下（也就是 cookie 生效的情况下），访问了恶意攻击者提供的引诱危险站点 B (B 站点要求访问站点A)。
3、站点 A 没有做任何 CSRF防御


...]]></description><category></category></item><item><title><![CDATA[说说 keep-alive 的实现原理]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109253015</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109253015</guid><author>welnee</author><pubDate>Sat, 24 Oct 2020 01:40:06 +0800</pubDate><description><![CDATA[keep-alive如何实现缓存？

1、Vue keep-alive的实现原理
2、浅析Vue中keep-alive实现原理以及LRU缓存算法
3、聊聊keep-alive组件的使用及其实现原理
4、keep-alive实现原理

]]></description><category></category></item><item><title><![CDATA[前端模块化相关]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109252182</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109252182</guid><author>welnee</author><pubDate>Sat, 24 Oct 2020 01:01:32 +0800</pubDate><description><![CDATA[1、模块化开发
2、ES6的 module 和 CommonJS 的差异：

1、CommonJS模块输出的是一个值的拷贝， ES6 module 模块输出的是值的引用。
●	CommonJS旦输出一个值，模块内部的变化就影响不到这个值。
● 	ES6的 import 只是产生一个只读引用，原始值改变后，import加载的值也会发生变化。
2、CommonJS 模块是运行时加载， ES6 module 模块是编译时输出接口。
运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个]]></description><category></category></item><item><title><![CDATA[Webpack相关面试题汇总]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109232696</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109232696</guid><author>welnee</author><pubDate>Fri, 23 Oct 2020 00:25:45 +0800</pubDate><description><![CDATA[1、Webpack是什么
2、Webpack篇
3、再来一打 Webpack 面试题
4、Loader 和 Plugin 有什么区别

Loader 和 Plugin 的区别
loader &amp; plugin

5、说说Webpack构建流程

Webpack 构建流程简单说一下
Webpack的构建流程及原理


Webpack构建流程：
Webpack在启动后，会从Entry开始，递归解析Entry依赖的所有Module，每找到一个Module，就会根据Module.rules里配置的Loader]]></description><category></category></item><item><title><![CDATA[说说图片懒加载原理]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109231782</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109231782</guid><author>welnee</author><pubDate>Thu, 22 Oct 2020 22:02:42 +0800</pubDate><description><![CDATA[详见：懒加载和预加载

]]></description><category></category></item><item><title><![CDATA[说说你知道的前端优化有哪些？]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109213603</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109213603</guid><author>welnee</author><pubDate>Thu, 22 Oct 2020 00:51:25 +0800</pubDate><description><![CDATA[1、前端性能优化
2、CSS渲染优化
3、前端性能优化之雅虎35条军规


]]></description><category></category></item><item><title><![CDATA[说说DOM事件机制]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109212490</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109212490</guid><author>welnee</author><pubDate>Wed, 21 Oct 2020 23:31:39 +0800</pubDate><description><![CDATA[1、DOM事件机制
2、event事件属性：e.target与事件委托简例


]]></description><category></category></item><item><title><![CDATA[说说回流和重绘]]></title><link>https://blog.youkuaiyun.com/welnee/article/details/109196327</link><guid>https://blog.youkuaiyun.com/welnee/article/details/109196327</guid><author>welnee</author><pubDate>Wed, 21 Oct 2020 10:42:23 +0800</pubDate><description><![CDATA[详见：重绘和重排

如何减少回流和重绘？


使用 transform 替代 top
使用 visibility 替换 display: none。因为前者只会引起重绘，后者会引发回流（改变了布局）
不要把节点的属性值放在一个循环里当成循环里的变量
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
CSS 选择符从右往左匹配查找，避免节点层级过多


...]]></description><category></category></item></channel></rss>