gzip压缩的LZ77算法和哈夫曼编码实现原理

前端在性能优化那块有提到过gzip,但是gzip 的实现原理只是简单提了一下是基于deflate的算法,使用的是LZ77 + huffman Code。今天就来详细的总结下原理,不过有些问题还是没搞清楚,什么问题后面再说。 在这之前有个问题要先说下,nginx 和 webpack 中都是能做 gzip 压缩的,那有什么区别呢? web 服务器(nginx)在向客户端发送gzip文件的时候,会先在本地文件系统查找 .gz 的文件,如果没有,则会去生成一份。 »

元芳 元芳

base64 原理及转换会变大的原因

以前用到base64有这么几个场景: 使用html2canvas 将html 转成图片的时候,html 里面的跨域图片无法生成图片,所以将图片先转成base64再生成 jpg之类的图片有损压缩,使用canvas.toDataUrl() webpack 打包时,为了减少 https(http) 的请求数量(主要是为了减少三次握手,如果是http1.1开启了长连接或者http2.0/3.0之类的有多路复用,其实我觉得可以不用转base64),将小于10k(好像是10k,记不清了) »

元芳 元芳

性能优化之prefetch、dns-prefetch、preload、preconnect、prerender

在做项目优化的时候,遇到了 prefetch、preload,之前没有总结过,所以今天顺带都总结下。 首先这些属性都是在 link 标签上使用,以前都是拿 link 标签来加载外部css,没想到还有这个妙用。 preload 示例代码 <link href="app.9dad33ea7f9b9e219e85.js" rel="preload& »

元芳 元芳

原型链之 __proto__ 和 prototype

原型链每隔一段时间就容易忘记,所以整理一下,便于回顾。 用下面的代码 demo 来帮助理解: function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { console.log(this. »

元芳 元芳

防抖与节流

1.防抖 高频事件触发后,n秒内(定时器计时)执行一次,如果在函数执行前再次触发,则重新计时。 思路:再次触发的时候,取消上次的定时器。 function debounce(fn) { let timer = null; return function () { clearTimeout(timer); timer = setTimeout(() => { // this 指向 »

元芳 元芳