index.xml

<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
    <channel>
        <title>Mylo</title>
        <link>http://flyingmylo.com/</link>
        <description>This is my cool site</description>
        <generator>Hugo -- gohugo.io</generator><language>zh-CN</language><lastBuildDate>Thu, 28 Nov 2024 20:09:46 &#43;0800</lastBuildDate>
            <atom:link href="http://flyingmylo.com/index.xml" rel="self" type="application/rss+xml" />
        <item>
    <title>十公里</title>
    <link>http://flyingmylo.com/posts/take-up-running/</link>
    <pubDate>Thu, 28 Nov 2024 20:09:46 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/take-up-running/</guid>
    <description><![CDATA[2024年 11 月 24 号，并不像往常的周日一样躺在床上睡懒觉，这是一个令人期待的早晨。昨天晚上定了今天早上八点的闹钟，准时起床，洗脸刷牙，随后吃了一片披萨🍕，换上过时的老款跑鞋，准备下楼做热身运动。
对，今天准备挑战一下自己跑个十公里，这将是我第一个十公里慢跑，心里还是有一点点的兴奋和激动。从十月份开始想要培养一个运动的爱好，一方面可以强身健体，另一方面还能把自己从繁忙的工作中抽离出来。所以选择了开始慢慢跑步，上个月只跑了三次，但还是对跑步这项运动有了兴趣，没什么成本，也不需要刻意学习和训练，唯一的成本也就是时间了。由于通勤时间比较长，工作日加班次数也不固定，所以决定早起晨跑，不过早起确实比较困难，但是当我第一天早起时还挺兴奋的，六点半的闹钟开始震动，脑子里是又困又清醒。
于是我就开启了跑步的旅程。
这周二和周四分别跑了 6.01 公里和 4.91 公里，心率一直很高，平均心率冲到了 170 ，让我有点不知所措，上周跑的几次平均心率都在 150 左右，后来咨询了一下沨哥的建议，让我不要太在意心率，也有可能是天气影响的，冬天降温时跑步心率也会增高，放慢速度让心率慢慢降下来就好了，不要刻意追求速度，跑前热身更久一些，还分享了很专业的拉伸动作，感谢沨哥。带着这些疑惑调整了心态，开始了今天的十公里。
热身完毕，蓄势待发，跑起来之后看着心率还是在 170 左右，但是体感舒适，所以也就没放在心上。
继续跑，今天的耳机里播着法兹的新专辑《东方101 与未来马场》，这张旧曲新编的合辑，已经霸占了我最近播放量的前列，非常有诚意的一张新作品，把以前的老歌重新制作，赋予了新的能量和生命力，编曲也更加浑厚和丰富，贝斯简直是太拨动我的心弦了。回想四年前在杭州第一次看法兹的现场，被深深震撼，已经迫不及待想要看下个月在摩登天空的演出了。关于新专辑的详情介绍：过往十五年间，我们只是微不足道的烟尘，迷失、搏击、幻想成为一体。握着彼此手，化身一粒石子奋力坠入水中，涟漪如生命般荡开。告诉自己，继续走，再慢一点。虽未到达草原，但我们的歌谣从不单调贫瘠。
2020.08.20 法兹演出后的现场" 2020.08.20 法兹演出后的现场 
跑了差不多七公里的时候，配速还是七分多钟，心率也一直没降下来，我就抬起胳膊保持静止，盯着手环上的数据四五秒钟，我惊人地发现心率在直线下降至 135 左右，令我非常诧异，心想是不是手环有 bug 啊！然后我就突然兴奋起来，不管三七二十一加速往前冲，跑到了 616 的配速，兴奋劲儿还没降下来就一直跑，跑着跑着膝盖有点不舒服也直接忽略不计了，继续跑完剩下的两公里就完成了今天的目标，跑着跑着感觉膝盖又没有不舒服了，觉得自己能就这么一直跑下去，左右脚轮流向前一直循环。最后两圈跑到了 552 的配速，终于，第一个十公里解锁成功。心里有了莫大的满足和开心，跑完之后开始做拉伸活动，回到家里冲完澡，吃了鸡蛋、牛奶、披萨补充能量，开启了精神抖擞的一天。
希望自己能够坚持一直跑下去，为自己加油。
 我很想知道，跑步的真谛究竟是什么。
我也是，灰二哥，我也想知道，虽然我一直在跑，但现在我还是不知道这个问题的答案。直到现在，我跑步时都仍会思考这个问题，今后也会不停问自己。 我真的很想知道。
所以，让我们一起跑吧，跑到天涯海角。
信念发出的光芒，永远存在我们心里。在黑暗中照亮延伸向前的道路，清楚地为我们指引方向。
———《强风吹拂》
 以前我总是会有迷茫和不知所措的时候，也想要一直寻找一个答案，但是随着岁月流逝，后知后觉的我才意识到，所有的问题好像并没有什么标准答案，只要我们不停下脚步，一直向前走，迟早都会发现，答案也许就在风中飘扬着。
心率/配速" 心率/配速]]></description>
</item>
<item>
    <title>使用 nginx 部署一个 hello world</title>
    <link>http://flyingmylo.com/posts/nginx-conf/</link>
    <pubDate>Tue, 28 Mar 2023 20:54:28 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/nginx-conf/</guid>
    <description><![CDATA[上传静态资源 首先把本地的一个 index.html 文件上传至服务器，然后发布进行访问。
首先进入到 root 目录下新建 www 文件夹
cd /root &amp;&amp; mkdir www 然后在本地执行以下命令，将 index.html 文件上传至 /root/www 目录下：
// 上传本地文件 scp index.html root@123.249.15.191:/root/www 其他文件传输操作：
 上传本地目录到服务器：scp -r dist root@123.249.15.191:/root/www 从服务器下载文件：scp root@123.249.15.191:/root/www/index.html 从服务器下载目录：scp -r root@123.249.15.191:/root/www /var/www  安装 nginx 执行命令以检查 yum 源中是否存在 nginx 包：
yum list nginx 已安装的示例图" 已安装的示例图  使用 yum 安装 nginx：
yum install -y nginx 出现 Complete! 提示即安装成功： 已安装的示例图" 已安装的示例图  此时我们可以通过浏览器访问服务器地址，会看到 nginx 默认页面，如下： nginx 默认页面" nginx 默认页面]]></description>
</item>
<item>
    <title>清理 Git 文件夹过期引用</title>
    <link>http://flyingmylo.com/posts/git-slim/</link>
    <pubDate>Tue, 20 Dec 2022 17:03:14 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/git-slim/</guid>
    <description><![CDATA[Git 版本仓库提交过多，会导致项目根目录下的 .git 文件夹体积巨大，原因可能不只是单纯的提交历史过多，而是历史提交中包含有对大文件的引用，即使现在的项目中已经不存在这些文件了，但其引用关联依旧会被 git 保留下来。
踩坑方案一 git filter-branch 命令可以改写历史中大量的提交，但是它有很多陷阱，而且官方文档中已经不推荐使用它来重写历史了，当然，这个坑是我踩过之后才知道的。
识别查询大文件 找到项目根目录下的 .idx 文件，路径：
 .git/objects/pack/pack-************.idx
 执行：
 git rev-list --objects --all | grep -f &lt;(git verify-pack -v .git/objects/pack/******.idx| sort -k 3 -n | cut -f 1 -d &quot; &quot; | tail -10)
 运行结果大致如下：
c0b33abdf3af4f0a4ae82d6243954eeb344432d9 src/components/Emoji/emoji.png a08b3b0f766d26729cbaf0b7e86212b0ca4a5569 dist/js/2a10361c.async.js 1d26f0da81c885c676badb026367a47183013fb5 dist/js/84ad94bf.async.js eb07071cdea7e019953a3a6778a4bb6e728ea13d dist/js/4922a65f.async.js 7ddf057a0e26f300137c84cf03dbe088a69da488 dist/js/62f9d99c.async.js 删除文件 将该文件从历史记录的所有 tree 中移除，执行：
 git filter-branch --index-filter 'git rm --cached --ignore-unmatch src/components/Emoji/emoji.png'
 注：需要依次执行该命令去删除这些大文件，可能会有很多 jpg/js.]]></description>
</item>
<item>
    <title>面经记录</title>
    <link>http://flyingmylo.com/posts/interview/</link>
    <pubDate>Wed, 13 Jul 2022 21:27:03 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/interview/</guid>
    <description><![CDATA[vue 相关  mixin 相关场景以及利弊，拥有多个属性时的执行顺序， v-model 原理，在下拉选择器组件中是怎么实现的 filter 怎么实现，使用场景 插槽的实现原理，如何传值 v-for 中 key 的作用，延伸到 diff 实现，不同位置的比较 vnode 概念 v-if 控制 dom 显隐时， vdom 是如何处理的 watch 监听是的 deep: true 实现原理 nextTick 原理 computed 和 watch 的区别 Vue.use 和 Vue.install Vue 中手动 extend data 中的属性是定义在 MVVM 中的哪个环节  css 相关  回流和重绘的概念，绝对定位是否会导致回流 flex: 1 的分别代表什么属性以及作用 伪元素和伪类的区别，分别有哪些 visibility: hidden 和 opacity 是否触发点击事件  js 相关  let/const/var 区别，用 const 声明对象时，是否可以改变对象的属性值，为什么 深度优先搜索和广度优先搜索 如何证明 js 对象里存在循环引用 类型判断的方法，typeof 对象的类属性 实例对象是否是 Function ，instanceof Function 结果 promise 执行顺序，事件循环 es5 模拟 class 的实现 localStorage 如何实现过期时间 手机号正则  工程化相关  介绍 webpack 常用的配置以及功能 webpack 多页面有多个入口时如何配置 source-map 分类，如何配置和调试 webpack 中怎么隔离 css 性能优化方案，代码/打包/资源加载方面 热更新原理  概念类问题  http/https 区别 介绍 options 请求的意义 MVVM/MVC 的区别，如何实现一个 MVVM 简述 XSS 和 CSRF 的概念，并列举几种安全防范策略  编程题  编写一个函数，大小写字母取反  const fn = (string) =&gt; { let ans = &#39;&#39; for (let v of string) { ans += v.]]></description>
</item>
<item>
    <title>算法之深度优先搜索与广度优先搜索</title>
    <link>http://flyingmylo.com/posts/dfs-bfs/</link>
    <pubDate>Thu, 07 Jul 2022 21:27:33 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/dfs-bfs/</guid>
    <description><![CDATA[深度优先搜索 DFS 深度优先搜索（Depth-First-Search）和广度优先搜索（Breadth-First-Search）都是一种用来遍历或者搜索树或图这种数据结构的算法。以树为例，深度优先搜索的过程会从根节点出发，尽可能深地遍历每个子节点，而且每个节点只能访问一次，是一个不断回溯的过程。
实现方法大致如下：
 首先将根节点放入栈中 从栈中取出第一个节点，并检验它是否为目标  如果找到目标，则结束搜索并返回结果 否则将它某一个尚未检验过的直接子节点放入栈中   重复步骤 2 如果不存在未检测过的直接子节点  将上一级节点放入栈中 重复步骤 2   重复步骤 4 若栈为空，表示整张图都已检查过并且没有要查找的目标，结束搜索  另外需要我们了解的一种数据结构：栈。
我们可以把盏比喻成一包手帕纸，每张纸巾都是按序一张一张放进去的，使用的时候是一张一张从最上边开始拿出来的。所以栈是一种后进先出（Last In First Out, LIFO）的数据结构。
示例：通过 DFS 实现复制对象的复制
const copyDFS = function(obj) { if (obj === null || typeof obj !== &#34;object&#34;) { return obj; } const copyObj = Array.isArray(obj) ? [] : {}; for (const key in obj) { copyObj[key] = copyDFS(obj[key]); } return copyObj; } 示例：获取对象的所有键]]></description>
</item>
<item>
    <title>深入了解现代网络浏览器（2/4）【译】</title>
    <link>http://flyingmylo.com/posts/inside-look-at-modern-web-browser-2/</link>
    <pubDate>Sat, 28 May 2022 17:27:11 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/inside-look-at-modern-web-browser-2/</guid>
    <description><![CDATA[导航栏里都发生了些什么 这是 4 篇博客系列中的第 2 篇，来窥探 Chrome 的内部工作原理。在上一篇文章中，我们探讨了进程和线程在处理浏览器不同模块时的区别。本篇文章我们将会更深层次地挖掘线程和进程为了渲染一个网站是如何进行有序通信的。
我们来看一个浏览器里简单的例子：在浏览器中输入一个 URL 地址，接着浏览器会从网络中请求数据然后渲染出一个页面。在这篇文章中，我们将会聚焦于用户请求一个站点随后浏览器准备渲染页面这一部分，也就是我们熟知的导航。
始于一个浏览器进程 正如我们已经在 上篇中阐述过的 GPU/CPU/内存/多进程架构 一样，浏览器进程处理了其每个标签页的所有任务。浏览器进程拥有像 UI 线程这样绘制按钮或者输入框的进程，还有网络线程从网络中接收数据，存储线程控制文件的访问等等这些进程。当我们在地址栏中输入一个 URL 地址时，我们的输入就会被浏览器进程里的 UI 线程处理。 图1：上方是浏览器的用户界面，下方则是浏览器进程的示意图，其中包含了用户界面、网络和存储线程。" 图1：上方是浏览器的用户界面，下方则是浏览器进程的示意图，其中包含了用户界面、网络和存储线程。 
一个简单的导航 第一步：处理输入 当用户开始在地址栏中输入的时候，UI 线程首要询问的是“这是一个搜索关键词还是一个地址咧？”。在 Chrome 中，地址栏同样是一个搜索框，所以 UI 线程需要解析并且决定是要把输入发送给搜索引擎，还是直接显示这个你请求的网站。 图2：UI 线程询问此输入是搜索关键字还是一个地址" 图2：UI 线程询问此输入是搜索关键字还是一个地址 
第二步：开始导航 当用户敲了回车键，UI 线程会初始化一个网络命令去获取网站内容，此时在标签页的左上角会显示一个转圈圈的 loading ，随后网络线程会通过合适的协议，比如 DNS 查询为该请求建立 TLS 链接。 图3：UI 线程与网络线程通信，以导航到 mysite.com 站点" 图3：UI 线程与网络线程通信，以导航到 mysite.com 站点  此时网络进程可能会收到一个服务器的重定向头信息，比如 HTTP 301 ，这种情况下，网络线程就会和 UI 线程对于服务器正在请求重定向进行通信，然后向另一个 URL 发起请求。
第三步：读取响应 当响应正文开始返回的时候，网络线程就会在必要时查看字节流的前几个字节，响应头中的 Content-Type 字段说明了数据的类型，但是由于它可能会出错或是不准确，所以此处会有一个 MIME Type Sniffing 检查来确认该数据是什么类型。这算是 源码 中提到的一个“小花招”，具体可以参见文章中的注释以了解不同的浏览器是如何处理 content-type/payload 的。 图4：响应头包含了 Content-Type 用以说明数据类型，而 payload 表示真实传输的数据"]]></description>
</item>
<item>
    <title>深入了解现代网络浏览器（1/4）【译】</title>
    <link>http://flyingmylo.com/posts/inside-look-at-modern-web-browser-1/</link>
    <pubDate>Wed, 18 May 2022 23:40:32 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/inside-look-at-modern-web-browser-1/</guid>
    <description><![CDATA[📌 本篇原文发表于 2018.09.05，正文中出现的有关于时间概念的语句，阅读时请注意切换语境。 👉🏻原文链接
 中央处理器/图形处理器/内存/多进程架构 在这个包含 4 篇文章的博客系列中，我们将从高阶架构到具体的渲染细节来深入 Chrome 浏览器内部了解其是怎么运作的。如果你曾经好奇浏览器是怎么把代码转变成一个功能齐备的网站，或者你并不确定为什么一个具体的技术细节能够带来性能提升，那么这个系列正好是为你准备的。
作为系列第一篇，我们将会了解一些核心的计算机术语和 Chrome 浏览器的多进程架构。如果你对 CPU/GPU 和 进程/线程已经很熟悉，可以直接跳到 浏览器架构 章节。
计算机的核心 - CPU 和 GPU  为了理解浏览器所运行的环境，我们需要先了解计算机的一些部件以及它们是做什么的。
 中央处理器 CPU 首先是中央处理器（CPU, Central Processing Unit）。CPU 可以被看作是一台计算机的大脑，一个 CPU 内核可以想象成一位办公室工作人员，能够处理一个接一个被安排的多个任务，可以处理一切从数学甚至到艺术领域的难题，而且它知道如何去响应一个用户的指令。以前的大多数 CPU 都是单个芯片，一个内核就相当于是一个 CPU 被嵌入到一个芯片上。在现代的硬件条件下，出现了多核处理器，也赋予了手机、笔记本更强的计算能力。
图 1：四个 CPU 内核就像彼此相邻的办公室职员一样处理多个任务" 图 1：四个 CPU 内核就像彼此相邻的办公室职员一样处理多个任务 
图形处理器 GPU 图形处理器是计算机里的另一个部件。和 CPU 不同的是，GPU 更擅长在多核之间处理一些简单的任务。顾名思义，GPU 最初是被开发成处理图形任务的模块，这也是为什么在很多图形计算的背景下，会把“使用 GPU”或“支持 GPU”和快速渲染、流畅的交互体验相关联在一起。近些年来，有了 GPU 加速的计算能力，也使 GPU 独立承载越来越多的计算成为可能。
图2：多个带着扳手🔧️的 GPU 内核，表明它们只能处理有限的任务" 图2：多个带着扳手🔧️的 GPU 内核，表明它们只能处理有限的任务]]></description>
</item>
<item>
    <title>Git 常用命令</title>
    <link>http://flyingmylo.com/posts/git-command/</link>
    <pubDate>Thu, 18 Jul 2019 15:30:06 &#43;0800</pubDate>
    <author>Mylo</author>
    <guid>http://flyingmylo.com/posts/git-command/</guid>
    <description><![CDATA[新建本地分支并切换到新分支
git checkout -b feat/abc 本地分支推送到远程（x）
git push origin feat/abc:feat/abc 设置跟踪（y）
git branch --set-upstream-to=origin/feat/abc feat/abc 举例：如果想要把新建的 abc 本地分支推送到远程并建立跟踪，需要使用以上 x 和 y 两条命令，也可以使用以下一条命令：
git push -u origin feat/abc 删除本地分支
git branch -d abc 如果一个分支还没有被推送或合并，强制删除使用 -D
git branch -D abc 删除远程分支
git push origin --delete abc 或 git push origin :abc ]]></description>
</item>
</channel>
</rss>