<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[dou_xiaobao的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/dou_xiaobao</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; dou_xiaobao]]></copyright><item><title><![CDATA[前端静态资源为什么推荐放在cdn上？]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/148765299</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/148765299</guid><author>dou_xiaobao</author><pubDate>Thu, 19 Jun 2025 14:03:48 +0800</pubDate><description><![CDATA[前端静态资源为什么推荐放在cdn上？]]></description><category></category></item><item><title><![CDATA[script标签中的属性]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/119931025</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/119931025</guid><author>dou_xiaobao</author><pubDate>Thu, 26 Aug 2021 15:15:38 +0800</pubDate><description><![CDATA[script标签中defer和async属性的区别script标签中defer和async属性的区别
script标签中defer和async属性的区别
script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：
1.
没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；
　　　①【如果放在head头里面引入，异步加载资源，但会阻塞的渲染，]]></description><category></category></item><item><title><![CDATA[Mac 常用快捷键]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/118707532</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/118707532</guid><author>dou_xiaobao</author><pubDate>Tue, 13 Jul 2021 20:41:12 +0800</pubDate><description><![CDATA[MacBook Pro 常用快捷键

初次使用mac 的小伙伴会遇到很多快捷键使用问题，尤其是相比window系统有很大的不同，以下为本人在工作中会使用的到快捷键：


刷新页面 command + r


锁定屏幕 control + command + q


显示或隐藏文件 shift + command + .


切换应用程序	command + tab


切换下一个vscode文件或浏览器标签页 control + tab


切换到上一个vscode文件或浏览器标签页	control + s]]></description><category></category></item><item><title><![CDATA[git的常用命令]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/113444619</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/113444619</guid><author>dou_xiaobao</author><pubDate>Sat, 30 Jan 2021 18:48:09 +0800</pubDate><description><![CDATA[我工作中基本会用到Git 的 相关命令，总结如下，和大家一起分享：

1、git clone的用法：

$ git clone https://github.com/xxx.git    版本库的url;
$ git clone git@github.com:xxx.git 使用SSH协议：


2、git pull  拉取远程的所有信息，会合并代码
3、git fetch：相当于是从远程获取最新版本到本地，不会自动merge
4、git add . 将内容从工作目录添加到暂存区
5、git commit ]]></description><category></category></item><item><title><![CDATA[前端面试题总结1-JavaScript基础]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109450551</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109450551</guid><author>dou_xiaobao</author><pubDate>Mon, 02 Nov 2020 16:47:52 +0800</pubDate><description><![CDATA[一、JavaScript基础
1、变量和类型
（1）JavaScript规定了几种语言类型
JavaScript中的每一个值都有它自己的类型，JavaScript规定了七种语言类型：
①Undefined
②Nulls
③Boolean
④String
⑤Number
⑥Symbol
⑦.Object

（2）JavaScript对象的底层数据结构是什么
js基本类型数据都是直接按值存储在栈中的(Undefined、Null、不是new出来的布尔、数字和字符串)，每种类型的数据占用的内存空间的大小是确定的，]]></description><category></category></item><item><title><![CDATA[Vue3.0项目创建方式]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109364174</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109364174</guid><author>dou_xiaobao</author><pubDate>Fri, 30 Oct 2020 16:24:16 +0800</pubDate><description><![CDATA[1、 创建Vue3的3种方式
① Vue-CLI    基于脚手架2.0或者脚手架3.0
② Webpack    自己手动配置webpack环境
③ Vite       vue3新特性

&lt;!-- Webpack -&gt;
git clone https://github.com/vuejs/vue-next-webpack-preview.git projectName
cd projectName
npm install
npm run dev

// Vue-CLI 
npm insta.]]></description><category></category></item><item><title><![CDATA[vue3.0Performance（性能）提升分析]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109361329</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109361329</guid><author>dou_xiaobao</author><pubDate>Thu, 29 Oct 2020 16:16:03 +0800</pubDate><description><![CDATA[vue3.0相对于vue2.0来说性能快1.2到1.5倍，主要原因如下：
1、diff方法优化
①Vue2 中的虚拟dom是进行全量的杜比
②Vue3 新增了静态标记（PatchFlag），只比对带有 PF 的节点，并且通过 Flag 的信息得知
当前节点要比对的具体内容。

具体如下展示：

2、静态提升
① Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染
② Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可

对上面的代码开启静态提升（hois.]]></description><category></category></item><item><title><![CDATA[ES6的箭头函数，参数扩展以及解构赋值]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109315985</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109315985</guid><author>dou_xiaobao</author><pubDate>Wed, 28 Oct 2020 11:41:50 +0800</pubDate><description><![CDATA[1、箭头函数，就是函数的简写
 ①如果只有一个参数，() 可以省
 ②如果只有一个return，{}可以省

// 普通函数
function name() {

}
// 箭头函数，去掉 function， 加上 =&gt;
() =&gt; {
}

let show1 = function () {
    console.log('abc')
}

let show2 = () =&gt; {
    console.log('abc')
}

show1() // 调用函数  abc
show2.]]></description><category></category></item><item><title><![CDATA[JSON的格式、方法和应用]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109316523</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109316523</guid><author>dou_xiaobao</author><pubDate>Wed, 28 Oct 2020 11:41:07 +0800</pubDate><description><![CDATA[1、JSON 格式
JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式
JSON 是 JS对象 的严格子集
JSON 的标准写法
只能用双引号
所有的key都必须用双引号包起来
2、JSON 对象和方法
JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法
①JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
②JSON.stringify(obj) ：接受一个.]]></description><category></category></item><item><title><![CDATA[ES6中定义变量以及简介]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109315519</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109315519</guid><author>dou_xiaobao</author><pubDate>Tue, 27 Oct 2020 17:29:01 +0800</pubDate><description><![CDATA[1、变量 let 和 常量 const
(1)原来定义变量 var 存在的的问题
① 可以重复声明，没有报错和警告
② 无法限制修改
③没有块级作用域， { }

(2)let 和 const
① 不能重复声明
② 都是块级作用域, { } 块内声明的，块外无效
③ let 是变量，可以修改
④ const 是常量，不能修改
⑤ 块级作用域举例

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="U]]></description><category></category></item><item><title><![CDATA[ES6之生成器函数generator]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109308208</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109308208</guid><author>dou_xiaobao</author><pubDate>Tue, 27 Oct 2020 15:07:51 +0800</pubDate><description><![CDATA[1、generator 生成器函数简介
（1）普通函数，一路执行到底
（2）generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权。
yield 有放弃、退让、退位的意思。
需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
generator函数前面加一个 * 两边可以有空格，或靠近函数或function
实际生成多个小函数，实现走走停停的效果。
function show() {
    console.log('a')
    console.log(']]></description><category></category></item><item><title><![CDATA[ES6之Promise详细介绍]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109295095</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109295095</guid><author>dou_xiaobao</author><pubDate>Tue, 27 Oct 2020 11:11:53 +0800</pubDate><description><![CDATA[1、简介
ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
promise本身是同步的，promise的回调then是异步的
let oP = new Promise( (res, rej) =&gt; {
     console.log(1);
});
console.log(2);
//结果：1
//	   2

2、具体应用
（1）① 异步和同步
   异步，操作之间没有关系，同时执行多个操作， 代码复杂
   同步]]></description><category></category></item><item><title><![CDATA[ES6之数组新增方法 （map，reduce，filter，forEach）]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109291147</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109291147</guid><author>dou_xiaobao</author><pubDate>Mon, 26 Oct 2020 16:09:42 +0800</pubDate><description><![CDATA[对于数组，ES6中新增4个很实用的方法，分别有：map ，reduce，filter，forEach。接下来我们来一一讲解。
1、map  映射 一个对一个
let arr = [6，10，12, 5, 8]
let result = arr.map(function (item) {
    return item*2
})
let result2 = arr.map(item=&gt;item*2) // es6的箭头函数简写，若想了解，后面的文章有介绍
console.log(result)
cons]]></description><category></category></item><item><title><![CDATA[面向对象-基础（ES5与ES6对比）]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109289301</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/109289301</guid><author>dou_xiaobao</author><pubDate>Mon, 26 Oct 2020 15:33:14 +0800</pubDate><description><![CDATA[一、ES5的面向对象
1、概括：类和构造函数一样
2、属性和方法分开写的
3、具体案例讲解
//定义一个类（构造函数）
function User(name, pass) { 
    this.name = name
    this.pass = pass
}

在js中，每个构造函数都有一个原型属性prototype，因为这个属性的值通常是一个对象，又叫原型对象！通常在这个原型对象中，会包含一个constructor属性指向该原型对象的构造函数。

//定义构造函数user的原型方法
User.pro]]></description><category></category></item><item><title><![CDATA[HTTP协议与HTTPS]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108536226</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108536226</guid><author>dou_xiaobao</author><pubDate>Fri, 11 Sep 2020 16:07:37 +0800</pubDate><description><![CDATA[1、什么是HTTP？
链接: link.
HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTT]]></description><category></category></item><item><title><![CDATA[浏览器从输入 URL 到页面加载显示完成，这个过程中都发生了什么？]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108532033</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108532033</guid><author>dou_xiaobao</author><pubDate>Fri, 11 Sep 2020 14:29:42 +0800</pubDate><description><![CDATA[浏览器从我们输入 URL 到页面加载显示完成展示出我们想看到的结果页面和功能，中间主要经历了以下几个步骤，概括为：
(DNS解析）=&gt;  ①
(TCP连接:三次握手)    =&gt;  ②
(发送HTTP请求)   =&gt;    ③
(服务器处理请求并返回HTTP报文)   =&gt;   ④
(浏览器解析渲染页面)   =&gt;   ⑤
(连接结束：四次挥手)   =&gt;  ⑥
具体每个步骤的详解如下：
1、浏览器根据请求的URL交给DNS域名解析，找到真实IP。
DNS（Domain ]]></description><category></category></item><item><title><![CDATA[浏览器缓存机制之cookie localStorage sessionStorage]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108531533</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108531533</guid><author>dou_xiaobao</author><pubDate>Fri, 11 Sep 2020 12:22:58 +0800</pubDate><description><![CDATA[Web Storage 是对 Cookie 的拓展
一、cookie
简介
Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。一般记住密码，下次自动登录，购物车功能，记录用户浏览数据，进行商品（广告）推荐等场景下使用~（现在基本大多数登录的合法性验证都是用cookie验证的）。
优点
优点：兼容性最好，几乎所有的浏览器都支持
缺点
1、Cookie 存储空间小，仅为4kb；
2、过多的 Cookie 会带来巨大的性能浪费
因为Cookie 是紧跟域]]></description><category></category></item><item><title><![CDATA[微信小程序之数据的双向绑定]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108244011</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108244011</guid><author>dou_xiaobao</author><pubDate>Wed, 26 Aug 2020 17:59:37 +0800</pubDate><description><![CDATA[1、首先，我们先写个输入框，然后将输入的内容赋值给data中的num变量。
注1：小程序中对输入框标签要求严格，闭合标签必须要存在，否则会报错，代码如下
注2：bindinput是绑定输入框的属性名，与vue中的v-bind:input一样的~
&lt;input type="text"  bindinput='bindInput' /&gt;
&lt;view&gt;{{num}}&lt;/view&gt;

&lt;script&gt;
Page({
  data: {
    num: 0
  },
]]></description><category></category></item><item><title><![CDATA[微信小程序之小白用户]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108239699</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108239699</guid><author>dou_xiaobao</author><pubDate>Wed, 26 Aug 2020 15:45:03 +0800</pubDate><description><![CDATA[数据绑定
1 普通写法
小程序中，数据绑定和vue中数据绑定有些类似~数据类型可以是字符串，数字，布尔值，对象等等
1、text标签相当于页面的span 标签 是一个行内元素
2、view标签相当于页面的div标签
&lt;view&gt; {{ message }} &lt;/view&gt;
&lt;view&gt; {{ introduce.name }} &lt;/view&gt;
&lt;view data-num=“{{num}}”&gt; {{ message }} &lt;/view&gt;]]></description><category></category></item><item><title><![CDATA[如何改变url并且页面不进行刷新]]></title><link>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108099942</link><guid>https://blog.youkuaiyun.com/dou_xiaobao/article/details/108099942</guid><author>dou_xiaobao</author><pubDate>Wed, 19 Aug 2020 15:03:10 +0800</pubDate><description><![CDATA[如何改变url并且页面不进行刷新？
1、location.hash（哈希方式）

控制台里面输入：location.hash=‘aaa’,则地址栏里会相应的变化，并且不会刷新页面

2、html5中 history的对象修改url，也不会刷新页面
history.pushState(对象参数，title参数，url）

之前的地址变成了bbb，并且#就没有了
history.back()  相当于返回上一级url ===【 history.go(-1) ==&gt; 跳到特定顺序的url】
history.]]></description><category></category></item></channel></rss>