浏览器缓存的笔记。 使用缓存的过程 先看看是否命中强缓存（资源缓存存在且没有过期），命中则直接使用本地缓存，不发起请求。 若没有命中，再看看有没有命中协商缓存（资源存在个最后更新时间 Last-Modified 或标识 ETag）。命中…
参考了文章 你真的了解跨域吗 - 掘金 ，做了简单的笔记和思考。 什么是跨域？ 同源策略 协议、域名、端口相同 url，叫做同源。当不同源时： Cookie、LocalStorage、IndexedDB 等存储性内容无法…
谈谈浏览器的渲染过程、重排、重绘、CSS 阻塞、JS 阻塞、减少白屏时间。 简单说说浏览器的渲染过程 解析HTML，生成 DOM 树。 解析 CSS，生成 CSSOM（CSS 对象模型）。 大概是根据后代选择器之类的构建出类似…
这是一道非常经典的面试题。最近面试的时候被问到了，因为很久没复习，而且在工作中也很少会实现这种东西，结果支支吾吾了半天没有回答出来，心情非常沮丧。所以我就复习了一下，写下了这篇文章，在巩固知识的同时，…
需求 需求是在一个子容器的右上方放一个菜单栏，且要求在容器滚动时，这个菜单栏始终在顶部出现，效果如图。 一开始的想法是，使用绝对定义 postition: absolute 让菜单栏位于右上方，然后再用粘性定位 position: sticky 进行粘性布局。结果发现这两种…
之前因为工作上的一些原因，使用的 wangEditor 富文本编辑器的表格（table）功能并不能满足需求，创建的表格只是设置了 width: 100%，列的宽度的自适应的效果非常不美观。于是决定修改源码，对表格功能做了加强，使其支持调…
webpack 以其稀烂的文档而著称。和其他的技术不一样，你看文档多半是解决不了问题的，你需要的是踩坑后形成的经验。虽然很难用，但 webpack 出的很早，生态庞大，已被广泛使用。如果你的项目很简单，可以考虑使用其他的打包工具，…
个人笔记。进行源码分析的 Vue 版本为 v2.6.12 Vuejs 是什么？ 参考：Vue 2.0——渐进式前端解决方案 Vue 是一套用于构建用户界面的渐进式（Progressive）框架。 我在做 Vue 的过程中也在不停地思考它的定位，现在，我觉得…
Linux 文件权限介绍。在 Web 开发中，我们的很多服务需要部署到服务器上，而服务器几乎都是 Linux 系统。如果对 Linux 的文件系统没有清晰地认识，在遇到使用 Web 服务器（如 Nginx）时在搜索引擎上检索找到解决方法，但却不知道具体…
二分查找（Binary Search）是一种在 有序数组 中查找某一特定元素的搜索算法。 原理 首先我们用 low 和 high 定义要搜索的区域。然后取它们的中间值 mid 作为索引得到 arr[mid]，此时我们得到了两个区间：[lo…
编辑器
3283
7 mins
如果你要开发一款编辑器，但是你之前完全没有这方面的经验，完全不知道从什么地方下手，那么这系列文章就是为你准备的。文章主要针对的是图形编辑器，如果你想了解富文本编辑器，这系列文章不会涉及，但是还是有很多…
EventEmitter 是频率较高的前端面试题。另外我个人在开发一款 SVG 编辑器，很多模块需要用到观察者模式来实现解耦。但 EventEmitter 是 Nodejs 环境下才能使用的库，所以不能直接用于浏览器环境的开发。所以我考虑自己实现一套逻辑，自己定制的话也容…
2020 年度写作汇报。 学习内容 其实我今年写得博客并不多。期间有连续好几个月没有输出博客文章。那时候我是在捣弄各种东西。 比如看 CSAPP，说真的这玩意真要花好多时间看，大概看到第三章一半就没看了，因为我觉得我…
在软件工程中，创建型模式是解决对象创建问题的设计模式，试图根据实际情况使用合适的方式创建对象。基本的对象创建方式可能会导致设计上的问题，或增加设计的复杂度。创建型模式通过以某种方式控制对象的创建来解决…
本文记录了我工作中如何对后台管理项目代码进行优化的。项目使用了 Vue 和 Element UI 框架。 持续小重构可以在提测阶段或是在其他没有开发任务的时候进行，甚至当你在开发时发现需要修改的代码难以修改的时候。我觉得一个合格的…
JavaScript 的作用域和闭包的杂谈。 作用域 作用域（scope）是将名字和实体进行绑定，可以通过名字访问实体的一个机制。按照规定的语法，我们可以创建作用域，并在上面定义一些名字及它们对应的实体（比如变量、函数等），…
虽然文本截断并不是什么很复杂的东西，但浏览器却没有较完善的原生支持。于是诞生了下面各种妖魔鬼怪的解决方案。每个方案都有各自的优缺点和适用场景，请根据自己的需要选择合适的方案。 单行截断 1 2 3 4 5 .single-line-truncate { white-space: nowrap;…
补码（Two’s complement），是有符号数的一种二进制表示方式。 我们用 B2Tw 来表示一个补码。其中 w 代表二进制数的位长，B2T 的含义其实是 “二进制转补码”。 计算补码实际表示的数，我们需要…
Nginx（发音同“engine X”）是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。 本文将讲述如何使用 Nginx 在 Web 前后端分离开发中实现路由的转发。 Web 开发通常使用的是前后端分离的开发模…
初音未来的绘画过程。 作品名：1/8 使用工具：iPad 使用软件：Procreate 绘画过程视频地址：https://www.bilibili.com/video/BV1xE41157um
CSS 实现居中的一些方法的汇总，分为水平居中和垂直居中两部分进行叙述。 演示地址 水平居中：https://codepen.io/F-star/pen/KKpvVgq 垂直居中：https://codepen.…
前端的倒计时实现。 首先我们要明确，客户端的系统时间不一定是正确的，是可能有较大误差的，甚至根本就是错的。服务端如果仅仅只是返回一个结束时间戳，那是毫无意义的，因为我们无法保证客户端和服务端的时钟是同步…
基于面向对象编码风格的贪吃蛇 HTML5 小游戏的开发教程。这里实现的贪吃蛇可以穿墙。 代码 源码地址：https://github.com/F-star/html5-game 示例链接：https://f-star.…
简单说说 HTTP 协议中缓存相关的头字段，本文的形式更接近于读书笔记，进行了内容的浓缩。 If-Modified-Since 对应 Last-modified。服务器返回资源时，会携带 Last-modified，表示该资源最后修改的时间。客户端如…
最近宝可梦剑盾发售了，女主长得很可爱。该作还加入了换装的元素，个人表示很喜欢，虽然其他方面真的非常拉垮。实在是很喜欢该作的女主人设，所以画了一张同人图，黑白的，没上色，因为上色毁一生。
最近做一个H5的页面，里面有个输入验证码交互，就是移动端比较常见的那种验证码输入交互。就是那种，对，就是那种，一个数字一个下划线，移动端非常常见的那种验证码交互。实现过程中主要参考了美团外卖安卓端的具…
Vary 字段主要用于 代理服务器实现缓存服务。 不同客户端对内容格式的支持程度不同（比如有些支持数据压缩，有些不支持），所以即便请求URL 和请求方法都相同，服务器返回的数据也会不同（称为内容协商）。Vary 字段…
编辑器
1139
3 mins
我的正在开发中的 svg 编辑器个人项目：https://github.com/F-star/svg-editor ，欢迎 star。 本文是关于 SVG编辑器 开发中涉及到的一些知识点。 知识点 锁定元素（使元素不可操作…
编辑器
1234
3 mins
我的正在开发中的 svg 编辑器个人项目：https://github.com/F-star/svg-editor ，欢迎 star。 本文是系列文章，如果想看懂本文的一些术语，需要先阅读下面文章： 基于Web的sv…
简单记录一个计算机图形学方面的算法。即计算 2D 平面中，从点 A 到点 B 形成的向量的夹角。这算是游戏里面比较底层的算法，一般游戏引擎都会包装好这个方法，如 GMS2 的 point_direction 方法。常用于实现旋转一个物体，比如拨动时钟的指针…
本文是阅读 redis 官方提供的可交互入门教程而做的笔记。该官方教材带我们快速了解了redis 的一些重要特性。本文在官方教程的基础上，加入了本人的一些简单知识扩充和对一些细节的说明。 redis 是一个键值对内存数据库。 字…
一共四篇四格漫画，虽然已经毕业，但仍抱着练习的想法，于2019年3月31日正式完稿，投稿于动漫社的周年庆社刊。本漫画讲述了一个从异世界穿越到现代社会成为程序员的故事。此外还给一个群友的小说《回想》绘制…
本文简单介绍了正则表达式的元字符，和 JavaScript 提供的两个和正则表达式有关的方法：RegExp.prototype.exec() 和 String.prototype.replace()。 正则表达式通常被用来检索、…
二叉树的深度算法，是二叉树中比较基础的算法了。对应 LeetCode 第104题。然后你会发现 LeetCode 后面有些算法题需要用到这个算法的变形，比如第110题、543题。这两道题，如果你知道二叉树深度算法的递归过程，就很容易做出…
数组去重 是常见的面试考点，所以我就试着深入学习一下。网上也有很多数组去重的文章，但我自己觉得分析地不够深入，其实其中很多的实现都是重复的，可以归为一类，比如 双重循环法 和 indexOf法 的本质都是双重循…
线性排序（Linear sort），指的是 时间复杂度为 O(n) 的排序算法。之所以时间复杂度能达到线性，是因为这种排序不是基于比较的，但它的适用场景也有很大的局限性。本文将叙述 桶排序、计数排序、基数排序 这三种线…
一道 LeetCode 的动态规划题的分析。 题目描述 题目来源 leetCode——53.最大子序和 给定一个整数数组 nums ，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4], 输出: 6 解释: 连…
编辑器
1931
4 mins
svg 编辑器系列（2）其实在之前已经写过了，但写得不好，所以这次重写一下，顺便也把示例代码重写了。 本文主要讲解一款 svg 编辑器的DOM结构，该如何分层以及这样分层的原因。DOM 结构主要参考了一款名为 svged…
本文会针对树这种数据结构，进行相关内容的阐述。其实本文应该算是一篇读书笔记。 内容总览 树 二叉树 二叉查找树 堆和堆的一些操作 堆排序 堆的应用 另外，我先在这里给出 js 实现的源码地址： 树和二叉树 堆的实现 堆排序 树 这里…
本文对一些排序算法进行了简单分析，并给出了 javascript 的代码实现。因为本文包含了大量的排序算法，所以分析不会非常详细，适合有对排序算法有一定了解的同学。 本文内容其实不是很多，就是代码占了很多行。 总览 默认需要排序…
SVG 中的 image 元素和 HTML 下的 img 元素有些不同，后者设置 width/height 会对原图片进行非等比缩放，失去原来的图片比例。但是 SVG 中的 image 元素有些不同，设置 width/height 会对图片进行 等比缩放，并且图片会自适应前面设置好的宽高的容器。但如果想对 image 元…
编辑器
3302
7 mins
本文是我的一些粗浅学习总结，希望可以给初学者一些思路。本文主要讲述了如何使用命令模式来实现编辑器的撤销重做功能。 我的正在开发中的 svg 编辑器个人项目：https://github.com/F-star/s…
服务器使用 nodejs 请求获取微信小程序图片的教程，附详细代码。此文于2018.09.19完成，无法保证现在微信小程序的接口没有改变。 调研 首先看微信小程序的 获取二维码 文档，可以看到微信支持三种接口，其中只有B接…
在使用 vuedraggable 做拖拽效果时，因为要用到滚动条而使用了 overflow: scroll，导致了两个奇怪的效果，虽然折腾了一段时间，不过最后我还是将这些奇怪的 bug 解决了。 奇怪的效果 如果拖动 item，将光标移动到某两个 item 之间的界线上…
本文旨在引导没有其他绘制像素画工具的同学们解决使用 ps 绘制像素画时，遇到的一些 设置问题。 本教程操作的环境：WIN7、Photoshop CS6 如果是需要一个专业像素画绘制软件，推荐 Aseprite，steam…