跳至主要內容
浏览器缓存

什么是web缓存?

web缓存主要指的是两部分:浏览器缓存http缓存

http缓存是web缓存的核心,是最难懂的那一部分,也是最重要的那一部分。

浏览器缓存:例如 localStorage(5M)sessionStorage(5M)cookie(4k)等等。这些功能主要用于缓存一些必要的数据,比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。

缓存可以解决什么问题?

  1. 减少不必要的网络传输,节约宽带(就是省钱
  2. 更快的加载页面(就是加速
  3. 减少服务器负载,避免服务器过载的情况出现。(就是减载

缺点是什么?

  1. 占内存(有些缓存会被存到内存中)

石怜安大约 15 分钟Network缓存
Svg 入门

简介

SVG 是 Scalable Vector Graphics 的缩写,意为可缩放矢量图形。于 2003年1月14日 SVG 1.1 被Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达共同确立成为W3C推荐标准。

概念

  1. SVG是 Scalable Vector Graphics 的缩写 意为可缩放矢量图形
  2. SVG是一个基于文本开放网络标准,用来定义用于网络矢量图形
  3. SVG图像在放大改变尺寸的情况下其图形质量不会有所损失,因此能够优雅而简洁地渲染不同大小的图形,并和CSSDOMJavaScriptSMIL等其他网络标准无缝衔接
  4. SVG 使用 XML 格式定义图形
  5. SVG是万维网联盟的标准与诸如 DOMXSL 之类的 W3C 标准是一个整体

石怜安原创大约 35 分钟SvgSvg
Canvas 入门

Canvas 是什么?

Canvas 中文名叫 画布,是 HTML5 新增的一个标签

Canvas 允许开发者通过JS在这个标签上绘制各种图案。

Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。

Canvas 在某些情况下可以 代替 图片。

Canvas 可用于动画、游戏、数据可视化、图片编辑器、实时视频处理等领域。

Canvas 和 SVG 的区别


石怜安原创大约 21 分钟CanvasCanvas
手写Webpack

前言

Webpack在前端构建工具中可以堪称中流砥柱般的存在,日常业务开发、前端基建工具、高级前端面试...任何场景都会出现它的身影。

也许对于它的内部实现机制,我们也许会感到疑惑,日常工作中基于Webpack Plugin/Loader之类查阅API仍然不明白各个参数的含义和应用方式。其实这一切原因本质上都是基于Webpack工作流没有一个清晰的认知导致了所谓的“面对API无从下手”开发。

下面,我们会从如何实现 模块分析项目打包 的角度出发,使用 最通俗,最简洁,最明了 的代码带你揭开Webpack背后的神秘面纱,带你实现一个简易版Webpack,从此对于任何webpack相关底层开发了然于胸。用最通俗易懂的代码带你走进webpack的工作流。

可以根据 代码 一边看一边尝试


石怜安原创大约 36 分钟WebpackWebpack
乾坤

微前端 是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

各个前端应用还可以独立开发、独立部署。同时,它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。

qiankun(乾坤) 就是一款由蚂蚁金服推出的比较成熟的微前端框架,基于 single-spa 进行二次开发,用于将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

那么,话不多说,我们的源码解析正式开始。


石怜安原创大约 24 分钟微前端微前端