小鱼前端说

最近遇到了一个老项目，比较有意思的是这个项目集前后端的代码于一起，而后端也会去修改前端代码，所以就出现了后端用 IntelliJ IDEA 来开发前端项目，而前端用 VSCode 来开发前端项目的情况

作为一个程序员，代码能力毋庸置疑是非常非常重要的，就像现在为什么大厂面试基本都问什么 API 怎么实现可见其重要性。我想说的是居然手写这么重要，那我们就必须掌握它，所以文章标题用了死磕，一点也不过分，也希望不被认为是标题党。 作为一个普通前端，我是真的写不出 Promise A…

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开。虽然行文偏长，但较基础，适合初级中级前端阅读，阅读的时候请适当跳过已经掌握的部分。 这篇文章断断续续写了比较久，也参考了许多优秀的文章，但或许文章里还是存在不好或不对的地方，请多多指教，可以评论里直接提出来哈。 小t…

古话说得好，工欲善其事，必先利其器。作为一个开发人员，不仅仅需要写好代码，还需要知道如何能更快更好的工作，而工具无疑是其中一个很好的贡献者。好的的工具真的能给开发提效，那作为开发者都有哪些方面的工具需要知道呢？下面我们一一来介绍。 Bypeople 是为开发人员和设计人员提供的…

HTTP/0.9 是于 1991 年提出的，主要用于学术交流，需求很简单——用来在网络之间传递 HTML 超文本的内容，所以被称为超文本传输协议。整体来看，它的实现也很简单，采用了基于请求响应的模式，从客户端发出请求，服务器返回数据。 因为 HTTP 都是基于 TCP 协议的，…

在介绍 WebP 的时候，我们已经知道了相比 JPG 和 PNG 来说，WebP 已经兼顾了高呈现质量以及更小的文件体积，可以说已经非常优秀了，然后还是有一群人不满足于此，他们开发出了 AVIF 这种号称下一代图像压缩格式的玩意。 这篇文章将围绕 AVIF 是什么？对比其他图像…

网格是一个工具，你可以使用它来帮助你的网站创建布局。如果你需要考虑不同元素的位置、层次或大小，它就特别有用。 网格是复杂的，有很多东西要学习。但好消息是，你不需要一下子知道所有的事情。 在本教程中，我们将使用 CSS Grid 构建 5 种不同的布局(下面将解释为 5 个独立的…

如果你的生产网站使用 HTTPS，那么你会希望本地开发站点的表现也会和 HTTPS 站点一样。在大多数情况下，你可以相信 http://localhost 的行为类似于 HTTPS 站点。但是在某些情况下，你需要使用 HTTPS 在本地运行站点。 在本地开发时，默认情况下使用 …

在这篇文章中，我想和大家分享我是如何为 web 原型化一个 Sidenav 组件的，这个组件是响应式的，有状态的，支持键盘导航，可以使用和不使用 Javascript，并且可以跨浏览器工作。 构建一个响应式导航系统是很困难的。有些用户使用键盘，有些用户使用强大的台式机，还有一些…

之前写了一篇文章：jpg、gif、png和svg用于web上，我们该如何选择最合适的图像格式，介绍了这几种图片格式的特点，以及如何为网站选择合适的图片，然后评论区有位大佬让我补充下 WebP 格式，于是乎它来了。 WebP 是一种现代图像格式，可为 Web 上的图像提供出色的无…

而实际上，它也就是这么用的，但是如果事情有这么简单，就不用我在这里写了。扩展操作符给我最大的印象就是，这玩意还挺方便的，然而最近写代码的时候经常性的遇到需要使用扩展操作符的场景，所以我干脆在网上找了些资料，把平时常见的应用场景给罗列了下，发现这个操作符是真的强大，有多强大？来看…

最近在用 Vue 开发项目的时候有一个需求，需要导入 word 文档，并且需要支持多选。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求，由于…

preload 提升了资源加载的优先级，使得它提前开始加载（预加载），在需要用的时候能够更快的使用上。另外 onload 事件必须等页面所有资源都加载完成才触发，而当给某个资源加上 preload 后，该资源将不会阻塞 onload。 此时的 main.js 加载顺序出现在了 …

最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。 由于项目是用 Vue 开发的，所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子： 但是这个编辑器会把插入的图片会转成 base64 位的编码，使得编辑…

一个页面允许加载的外部资源有很多，常见的有脚本、样式、字体、图片和视频等，对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢？今天我们来一探究竟。 注意：如果当前选择的自定义选项被修改了，则需要切换到别的选项再切回来才可生效。 为什么是这个速度？因为如下的一些资源，比如图片…

要是问你，你知道当下都有哪些图像格式嘛？我猜你肯定说不全，因为现在图像格式真的太多了，但是应该能说出这几个常用的格式：jpg、gif、png和svg。然后我再问你，知不知道这几个格式有什么区别？各自的适用场景又是什么呢？logo应该是选择 svg 还是 png ？而截图是选 j…

如果两个 URL 的协议、域名和端口都相同，我们就称这两个 URL 同源。 限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点。 两个不同源的 DOM是不能相互操纵的，因此浏览器中又实现了跨文档消息机制，让其可以比较安全地通信，可以通过 window…

浏览器缓存一直是个老生常谈的话题，也是面试官常常用来鉴别面试者的利器，作为前端来讲这块知识是属于必须掌握的，再者利用好缓存也是做性能优化的有效方法。本文将从缓存原因、缓存读写顺序，缓存位置以及缓存策略这几个角度介绍浏览器缓存，并且最后给出实践的应用举例。 减少网络带宽消耗：对于…

可以在浏览器的 Application 面板下看到浏览器的本地存储包含了：Cookie、sessionStorage、localStorage 和 IndexedDB。 Cookie 又叫 HTTP Cookie 或者叫浏览器 Cookie。Cookie 的作用是维护服务端和客…