Bug

一些偶遇的 bug 和解决方案
SVGO 压缩 SVG 后不能正常缩放
Bug

SVGO 压缩 SVG 后不能正常缩放

前情提要 在前端开发过程中,SVG 图标(可缩放矢量图形)被广泛使用,因为它们具有可伸缩性、清晰的显示效果以及较小的文件大小。使用 SVG 作为图标有很多优势,尤其是在响应式设计和高分辨率屏幕上的表现。 但是,SVG 图标的制作过程也有很多不便之处。一千个读者就有一千个哈姆雷特,一千个制作者绘制同一个图标也可能会有一千个不同的版本。尽管 SVG 本身已经足够小了,但是在很多矢量编辑器/软件中,导出来的 SVG 文件会有很多其他冗余信息(当然这里面制作者和导出软件可能都会有问题)。 为了解决这些问题,我们需要一个工具来压缩 SVG 图标,使其更小、更清晰、更易于管理。所以选择了 SVGO 对图片进行压缩并且使用 SVGR 将 SVG 代码转换为 React Component 。 你可以在这尝试进行 svg 的压缩与转化。 * svgo playground * svgr playground ps:
3 min read
如何在浏览器中下载PDF文件
Bug

如何在浏览器中下载PDF文件

问题描述 在开发过程中,遇到了需要下载文件的需求,一般是直接使用 window.open() 方法,或者通过 a 标签点击下载。但是 PDF 文件只是打开了浏览器携带的 PDF 预览,需要用户手动点击预览页面的下载按钮才能下载文件。那么如何实现直接下载呢。 解决方案 将 PDF 文件的 MIME type 改成 application/octet-stream 并加入 Content-Disposition: attachment header。(原本的 PDF 文件 MIME type 为 application/pdf,浏览器识别到这个类型会自动打开) 可以通过后端接口返回时修改,也可以通过前端自行修改,前端修改如下: fetch(url, {method: 'get'}) .then(function
1 min read
定时器为什么不准
Bug

定时器为什么不准

setTimeout 和 setInterval 的差异 两个方法都是用于执行定时任务的函数,主要差异存在于执行次数和间隔的处理方式。 setTimeout 在一定延迟后执行一次指定的函数或代码块。执行完成后停止计时。 setInterval 每隔一定时间重复执行指定函数,会不断执行直到被取消或者页面销毁。 定时器的一些注意事项: * js 中定时器不能准时执行,主要原因包括以下几点: 1. JavaScript 是单线程执行的语言,在同一时间只执行一个任务。在执行 JavaScript 代码时,如果遇到长时间运行的任务(大量计算或阻塞操作),会导致计时器执行收到影响。 2. 浏览器有最小定时器间隔,通常为 4ms 或 10ms。浏览器总会将时间精度舍入到最小间隔的倍数。 3. 页面活动状态也会影响计时器,在页面切换标签或者最小化浏览器窗口时,浏览器可能会将当前页面的定时器暂停,以节省资源。 4. 在移动设备或者资源受限的环境中,系统可能会对浏览器资源进行限制。 5. 延迟执行时间有最大值 2
4 min read