Front-End on I'm K.T

使用 preload 资源预加载

Sat, 19 Sep 2020 22:02:07 +0000

如果有前后关联的异步 XHR 请求通常会在回调函数中按顺序先后加载，但这样会比较耗时，所以我们有 Promise.all() 来并行请求，最后再处理。

在编写小型前端项目尽可能考虑兼容且不依赖第三方库时，可以使用在 html 的 <head> 中添加 <link> 通过 rel="preload" 进行内容预加载。

<link> 元素的 rel 属性的属性值 preload 能够让你在你的 HTML 页面中 <head>元素内部书写一些声明式的资源获取请求，可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源，你可能希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。 –引用自 MDN

简单来说，就是添加这种特定的 head 后我们就可以在文档加载后就提前请求一部分内容，留待之后的网络请求直接使用，不需要额外的处理。

串行请求：

并行请求：

为了动态的添加 “preload”，还可以通过 js 代码实时写入到 DOM 中，以下是我封装的函数。

  function preload(url) {
   var preloadLink = document.createElement('link')
   preloadLink.href = url
   preloadLink.rel = 'preload'
   preloadLink.as = 'fetch'
   preloadLink.crossOrigin = 'anonymous'
   document.head.appendChild(preloadLink)
 }

接口调试神器 Network+

Tue, 02 Jun 2020 21:55:18 +0000

浏览器自带的开发者工具 Network 只能查看网络请求但不能修改，有时候只需要修改少量的参数也需要打开第三方工具如 Postman 将 URL、method、Request Body 等完整地填写一遍。

Network+ 是一款可以捕获、修改并重新请求的浏览器扩展，用以提升接口调试的效率。

支持 Chrome、Firefox 和新版本的 Edge。

项目地址：https://github.com/ClearStudio/network-plus

使用 Iconfont 图标

Wed, 01 Apr 2020 20:08:22 +0000

在做前端项目、个人网站……时难免需要图标，Iconfont 是我认为目前最好的方案：

图标来源于设计师、网友，图标多、全；
强大的自定义功能；
按需配用，不需要加载冗余资源；
可以上传自己的图标，统一管理；
阿里的免费 CDN；

可以称得上一个好用且免费的图标工厂了。

使用步骤：

访问 https://www.iconfont.cn
使用关键字搜索图标
挑选喜欢的图标，悬浮在图标上添加入库
挑选完毕后，添加到一个项目
可以编辑颜色、尺寸、名称等
可以自定义项目中的 font-class
生成并复制代码

注意：添加或编辑了项目内容后需要重新生成代码

参考官方使用教程 https://www.iconfont.cn/help/detail?helptype=code，推荐 font-class 方式引用；

推荐直接使用 CDN，当然，如果不放心可以下载离线版备份；
更多用法请自行挖掘；