<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[wanda000的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/wanda000</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; wanda000]]></copyright><item><title><![CDATA[【高性能JS】重绘、重排与浏览器优化方法]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104824686</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104824686</guid><author>wanda000</author><pubDate>Thu, 12 Mar 2020 18:10:22 +0800</pubDate><description><![CDATA[基础知识

浏览器下载完页面中的所有组件--HTML标记、JS、CSS、图片--之后会解析并生成两个内部数据结构：

DOM 树：表示页面结构
	渲染树：表示DOM节点如何显示
网页生成的过程

HTML被HTML解析器解析成DOM 树
	css被css解析器解析成CSSOM（CSS Object Model）
	attachment DOM 树和CSSOM，生成渲染树(Render Tree)
...]]></description><category></category></item><item><title><![CDATA[vue模板编译（原理篇）]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104804629</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104804629</guid><author>wanda000</author><pubDate>Wed, 11 Mar 2020 20:18:34 +0800</pubDate><description><![CDATA[概念

平时使用模板时，可以在模板中使用变量、表达式或者指令等，这些语法在html中是不存在的，那vue中为什么可以实现？这就归功于模板编译功能。
模板编译的作用是生成渲染函数，通过执行渲染函数生成最新的vnode，最后根据vnode进行渲染。那么，如何将模板编译成渲染函数？



将模板编译成渲染函数

此过程可以分成两个步骤：先将模板解析成AST（abstract syntax tree,抽象...]]></description><category></category></item><item><title><![CDATA[javascript如何判断Object是空对象]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104780479</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104780479</guid><author>wanda000</author><pubDate>Tue, 10 Mar 2020 18:43:53 +0800</pubDate><description><![CDATA[判断一个对象是否为空对象，本文给出三种判断方法：

1.最常见的思路，for...in... 遍历属性，为真则为“非空数组”；否则为“空数组”


for (var i in obj) { // 如果不为空，则会执行到这一步，返回true
    return true
}
return false // 如果为空,返回false


2.通过 JSON 自带的 stringify() 方法来判断...]]></description><category></category></item><item><title><![CDATA[简述Socket连接的过程]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104758793</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104758793</guid><author>wanda000</author><pubDate>Mon, 09 Mar 2020 18:57:40 +0800</pubDate><description><![CDATA[服务器端：

创建socket，绑定端口
	开始监听（listen）
	等待并接受客户端连接请求，返回新的socket（accept）
	由新socket与客户端进行io交互。
	关闭连接（可能主动，也可能被动）
客户端：

创建socket（绑定本机随机端口，这个系统自行完成）
	连接服务器（connect） 与服务器进行io交互
	关闭连接（可能主动，也可能被动） 以上是基于tcp协议的过程，...]]></description><category></category></item><item><title><![CDATA[TCP、UDP、HTTP及Socket的简单讲解]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104737092</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104737092</guid><author>wanda000</author><pubDate>Sun, 08 Mar 2020 17:53:14 +0800</pubDate><description><![CDATA[1、TCP/IP是个协议组，可分为三个层次：网络层、传输层和应用层。

在网络层有IP协议、ICMP协议、ARP协议、RARP协议和BOOTP协议。

在传输层中有TCP协议与UDP协议。

在应用层有FTP、HTTP、TELNET、SMTP、DNS等协议。

因此，HTTP本身就是一个协议，是从Web服务器传输超文本到本地浏览器的传送协议。

2、HTTP协议是建立在请求/响应模型上的。首先由客...]]></description><category></category></item><item><title><![CDATA[OSI 七层模型与 TCP IP 五层模型]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104701277</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104701277</guid><author>wanda000</author><pubDate>Fri, 06 Mar 2020 18:07:10 +0800</pubDate><description><![CDATA[OSI分层 （7层）：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。 TCP/IP分层（4层）：网络接口层、 网际层、运输层、 应用层。 五层协议 （5层）：物理层、数据链路层、网络层、运输层、 应用层。



1） 物理层：利用传输介质为数据链路层提供物理连接，实现比特流的透明传输

2）数据链路层：通过各种控制协议，将有差错的物理信道变为无差错的、能可靠传输数据帧的数据链路

3...]]></description><category></category></item><item><title><![CDATA[Git，交互式变基，合并多个commit]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104682150</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104682150</guid><author>wanda000</author><pubDate>Thu, 05 Mar 2020 19:30:14 +0800</pubDate><description><![CDATA[在使用 Git 作为版本控制的时候，我们可能会由于各种各样的原因提交了许多临时的 commit，而这些 commit 拼接起来才是完整的任务。那么我们为了避免太多的 commit 而造成版本控制的混乱，通常我们推荐将这些 commit 合并成一个。

1,查看提交历史，git log

首先你要知道自己想合并的是哪几个提交，可以使用git log命令来查看提交历史，假如最近4条历史如下：


co...]]></description><category></category></item><item><title><![CDATA[flex兼容ios（iphone6）]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104663347</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104663347</guid><author>wanda000</author><pubDate>Wed, 04 Mar 2020 21:42:55 +0800</pubDate><description><![CDATA[开发过程使用flex简直不要太6，但是如果只是写新版本的语法形式，是肯定存在兼容性问题的（安卓机基本没啥问题，主要是ios）

一、问题

flex布局分为旧版本dispaly: box；过渡版本dispaly: flex box；以及现在的标准版本display: flex；

Android

2.3 开始就支持旧版本display:-webkit-box;

4.4 开始支持标准版本disp...]]></description><category></category></item><item><title><![CDATA[sourceTree“重置提交”和“提交回滚”的区别]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104641733</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104641733</guid><author>wanda000</author><pubDate>Tue, 03 Mar 2020 21:17:34 +0800</pubDate><description><![CDATA[相信用过sourceTree的伙伴们都认识这两,但是不一定用过这两个功能,甚至是不能很好的把握它两的区别,根据自己最近亲身测试,总算是能小小的总结一下了



首先这儿假如,历史版本已经出现了1、2、3、4、5、6、7、8、9，当前的版本是9，讲述执行上面两种操作，分别会有什么效果

1.提交回滚

假如我选中6，执行“提交回滚”之后，你会发现7，8，9的历史操作还在，只是将6的操作还原了，这时候...]]></description><category></category></item><item><title><![CDATA[git merge一个指定文件]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104618988</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104618988</guid><author>wanda000</author><pubDate>Mon, 02 Mar 2020 20:27:56 +0800</pubDate><description><![CDATA[git里面的merge是全merge ，没有单个文件merge。

要实现一个文件的merge ，可以使用git checkout 这个命令

git checkout xxxx（分支名） xxxx（文件名）

这个命令是覆盖的意思，是说把另一个分支的文件覆盖到当前的分支上，

所有，最好不要在master上面操作，可以建立一个临时的分支，然后，commit。

在merge到master分支上...]]></description><category></category></item><item><title><![CDATA[详说 Cookie, LocalStorage 与 SessionStorage]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104598188</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104598188</guid><author>wanda000</author><pubDate>Sun, 01 Mar 2020 19:27:26 +0800</pubDate><description><![CDATA[基本概念

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTM...]]></description><category></category></item><item><title><![CDATA[TCP和UDP的区别]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104580643</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104580643</guid><author>wanda000</author><pubDate>Sat, 29 Feb 2020 20:03:18 +0800</pubDate><description><![CDATA[TCP协议与UDP协议的区别

首先咱们弄清楚，TCP协议和UCP协议与TCP/IP协议的联系，很多人犯糊涂了， 一直都是说TCP协议与UDP协议的区别，我觉得这是没有从本质上弄清楚网络通信！ TCP/IP协议是一个协议簇。里面包括很多协议的，UDP只是其中的一个， 之所以命名为TCP/IP协议，因为TCP、IP协议是两个很重要的协议，就用他两命名了。

TCP/IP协议集包括应用层,传输层，网络...]]></description><category></category></item><item><title><![CDATA[webpack，异步加载，代码分割，require.ensure]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104565820</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104565820</guid><author>wanda000</author><pubDate>Fri, 28 Feb 2020 22:26:49 +0800</pubDate><description><![CDATA[webpack异步加载的原理

webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这 个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个 模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。

场景分析:

比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百...]]></description><category></category></item><item><title><![CDATA[https中的对称加密和非对称加密]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104547561</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104547561</guid><author>wanda000</author><pubDate>Thu, 27 Feb 2020 23:17:06 +0800</pubDate><description><![CDATA[大家都知道：HTTPS = HTTP + SSL/TSL 也就是，https是在http基础上加了一层加密。 这也由此衍生出一个问题 —— https的加密用的是对称加密还是非对称加密，是否全程都是用的一种加密方式？ 这个问题引起了我的兴趣，去查阅了下资料，了解了一下，这里做个简单的总结备忘。

1. 什么是对称加密和非对称加密？

这个详细来说有点复杂，这里简单的说下：


对称加密就是加密和解...]]></description><category></category></item><item><title><![CDATA[async 函数的实现原理]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104505152</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104505152</guid><author>wanda000</author><pubDate>Tue, 25 Feb 2020 20:54:15 +0800</pubDate><description><![CDATA[基本概念

ES2017 标准引入了 async 函数，使得异步操作变得更加方便。

async 函数是什么？一句话，它就是 Generator 函数的语法糖。

前文有一个 Generator 函数，依次读取两个文件。


const fs = require('fs');

const readFile = function (fileName) {
  return new Promise(...]]></description><category></category></item><item><title><![CDATA[Vue.js异步更新DOM策略及nextTick]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104488597</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104488597</guid><author>wanda000</author><pubDate>Mon, 24 Feb 2020 23:50:06 +0800</pubDate><description><![CDATA[本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。


引入：DOM的异步更新


&lt;template&gt;
  &lt;div&gt;
    &lt;div ref="test"&gt;{{test}}&lt;/div&gt;
    &lt;button @click="handle...]]></description><category></category></item><item><title><![CDATA[前端 http 缓存]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104468046</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104468046</guid><author>wanda000</author><pubDate>Sun, 23 Feb 2020 21:36:34 +0800</pubDate><description><![CDATA[前端面试常问第二大问题是http缓存相关内容。说真的，http缓存相关的细节比较多，并且 http 常用协议版本有1.0、1.1，（本文暂不讨论http2.0）。

缓存相关 header

我们先罗列一下和缓存相关的请求响应头。


Expires


响应头，代表该资源的过期时间。


Cache-Control


请求/响应头，缓存控制字段，精确控制缓存策略。


If-Modified-...]]></description><category></category></item><item><title><![CDATA[webpack打包bundle文件解析]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104452923</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104452923</guid><author>wanda000</author><pubDate>Sat, 22 Feb 2020 23:29:09 +0800</pubDate><description><![CDATA[### 一、一个入口，一个文件
webpack.config.js

```
module.exports = {
 entry: './main.js', // 一个入口
 output: {
  filename: 'bundle.js'
 }
};
```

main.js
```
document.write('&lt;h1&gt;Hello World&lt;/h1&gt;'...]]></description><category></category></item><item><title><![CDATA[javascript 隐式转换]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104436849</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104436849</guid><author>wanda000</author><pubDate>Fri, 21 Feb 2020 23:07:50 +0800</pubDate><description><![CDATA[你有没有在面试中遇到特别奇葩的js隐形转换的面试题，第一反应是怎么会是这样呢？难以自信，js到底是怎么去计算得到结果，你是否有深入去了解其原理呢？下面将深入讲解其实现原理。
其实这篇文章初稿三个月前就写好了，在我读一些源码库时，遇到了这些基础知识，想归档整理下，就有了这篇文章。由于一直忙没时间整理，最近看到了这个比较热的题，决定把这篇文章整理下。

```
const a = {
 i: 1,
...]]></description><category></category></item><item><title><![CDATA[通俗易懂 Promise 原理]]></title><link>https://blog.youkuaiyun.com/wanda000/article/details/104419637</link><guid>https://blog.youkuaiyun.com/wanda000/article/details/104419637</guid><author>wanda000</author><pubDate>Thu, 20 Feb 2020 22:25:50 +0800</pubDate><description><![CDATA[介绍

为了让大家更容易理解，我们从一个场景开始讲解，让大家一步一步跟着思路思考，相信你一定会更容易看懂。

考虑下面一种获取用户id的请求处理


//例1
function getUserId() {
    return new Promise(function(resolve) {
        //异步请求
        http.get(url, function(results)...]]></description><category></category></item></channel></rss>