12 2020 档案
摘要：本文主要介绍html2canvas实现浏览器截图的原理。
首先简单介绍html2canvas是做什么的，如何使用它；
然后从主入口出发，分析html2canvas渲染DOM元素的大致流程（简易火焰图）；
接着按火焰图的顺序，依次对renderElement方法中执行的parseTree/parseStackingContextrenderer.render三个方法进行分析，了解这些方法的作用和原理；
最后通过介绍CSS布局规则和7阶层叠水平，自然地引出renderStackContent关键方法实现原理的介绍。
阅读全文
摘要：本文先给大家简单介绍了如何生成网站的性能分析报告，以及这份报告的大致组成；
接着跟大家分享我自己在定位业务性能问题时，经常使用的三步法：在瀑布下用火焰烤饼；
从饼图中我们可以对网站的性能有一个大致的认识，从瀑布图快速地发现慢接口和大资源，而从火焰图中，我们可以细致地洞察到具体哪个模块/哪个组件/哪个方法可能成为性能瓶颈。
阅读全文
摘要：本文详细地介绍如何将一个网站的Github仓库源码自动化部署到服务器。
先介绍申请服务器和搭建服务器环境，重点介绍在Linux服务器搭建Nginx服务的步骤；
然后简单介绍了手动部署流程；
最后详细介绍了如何利用DevCloud流水线工具，实现自动化部署。
阅读全文
摘要：随着前端生态的繁荣，工具库几乎是高效开发的必需品，lodash/dayjs/numberal等实用的工具库相信大家都用过。
我近期在开发Calendar Graph Github提交日历组件时，发现有很多需要处理颜色的场景，比如判断一个字符串是否是一个有效的颜色值、hex颜色值和rgb颜色值的互转等，但没有找到一个能很好满足我全部需求的开源库，所以决定自己造一个轮子。
这就是做ktools工具库的原因，本文将介绍如何使用Rollup这个轻量的下一代模块打包器打造自己的TypeScript工具库。
阅读全文
摘要：本文主要介绍如何通过JSON Server和Mock.js两大神器，在前端搭建Mock服务，模拟后台接口，从而在开发阶段去除对后台的依赖，提升业务交付的效率。
阅读全文
摘要：Git是目前世界上最优秀最流行的分布式版本控制系统，也是程序员们日常使用最频繁的工具之一（几乎每天都需要使用它来对源代码进行版本管理）。
使用Git的过程，难免由于手快或者别的什么原因，需要对做过的事情进行“反悔”或者多次“反悔”。不用担心，Git强大到几乎任何操作都是可以“反悔”的，让我们一起来看看吧。
阅读全文
摘要：19世纪著名的印象派画家莫奈，喜欢对着同一处景物，分别画出对象在不同时间，不同光线下的色彩变化。
如果同一个组件，用不同的框架实现，会有什么不同呢？
带着这个想法，我分别选用目前最火的Vue/React/Angular三大框架，去实现一个简单的Pagination分页组件。
阅读全文
