大家应该都听过腾讯的X5浏览器，据官方介绍其有以下优势：

• 速度快：相比系统webview的网页打开速度有30+%的提升；

• 省流量：使用云端优化技术使流量节省20+%；

• 更安全：安全问题可以在24小时内修复；

• 更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；

• 。。。

就不一一列举了，详细见（x5.tencent.com/docs/index.… ）
既然自定义webkit有能力做到这些，那我们为什么不自己试着整一个？

打包chromium，生成官方的apk

具体实现见Chromium网络请求

安装打开chrome_public_apk，它其实就是chrome浏览器app，那么我们怎么实现一套webkit呢？

webkit解构

webkit的包结构（从快手这看，容易理解）

这是快手app解开后webkit下的内容，整体上看，其实就是拷贝一套系统的webkit的api
上图1 mProvider就是webview的实现类，2 则为系统实现，既然是自定义webkit为什么要有2呢

主要应该是两个原因

• 是chromium内核包太大了
  

• 实现快速修复问题的目的，这可能就是X5提到的安全这点能在24小时之内修复

所以为了处理以上这两个问题，chromium内核一般都是插件化的实现，因此在插件还没有加载到的时候，我们只能去展示系统的webview，这里回到第一张图片，webkit adapter包下的就包含了所有webview参数和返回对象的包装，意在实现两套webkit对应的转换，比如

这里我们使用的地方调用的是com.kuaishou.webkit.CookieManager.getInstance(),在自己的内核没有加载完成的时候，所有调用都中转到了系统的android.webkit.CookieManager。

难点攻坚

• 内核模块调整，我们需要调整内核代码，把所有指向系统webkit包名全部改成我们自定义webkit的包名，为了使内核编译能通过，我们需要拷贝我们自定义的webkit这个模块到内核里去，在编译的时候把其剔除，这里我们需要去稍微了解一下gn构建配置相关的内容。

• 插件化的实现，插件化现在应该都烂大街了，省略。

// 这里稍微提一下，加载内核apk的Classloader的实现
public static class DexClassLoaderOptimize extends DexClassLoader {
    @Override // java.lang.ClassLoader
    public Class loadClass(String str, boolean z) throws ClassNotFoundException {
        // 所有系统相关的类，或者我们的webkit层全部在我们app层找


        if (str.startsWith("java.") || ((str.startsWith("android.") 

&& !str.startsWith("android.support.")) || 

str.startsWith("com.kuaishou.webkit"))) {
            return super.loadClass(str, z);
        }
        // 否则直接在插件中找
        try {
            return findClass(str);
        } catch (Exception unused) {
            return super.loadClass(str, z);
        }
    }
}

• 整个webkit层，可以参照着快手的实现。

• 在内核的加载过程中，主要涉及两个动态库一个是webview.so，另一个是webview_plat_support.so，其中webview_plat_support.so是Android系统内部的一个so，内核渲染的一个支持模块，我们需要使用到这个模块去做渲染的事情。（实际上Android10版本以上其实并不依赖该so去实现渲染能力）

webview_plat_support问题攻坚

webview_plat_support.so（以下简称plat_support）

一开始想过直接拷贝一份对应的so到我们的内核里，但是plat_support依赖了一些系统的动态库，api23以后ndk的动态库（见public），有些我们是引用不到的, 另外不同版本可能不同机型的plat_support的实现也有些差异，内核里需要维护太多的plat_support,增加复杂度

采用反射回调系统实现（所有内核里的native方法转到系统webview的实现），一开始在android10上测试ok，以为绕过了该问题，然而当我们在Android10以下的版本上，同时开启系统WebView和自定义webview就出现问题了，运气好的话要么系统WebView黑屏，要么自定义的WebView黑屏，多数情况下会崩溃，主要是plat_support其中一个方法nativeSetChromiumAwDrawGLFunction，保存chromium 内部渲染出口对象是一个单例实现，所以会出现两边同时都调用到这个方法，要么系统WebView黑屏，要么系统自定义Webview黑屏，所以我们需要自己实现一个plat_support，一开始参考快手的实现，因为从第三个图中，我们看到它有对应的plat_support

同时还看到了，它对系统库libskia.so的调用

实现上主要是GraphicsUtils对应的两个native方法比较复杂涉及到GraphicBuffer类 GraphicBuffer这个类位于libui.so，然而快手的plat_support中并没有找到libui.so的调用，既然不引用libui.so，我们就要自己去创建对应的对象，这里我们可以把它改成结构体

匹配所有的成员变量，就可以强转成目标对象（这和java完全不一样，一般没有关联的类的实例不能强转成目标类，不能调用的目标类的方法），只是我们需要该类原本实现的方法在本地重新实现一次，然而目标类的方法里又有别的类的调用，延展开来，最终处理的内容就很多了，还有一大堆版本适配问题，到这里暂时hold。

好了那么我们再来看看X5的实现，

好家伙，这直接反回0，然后我立马测试了一下，通过~~~
也就是说前面海量的代码实现，其实是可以删除的，chromium内部有自己默认的实现（这里我们还是可以反射转回到系统webview的实现，包括nativeGetFunctionTable）。

剩下的我们只需处理以下几个native方法即可 这个几个方法处理就非常简单了，注意kAwDrawGLInfoVersion的版本号适配就Ok了。

结语

当我们整完这一套，就可以开始我们的内核定制了，包括小程序领域所谓的同城渲染能力，JS ServerWorker的定制等等。

作者：北纬34点8度
来源：https: //juejin.cn/post/7037807249103798285

尽管许多新技术使网站创建过程变得更简单、更高效，但 HTML 始终是核心。随着 HTML5 的普及，在 2014 年，这种标记语言发生了很多变化，变得更加友好，浏览器对新标准的支持热度也越来越高。而HTML并不止于此，还在不断发生变化，并且可能会获得一些特性来证明对 HTML6 的命名更改是合理的。

支持原生模式

该元素<dialog> 将随 HTML6 一起提供。它被认为等同于用 JavaScript 开发的模态，并且已经标准化，但只有少数浏览器完全支持。但这种现象会改变，很快它将在所有浏览器中得到支持。

这个元素在其默认格式下，只会将光标显示在它所在的位置上，但可以使用 JavaScript 打开模式。

<dialog>
  <form method="dialog">
    <input type="submit" value="确定" />
    <input type="submit" value="取消" />
  </form>
</dialog>

在默认形式下，该元素创建一个灰色背景，其下方是非交互式内容。

可以在 <dialog> 其中的表单上使用一种方法，该方法将发送值并将其传递回自身 <dialog>。

总的来说，这个标签在用户交互和改进的界面中变得有益。

可以通过更改 <dialog> 标签的 open 属性以控制打开和关闭。

<dialog open>
  <p>组件内容</p>
</dialog>

没有 JavaScript 的单页应用程序

FutureClaw 杂志主编 Bobby Mozumder 建议：

将锚元素链接到 JSON/XML、API 端点，让浏览器在内部将数据加载到新的数据结构中，然后浏览器将 DOM 元素替换为根据需要加载的任何数据。初始数据（以及标准错误响应）可以放在标题装置中，如果需要，可以稍后替换。

据他介绍，这是单页应用程序网页设计模式，可以提高响应速度和加载时间，因为不需要加载 JavaScript。

自由调整图像大小

HTML6 爱好者相信即将到来的更新将允许浏览器调整图像大小以获得更好的观看体验。

每个浏览器都难以呈现相对于设备和屏幕尺寸的最佳图像尺寸，不幸的是，srce 标签 img 在处理这个问题时不是很有效。

这个问题可以通过一个新标签 <srcset> 来解决，它使浏览器在多个图像之间进行选择的工作变得更加容易。

专用库

将可用库引入 HTML6 绝对是提高开发效率的重要一步。

微格式

很多时候，需要在互联网上定义一般信息，而这些一般信息可以是任何公开的信息，例如电话号码、姓名、地址等。微格式是能够定义一般数据的标准。微格式可以增强设计者的能力，并可以减少搜索引擎推断公共信息所需的努力。

自定义菜单

尽管标签<ul>、<ol>非常有用，但在某些情况下仍有一些不足之处。可以处理交互元素的标签将是一个不错的选择。

这就是创建标签 <menu> 的驱动力，它可以处理按钮驱动的列表元素。

<menu type="toolbar">
  <li><button>个人信息</button></li>
  <li><button>系统设置</button></li>
  <li><button>账号注销</button></li>
</menu>

因此 <menu>，除了能够像普通列表一样运行之外，还可以增强 HTML 列表的功能。

增强身份验证

虽然HTML5在安全性方面还不错，浏览器和网络技术也提供了合理的保护。毫无疑问，在身份验证和安全领域还有很多事情可以做。如密钥可以异地存储；这将防止不受欢迎的人访问并支持身份验证。使用嵌入式密钥而不是 cookie，使数字签名更好等。

集成摄像头

HTML6 允许以更好的方式使用设备上的相机和媒体。将能够控制相机、它的效果、模式、全景图像、HDR 和其他属性。

总结

没有什么是完美的，HTML 也不是完美的，所以 HTML 规范可以做很多事情来使它更好。应该对一些有用的规范进行标准化，以增强 HTML 的能力。小的变化已经开始推出。如增强蓝牙支持、p2p 文件传输、恶意软件保护、云存储集成，下一个 HTML 版本可以考虑一下。

作者：天行无忌
来源：https://juejin.cn/post/7032874253573685261

需求

分布式应⽤进⾏逻辑处理时经常会遇到并发问题。

互斥访问某个网络上的资源，需要有一个存在于网络上的锁服务器，负责锁的申请与回收。Redis 可以充当锁服务器的角色。首先，Redis 是单进程单线程的工作模式，所有前来申请锁资源的请求都被排队处理，能保证锁资源的同步访问。

适用原因：

• Redis 可以被多个客户端共享访问，是·共享存储系统，可以用来保存分布 式锁

• Redis 的读写性能高，可以应对高并发的锁操作场景。

实现

在分布式场景下，锁变量需要由一个共享存储系统来维护，这样，多个客户端可以通过访问共享存储系统来访问锁变量。

简单实现

模仿单机上的锁，使用锁变量即可在Redis上实现分布式锁。

我们可以在 Redis 服务器设置一个键值对，用以表示一把互斥锁，当申请锁的时候，要求申请方设置（SET）这个键值对，当释放锁的时候，要求释放方删除（DEL）这个键值对。

但最基本需要保证加锁解锁操作的原子性。同时为了保证锁在异常情况下能被释放，必须设置超时时间。

Redis 2.8 版本中作者加⼊了 set 指令的扩展参数，使得 setnx 和 expire 指令可以⼀起执⾏

加锁原子操作

加锁包含了三个操作（读取锁变量、判断锁变量值以及把锁变量值设置为 1），而这 三个操作在执行时需要保证原子性。

首先是 SETNX 命令，它用于设置键值对的值。具体来说，就是这个命令在执行时会判断键 值对是否存在，如果不存在，就设置键值对的值，如果存在，就不做任何设置。

超时问题

Redis 的分布式锁不能解决超时问题，如果在加锁和释放锁之间的逻 辑执⾏的太长，超出了锁的超时限制，就无法保证互斥。

解决方案

最简单的就是避免Redis 分布式锁⽤于较⻓时间的任务。如果真的偶尔出现了，数据出现的⼩波错乱可能需要⼈⼯介⼊解决。

判断拥有者

为了防止锁变量被拥有者之外的客户端进程删除，需要能区分来自不同客户端的锁操作

set 指令的 value 参数设置为⼀个 随机数，释放锁时先匹配随机数是否⼀致，然后再删除 key，这是为 了确保当前线程占有的锁不会被其它线程释放，除⾮这个锁是过期了被服务器⾃动释放的。

Redis 给 SET 命令提供 了类似的选项 NX，用来实现“不存在即设置”。如果使用了 NX 选项，SET 命令只有在键 值对不存在时，才会进行设置，否则不做赋值操作。此外，SET 命令在执行时还可以带上 EX 或 PX 选项，用来设置键值对的过期时间。

可重入问题

可重⼊性是指线程在持有锁的情况下再次请求加锁，如果⼀个锁⽀持 同⼀个线程的多次加锁，那么这个锁就是可重⼊的。Redis 分布式锁如果要⽀持 可重⼊，需要对客户端的 set ⽅法进⾏包装，使⽤线程的 Threadlocal 变量存储当前持有锁的计数。

分布式拓展

单Redis实例并不能满足我们的高可用要求，一旦实例崩溃，就无法对外分布式锁服务。

但在集群环境下，这种只对主Redis实例使用上述方案是有缺陷 的，它不是绝对安全的。

一旦主节点挂掉，但锁变量没有及时同步，就会导致互斥被破坏。

Redlock

为了解决这个问题，Antirez 发明了 Redlock 算法

Redlock 算法的基本思路，是让客户端和多个独立的 Redis 实例依次请求加锁，如果客户 端能够和半数以上的实例成功地完成加锁操作，那么我们就认为，客户端成功地获得分布 式锁了，否则加锁失败。

执行步骤：

• 获取当前时间

• 客户端按顺序依次向 N 个 Redis 实例执行加锁操作

• 一旦客户端完成了和所有 Redis 实例的加锁操作，客户端就要计算整个加锁过 程的总耗时。客户端只有在满足下面的这两个条件时，才能认为是加锁成功

  • 客户端从超过半数（大于等于 N/2+1）的 Redis 实例上成功获取到了锁；

  • 客户端获取锁的总耗时没有超过锁的有效时间。

作者：不是二向箔
来源：https://juejin.cn/post/7038155529566289957

由于原始的DOM提供的API过长，不方便记忆，
于是我采用对象风格的形式封装了一个DOM库->源代码链接
这里对新封装的API进行总结
同样，用增删改查进行划分，我们先提供一个全局的window.dom对象

增

创建节点

create (string){
        const container = document.createElement("template")//template可以容纳任意元素
        container.innerHTML = string.trim();//去除字符串两边空格
        return container.content.firstChild;//用template,里面的元素必须这样获取  
}

首先，如果用原始的DOM API，我们想要创建一个div，div里面含有一个文本'hi'，需要分为两步

1. document.createElement('div')

2. div.innerText = 'hi'

而这里，只需要一步就能完成dom.create('

新增哥哥

before(node,node2){
    node.parentNode.insertBefore(node2,node);
}

这个比较简单，找到爸爸节点，然后使用```JavaScript，新增一个node2即可

新增弟弟

after(node,node2){
    node.parentNode.insertBefore(node2,node.nextSibling); //把node2插到node下一个节点的前面,即使node的下一个节点为空，也能插入  
}

由于原始的DOM只有insertBefore，并没有insertAfter，所以要实现这个功能我们需要一个曲线救国的方法：
node.nextSibling 表示node节点的下一个节点，
而想在node的后面插入一个节点，就等于说在node的下一个节点前插入一个新节点node2即可
如上代码就是实现了这个操作，而即使node的下一个节点为空，也能成功插入

新增儿子

 append(parent,node){
        parent.appendChild(node)
}

找到爸爸节点，用appendChild即可

新增爸爸

 wrap(node,parent){
        dom.before(node,parent)
        dom.append(parent,node)
}

思路如图：

分为两步走：

1. 先把新增的爸爸节点，放到老节点的前面

2. 再把老节点放入新增的爸爸节点的里面

这样就可以使新的爸爸节点包裹住老节点

使用示例：

const newDiv = dom.create('
')
dom.wrap(test, newDiv)

删

删节点

remove(node){
       node.parentNode.removeChild(node)
       return node
}

找到爸爸节点，removeChild即可

删除所有子节点

empty(node){
    const array = []
    let x = node.firstChild
    while (x) {
        array.push(dom.remove(node.firstChild))
        x = node.firstChild//x指向下一个节点
    }
    return array
}

其实一开始的思路，是用for循环

for(let i = 0;i<childNodes.length;i++){
    dom.remove(childNodes[i])
}

但这样的思路有一个问题：childNodes.length是会随着删除而变化的
所以我们需要改变思路，用while循环：

1. 先找到该节点的第一个儿子赋值为x

2. 当x是存在的，我们就把它移除，并放入数组里面(用于获取删除的节点的引用)

3. 再把x赋值给它的下一个节点(当第一个儿子被删除后，下一个儿子就变成了第一个儿子)

4. 反复操作，直到所有子节点被删完

改

读写属性

 attr(node,name,value){
        if(arguments.length === 3){
            node.setAttribute(name,value)
        }else if(arguments.length === 2){
            return node.getAttribute(name)
        }
}

这里运用重载，实现两种不同的功能：

1. 当输入的参数是3个时，就写属性

2. 当如数的参数是2个时，读属性

使用示例：

//写：
//给 
test
 添加属性
dom.attr(test,'title','Hi,I am Wang')
//添加之后：
test
//读：
const title = dom.attr(test,'title')
console.log(`title:${title}`)
//打印出：title:Hi,Hi,I am Wang

读写文本内容

text(node,string){
    if(arguments.length === 2){
        if('innerText' in node){
            node.innerText = string
        }else{
            node.textContent = string
        }
    }else if(arguments.length === 1){
        if('innerText' in node){
            return node.innerText
        }else{
            return node.textContent
        }
    }
}

为什么这里需要适配，innerText与textContent？
因为虽然现在绝大多数浏览器都支持两种，但还是有非常旧的IE只支持innerText，所以这里是为了适配所有浏览器

同时与读写属性思路相同：

1. 当输入的参数是2个时，就在节点里写文本

2. 当输入的参数是1个时，就读文本内容

读写HTML的内容

html(node,string){
    if(arguments.length === 2){
        node.innerHTML = string
    }else if(arguments.length === 1){
            return node.innerHTML
    }
}

同样，2参数写内容，1参数读内容

修改Style

style(node,name,value){
        if(arguments.length === 3){
            //dom.style(div,'color','red')
            node.style[name] = value
        }else if(arguments.length === 2){
            if(typeof name === 'string'){
             //dom.style(div,'color')
            return node.style[name]    
            }else if(name instanceof Object){
                //dom.style(div,{color:'red'})
                const Object = name
                for(let key in Object){
                    //key:border/color
                    //node.style.border = ...
                    //node.style.color = ...
                    node.style[key] = Object[key]
                } 
            }
       }
}

思路：

1. 首先判断输入的参数，如果为3个如：dom.style(div,'color','red')

2. 就更改它的style

3. 如果输入参数为2个时，先判断输入name的值的类型

4. 如果是字符串，如dom.style(div,'color')，就返回style的属性

5. 如果是对象,如dom.style(div,{border:'1px solid red',color:'blue'})，就更改它的style

增删查class

class:{
    add(node,className){
        node.classList.add(className)    
    },
    remove(node,className){
        node.classList.remove(className)
    },
    has(node,className){
        return node.classList.contains(className)
    }
}

注：查找一个元素的classList里是否有某一个class, 用的是contains

添加事件监听

on(node,eventName,fn){
       node.addEventListener(eventName,fn) 
}

使用示例：

const fn = ()=>{
    console.log('点击了')
}
dom.on(test,'click',fn)

这样当点击id为test的div时，就会打印出'点击了'

删除事件监听

off(node,eventName,fn){
    node.removeEventListener(eventName,fn)
}

查

获取单个或多个标签

find(selector,scope){
    return (scope || document).querySelectorAll(selector)
}

可以在指定区域或者全局的document里找

使用示例：
在document中查询：

const testDiv = dom.find('#test')[0]
console.log(testDiv)

在指定范围内查询：

 <div>
        <div id="test"><span>test1span>
        <p class="red">段落标签p>
        div>
        <div id="test2">
            <p class="red">段落标签p>
        div>
div>

我只想找test2里面的red，应该怎么做

const test2 = dom.find('#test2')[0]
console.log(dom.find('.red',test2)[0])

注意：末尾的[0]别忘记写

获取父元素

parent(node){
    return node.parentNode
}

获取子元素

children(node){
    return node.children 
}

获取兄弟姐妹元素

siblings(node){
    return Array.from(node.parentNode.children).filter(n=>n!==node) //伪数组变数组再过滤本身
}

找到爸爸节点，然后过滤掉自己本身

获取弟弟

next(node){
    let x = node.nextSibling
    while(x && x.nodeType === 3){
        x = x.nextSibling
    }
    return x
}

为什么这里需要while(x && x.nodeType === 3)？
因为我们不想获取文本节点(空格回车等)
所以当读到文本节点时，自动再去读取下一个节点，直到读到的内容不是文本节点为止

获取哥哥

previous(node){
        let x = node.previousSibling
        while(x && x.nodeType === 3){
            x = x.previousSibling
        }
        return x
}

与上面思路相同

遍历所有节点

each(nodeList,fn){
        for(let i=0;i<nodeList.length;i++){
            fn.call(null,nodeList[i])
        }
}

注：null用于填充this的位置
使用示例：
利用fn可以更改所有节点的style

const t = dom.find('#travel')[0]
dom.each(dom.children(t),(n)=>dom.style(n,'color','red'))

遍历每个节点，把每个节点的style都更改

用于获取排行老几

index(node){
    const list = dom.children(node.parentNode)
    let i;
    for(i=0;i<list.length;i++){
        if(list[i]===node){
             break
        }
    }
    return i
}

思路：

1. 获取爸爸节点的所有儿子

2. 设置一个变量i

3. 如果i等于想要查询的node

4. 退出循环，返回i值
   

作者：PrayWang
来源：https://juejin.cn/post/7038171258617331719

先上结论：

• 执行 async 函数，返回的都是 Promise 对象

• Promise.then() 对应 await

• Promise.catch() 对应 try...catch

执行 async 函数，返回的都是 Promise 对象

先看下面两个函数：

async function test1() {
  return 1;
}
async function test2() {
  return Promise.resolve(2);
}
const res1 = test1();
const res2 = test2();
console.log('res1', res1);
console.log('res1', res2);

test1 和 test2 两个函数前面都加了 async，说明这两个都是异步函数，并且如果一个函数前加了 async，那么这个函数的返回值就是一个 Promise（不论这个函数返回的是什么，都会被 JS 引擎包装成 Promise 对象）。

输出结果如下图：

Promise.then() 对应 await

1.直接在一个 await 后面加 promise 对象

看下面的代码：

async function test3() {
  const p3 = Promise.resolve(3);
  p3.then(data => {
    console.log('data', data);
  });

  const data = await p3;
  console.log('data', data);
}
test3();

输出结果如下图：

可以看到输出是相同的，这就说明了 Promise 的 then() 方法对应 await。

2.直接在一个 await 后面加一个基本数据类型的值

看下面的例子：

async function test4() {
  const data4 = await 4; // await Promise.resolve(4)
  console.log('data4', data4);
}
test4();

输出结果如下图：

可以看到输出的是 4，上面的 await 4 就相当于 await Promise.resolve(4)，又因为 await 相当于 then()，所以输出的就是 4。

3.直接在一个 await 后面加一个异步函数

看下面的例子：

async function test1() {
  return 1;
}
async function test5() {
  const data5 = await test1();
  console.log('data5', data5);
}
test5();

输出结果如下图：

可以看到输出的是 1，首先 test5() 执行，然后执行 test1()，test1 返回数字 1，相当于返回 Promise.resolve(1)，await 又相当于 then()，所以输出 1。

:::tip 提示 开发中最常用的就是第三种，await 后面跟一个异步函数，所以一定要掌握！ :::

Promise.catch() 对应 try...catch

看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  const data6 = await p6;
  console.log('data6', data6);
}
test6();

输出结果如下图：

可以看到没有捕获到错误，那应该怎么做呢？没错，可以使用 try...catch。 看下面的例子：

async function test6() {
  const p6 = Promise.reject(6);
  try {
    const data6 = await p6;
    console.log('data6', data6);
  } catch (e) {
    console.log('e', e); // 顺利捕获错误
  }
}
test6();

输出结果如下图：

可以看到已经成功捕获到错误了！

作者：ShiYan_Chen
来源：https://juejin.cn/post/7038152028664627230

事情是这样的

正准备下班的python开发小哥哥

接到女朋友今晚要加班的电话

并给他发来一张背景模糊的自拍照

如下 ↓ ↓ ↓

敏感的小哥哥心生疑窦，难道会有原谅帽
然后python撸了一段代码 分析照片

分析下来 emmm
拍摄地址居然在 XXX酒店

小哥哥崩溃之余 大呼上当

python分析照片

小哥哥将发给自己的照片原图下载下来
并使用python写了一个脚本
读取到了照片拍摄的详细的地址
详细到了具体的街道和酒店名称

引入exifread模块

首先安装python的exifread模块，用于照片分析
pip install exifread 安装exfriead模块

PS C:\WINDOWS\system32> pip install exifread
Collecting exifread
  Downloading ExifRead-2.3.2-py3-none-any.whl (38 kB)
Installing collected packages: exifread
Successfully installed exifread-2.3.2
PS C:\WINDOWS\system32> pip install json

GPS经纬度信息

其实我们平时拍摄的照片里，隐藏了大量的私密信息
包括 拍摄时间、极其精确 具体的GPS信息。
下面是通过exifread模块，来读取照片内的经纬度信息。

#读取照片的GPS经纬度信息
def find_GPS_image(pic_path):
  GPS = {}
  date = ''
  with open(pic_path, 'rb') as f:
      tags = exifread.process_file(f)
      for tag, value in tags.items():
          #纬度
          if re.match('GPS GPSLatitudeRef', tag):
              GPS['GPSLatitudeRef'] = str(value)
          #经度
          elif re.match('GPS GPSLongitudeRef', tag):
              GPS['GPSLongitudeRef'] = str(value)
          #海拔
          elif re.match('GPS GPSAltitudeRef', tag):
              GPS['GPSAltitudeRef'] = str(value)
          elif re.match('GPS GPSLatitude', tag):
              try:
                  match_result = re.match('\[(\w*),(\w*),(\w.*)/(\w.*)\]', str(value)).groups()
                  GPS['GPSLatitude'] = int(match_result[0]), int(match_result[1]), int(match_result[2])
              except:
                  deg, min, sec = [x.replace(' ', '') for x in str(value)[1:-1].split(',')]
                  GPS['GPSLatitude'] = latitude_and_longitude_convert_to_decimal_system(deg, min, sec)
          elif re.match('GPS GPSLongitude', tag):
              try:
                  match_result = re.match('\[(\w*),(\w*),(\w.*)/(\w.*)\]', str(value)).groups()
                  GPS['GPSLongitude'] = int(match_result[0]), int(match_result[1]), int(match_result[2])
              except:
                  deg, min, sec = [x.replace(' ', '') for x in str(value)[1:-1].split(',')]
                  GPS['GPSLongitude'] = latitude_and_longitude_convert_to_decimal_system(deg, min, sec)
          elif re.match('GPS GPSAltitude', tag):
              GPS['GPSAltitude'] = str(value)
          elif re.match('.*Date.*', tag):
              date = str(value)
  return {'GPS_information': GPS, 'date_information': date}

百度API将GPS转地址

这里需要使用调用百度API，将GPS经纬度信息转换为具体的地址信息。

这里，你需要一个调用百度API的ak值，这个可以注册一个百度开发者获得，当然，你也可以使用博主的这个ak

调用之后，就可以将拍摄时间、拍摄详细地址都解析出来。

def find_address_from_GPS(GPS):
  secret_key = 'zbLsuDDL4CS2U0M4KezOZZbGUY9iWtVf'
  if not GPS['GPS_information']:
      return '该照片无GPS信息'
  #经纬度信息
  lat, lng = GPS['GPS_information']['GPSLatitude'], GPS['GPS_information']['GPSLongitude']
  baidu_map_api = "http://api.map.baidu.com/geocoder/v2/?ak={0}&callback=renderReverse&location={1},{2}s&output=json&pois=0".format(
      secret_key, lat, lng)
  response = requests.get(baidu_map_api)
  #百度API转换成具体的地址
  content = response.text.replace("renderReverse&&renderReverse(", "")[:-1]
  print(content)
  baidu_map_address = json.loads(content)
  #将返回的json信息解析整理出来
  formatted_address = baidu_map_address["result"]["formatted_address"]
  province = baidu_map_address["result"]["addressComponent"]["province"]
  city = baidu_map_address["result"]["addressComponent"]["city"]
  district = baidu_map_address["result"]["addressComponent"]["district"]
  location = baidu_map_address["result"]["sematic_description"]
  return formatted_address,province,city,district,location

if __name__ == '__main__':
  GPS_info = find_GPS_image(pic_path='C:/女友自拍.jpg')
  address = find_address_from_GPS(GPS=GPS_info)
  print("拍摄时间：" + GPS_info.get("date_information"))
  print('照片拍摄地址:' + str(address))

老王得到的结果是这样的

照片拍摄地址:('云南省红河哈尼族彝族自治州弥勒县', '云南省', '红河哈尼族彝族自治州', '弥勒县', '湖泉酒店-A座东南128米')

云南弥勒湖泉酒店，这明显不是老王女友工作的地方，老王搜索了一下，这是一家温泉度假酒店。

顿时就明白了

{"status":0,"result":{"location":{"lng":103.41424699999998,"lat":24.410461020097278},
"formatted_address":"云南省红河哈尼族彝族自治州弥勒县",
"business":"",
"addressComponent":{"country":"中国",
"country_code":0,
"country_code_iso":"CHN",
"country_code_iso2":"CN",
"province":"云南省",
"city":"红河哈尼族彝族自治州",
"city_level":2,"district":"弥勒县",
"town":"","town_code":"","adcode":"532526",
"street_number":"",
"direction":"","distance":""},
"sematic_description":"湖泉酒店-A座东南128米",
"cityCode":107}}

拍摄时间：2021:5:03 20:05:32
照片拍摄地址:('云南省红河哈尼族彝族自治州弥勒县', '云南省', '红河哈尼族彝族自治州', '弥勒县', '湖泉酒店-A座东南128米')

完整代码如下

import exifread
import re
import json
import requests
import os

#转换经纬度格式
def latitude_and_longitude_convert_to_decimal_system(*arg):
  """
  经纬度转为小数, param arg:
  :return: 十进制小数
  """
  return float(arg[0]) + ((float(arg[1]) + (float(arg[2].split('/')[0]) / float(arg[2].split('/')[-1]) / 60)) / 60)

#读取照片的GPS经纬度信息
def find_GPS_image(pic_path):
  GPS = {}
  date = ''
  with open(pic_path, 'rb') as f:
      tags = exifread.process_file(f)
      for tag, value in tags.items():
          #纬度
          if re.match('GPS GPSLatitudeRef', tag):
              GPS['GPSLatitudeRef'] = str(value)
          #经度
          elif re.match('GPS GPSLongitudeRef', tag):
              GPS['GPSLongitudeRef'] = str(value)
          #海拔
          elif re.match('GPS GPSAltitudeRef', tag):
              GPS['GPSAltitudeRef'] = str(value)
          elif re.match('GPS GPSLatitude', tag):
              try:
                  match_result = re.match('\[(\w*),(\w*),(\w.*)/(\w.*)\]', str(value)).groups()
                  GPS['GPSLatitude'] = int(match_result[0]), int(match_result[1]), int(match_result[2])
              except:
                  deg, min, sec = [x.replace(' ', '') for x in str(value)[1:-1].split(',')]
                  GPS['GPSLatitude'] = latitude_and_longitude_convert_to_decimal_system(deg, min, sec)
          elif re.match('GPS GPSLongitude', tag):
              try:
                  match_result = re.match('\[(\w*),(\w*),(\w.*)/(\w.*)\]', str(value)).groups()
                  GPS['GPSLongitude'] = int(match_result[0]), int(match_result[1]), int(match_result[2])
              except:
                  deg, min, sec = [x.replace(' ', '') for x in str(value)[1:-1].split(',')]
                  GPS['GPSLongitude'] = latitude_and_longitude_convert_to_decimal_system(deg, min, sec)
          elif re.match('GPS GPSAltitude', tag):
              GPS['GPSAltitude'] = str(value)
          elif re.match('.*Date.*', tag):
              date = str(value)
  return {'GPS_information': GPS, 'date_information': date}

#通过baidu Map的API将GPS信息转换成地址。
def find_address_from_GPS(GPS):
  """
  使用Geocoding API把经纬度坐标转换为结构化地址。
  :param GPS:
  :return:
  """
  secret_key = 'zbLsuDDL4CS2U0M4KezOZZbGUY9iWtVf'
  if not GPS['GPS_information']:
      return '该照片无GPS信息'
  lat, lng = GPS['GPS_information']['GPSLatitude'], GPS['GPS_information']['GPSLongitude']
  baidu_map_api = "http://api.map.baidu.com/geocoder/v2/?ak={0}&callback=renderReverse&location={1},{2}s&output=json&pois=0".format(
      secret_key, lat, lng)
  response = requests.get(baidu_map_api)
  content = response.text.replace("renderReverse&&renderReverse(", "")[:-1]
  print(content)
  baidu_map_address = json.loads(content)
  formatted_address = baidu_map_address["result"]["formatted_address"]
  province = baidu_map_address["result"]["addressComponent"]["province"]
  city = baidu_map_address["result"]["addressComponent"]["city"]
  district = baidu_map_address["result"]["addressComponent"]["district"]
  location = baidu_map_address["result"]["sematic_description"]
  return formatted_address,province,city,district,location
if __name__ == '__main__':
  GPS_info = find_GPS_image(pic_path='C:/Users/pacer/desktop/img/5.jpg')
  address = find_address_from_GPS(GPS=GPS_info)
  print("拍摄时间：" + GPS_info.get("date_information"))
  print('照片拍摄地址:' + str(address))

作者：LexSaints
来源：https://juejin.cn/post/6967563349609414692

前言

❝ 最近，我们老大让小白搞一下登录模块，登录模块说简单也简单，复杂也复杂。本章主要讲一下，会话过期后，token 刷新的一系列的事。 ❞

需求

在一个页面内,当请求失败并且返回 302 后,判断是接口过期还是登录过期,如果是接口过期,则去请求新的token,然后拿新的token去再次发起请求.

思路

• 当初，想了一个黑科技（为了偷懒），就是拿到新的token后，直接强制刷新页面，这样一个页面内的接口就自动刷新啦~（方便是方便，用户体验却不好）

• 目前，想到了重新请求接口时，可以配合订阅发布模式来提高用户体验

响应拦截

首先我们发起一个请求 axios({url:'/test',data:xxx}).then(res=>{})

拦截到302后，我们进入到刷新token逻辑

响应拦截代码

axios.interceptors.response.use(
    function (response) { 
        if (response.status == 200) { 
            return response;
        }
    },
    (err) => {
        //刷新token
        let res = err.response || {}; 
        if (res.data.meta?.statusCode == 302) {
            return refeshToken(res);
        } else {  
            return err;
        }
    }
);

我们后台的数据格式是根据statusCode来判断过期（你们可以根据自己的实际情况判断），接着进入refrshToken方法~

刷新token方法

//避免其他接口同时请求(只请求一次token接口)
let isRefreshToken = false;
const refeshToken = (response) => {
   if (!isRefreshToken) {
            isRefreshToken = true;
            axios({
                //获取新token接口
                url: `/api/refreshToken`,
            })
                .then((res) => {
                    const { data = '', meta = {} } = res.data;
                    if (meta.statusCode === 200) {
                        isRefreshToken = false; 
                        //发布 消息
                        retryOldRequest.trigger(data);
                    } else { 
                        history.push('/user/login');
                    }
                })
                .catch((err) => { 
                    history.push('/user/login');
                });
        }
        //收集订阅者 并把成功后的数据返回原接口
        return retryOldRequest.listen(response);
};

看到这，有的小伙伴就有点奇怪retryOldRequest这个又是什么？没错，这就是我们男二 订阅发布模式队列。

订阅发布模式

大家如果还不了解订阅发布模式，可以点击看一下，里面有大神写的通俗易懂的例子（觉得学到的话，可以顺便帮点赞哦~）。

把失败的接口当订阅者，成功拿到新的token后再发布（重新请求接口）。

以下便是订阅发布模式代码

const retryOldRequest = {
    //维护失败请求的response
    requestQuery: [],

    //添加订阅者
    listen(response) {
        return new Promise((resolve) => {
            this.requestQuery.push((newToken) => { 
                let config = response.config || {};
                //Authorization是传给后台的身份令牌
                config.headers['Authorization'] = newToken;
                resolve(axios(config));
            });
        });
    },

    //发布消息
    trigger(newToken) {
        this.requestQuery.forEach((fn) => {
            fn(newToken);
        });
        this.requestQuery = [];
    },
};

大家可以先不用关注订阅者的逻辑，只需要知道订阅者是每次请求失败后的接口（reponse）就好了。

每次进入refeshToken方法,我们失败的接口都会触发retryOldRequest.listen去订阅，而我们的requestQuery则是保存这些订阅者的队列。

注意:我们订阅者队列requestQuery是保存待发布的方法。而在成功获取新token后，retryOldRequest.trigger就会去发布这些消息（新token）给订阅者（触发订阅队列的方法）。

而订阅者（response）里面有config配置，我们拿到新的token后(发布后)，修改config里面的请求头Autorzation.而借助Promise我们可以更好的拿到新token请求回来的接口数据，一旦请求到数据，我们可以原封不动的返回给原来的接口/test了（因为我们在响应拦截那里返回的是refreshToken,而refreshToken又返回的是订阅者retryOldRequest.listen返回的数据,而Listiner又返回Promise的数据，Promise又在成功请求后resolve出去）。

看到这，小伙伴们是不是觉得有点绕了~

而在真实开发中，我们的逻辑还含有登录过期（与请求过期区分开来）。我们是根据当前时间 - 过去时间 < expiresTime（epiresTime:登录后返回的有效时间）来判断是请求过期还是登录过期的。 以下是完整逻辑
以下是完整代码

const retryOldRequest = {
    //维护失败请求的response
    requestQuery: [],

    //添加订阅者
    listen(response) {
        return new Promise((resolve) => {
            this.requestQuery.push((newToken) => { 
                let config = response.config || {};
                config.headers['Authorization'] = newToken;
                resolve(axios(config));
            });
        });
    },

    //发布消息
    trigger(newToken) {
        this.requestQuery.forEach((fn) => {
            fn(newToken);
        });
        this.requestQuery = [];
    },
};
/**
 * sessionExpiredTips
 * 会话过期：
 * 刷新token失败，得重新登录
 * 用户未授权，页面跳转到登录页面 
 * 接口过期 => 刷新token
 * 登录过期 => 重新登录
 * expiresTime => 在本业务中返回18000ms == 5h
 * ****/

//避免其他接口同时请求
let isRefreshToken = false;
let timer = null;
const refeshToken = (response) => {
    //登录后拿到的有效期
    let userExpir = localStorage.getItem('expiresTime');
    //当前时间
    let nowTime = Math.floor(new Date().getTime() / 1000);
    //最后请求的时间
    let lastResTime = localStorage.getItem('lastResponseTime') || nowTime;
    let token = localStorage.getItem('token');

    if (token && nowTime - lastResTime < userExpir) {
        if (!isRefreshToken) {
            isRefreshToken = true;
            axios({
                url: `/api/refreshToken`,
            })
                .then((res) => {
                    const { data = '', meta = {} } = res.data;
                    isRefreshToken = false;
                    if (meta.statusCode === 200) {
                        localStorage.getItem('token', data);
                        localStorage.getItem('lastResponseTime', Math.floor(new Date().getTime() / 1000)
                        );
                        //发布 消息
                        retryOldRequest.trigger(data);
                    } else {
                       //去登录
                    }
                })
                .catch((err) => {
                    isRefreshToken = false;
                   //去登录
                });
        }
        //收集订阅者 并把成功后的数据返回原接口
        return retryOldRequest.listen(response);
    } else {
        //节流：避免重复运行
       //去登录
    }
};

// http response 响应拦截
axios.interceptors.response.use(
    function (response) { 
        if (response.status == 200) {
            //记录最后操作时间
           localStorage.getItem('lastResponseTime', Math.floor(new Date().getTime() / 1000));
            return response;
        }
    },
    (err) => { 
        let res = err.response || {}; 
        if (res.data.meta?.statusCode == 302) {
            return refeshToken(res);
        } else {
            // 非302 报的错误; 
            return err;
        }
    }
);

以上便是我们这边的业务，如果写的不好请大佬多担待~~

如果有好方案的小伙伴也可以在评论区内互相讨论~

作者：用户3797421129853
来源：https://juejin.cn/post/7037787299202990093

网页的渲染是一个宏任务。 这是我下的一个结论。

别着急反驳，后面我会给出证据。

我们先来聊下什么是调试：

调试是通过工具获取运行过程中的某一时刻或某一段时间的各方面的数据，帮助开发者理清逻辑、分析性能、排查问题等。 JS 的各种运行环境都会提供调试器，除此以外我们也会自己做一些埋点上报来做调试和统计。

我们最常用的调试工具是 JS Debugger，它支持断点，可以在某处断住，查看当前上下文的变量、调用栈等，这对于理清逻辑很有帮助。

但是性能分析的调试工具却不能这样做，不能用断住的方式实时查看，因为会影响数据的真实性。所以这类工具都是通过录制一段时间的数据，然后作事后的统计和分析的方式，常用的是 Chrome Devtools 里的 Performance 工具。（甚至为了避免浏览器插件的影响，还要用无痕模式来运行网页）点击录制按钮 record 开始录制（如果想录制从页面加载开始的数据，就点击 reload 按钮），Performance 会记录下录制时间内各方面的数据。

有哪些数据呢？

网页的运行是有多个线程的，主线程负责通过 Event Loop 的方式来不断的执行 JS 和渲染，也有一些别的线程，比如合成渲染图层的线程，Web Worker 的线程等，渲染的每一帧会绘制到界面上。

网页是这样运行的，那记录的自然也都是这些数据：Performance 会记录网页的每个线程的数据，其中最重要的是主线程，也就是图中的 Main，这部分记录着 Event Loop 的执行过程，记录着 JS 执行的调用栈和页面渲染的流程。看到图中标出的一个个小灰块了么，那就是一个个 Task，也就是宏任务。Event Loop 就是循环执行宏任务。每个 Task 都有自己的调用栈，可以看到函数的执行路径，耗时等信息。图中宽度代表了耗时，可以直观的通过块的宽窄来分析性能。

执行完宏任务会执行所有的微任务，在图中也可以清晰的看到：点击每一个块可以看到代码的位置，可以定位到对应代码，这样就可以分析出哪块代码性能不好。这些是 Main 线程的执行逻辑，也就是通过 Event Loop 来不断执行 JS 和渲染。

当然，还有其他线程，比如光栅化线程，也就是负责把渲染出的图层合并成一帧的线程：总之，就像 Debugger 面前，JS 的执行过程没有秘密一样，在 Performance 面前，网页各线程的执行过程也没有秘密。

说了这么多，就是为了讲清楚调试工具和 Performance 都是干啥的，它记录了哪些信息。

我们想知道渲染是不是一个宏任务，自然可以通过 Performance 来轻易的分析出来。

我们继续看 Main 线程的 Event Loop 执行过程：你会看到一个个很小的灰块，也就是一个个 Task，每隔一段时间都会执行，点击它，就会看到其实他做的就是渲染，包括计算布局，更新渲染树，合并图层、渲染等。

这说明了什么，不就说明了渲染是一个宏任务么。

所以，我们得到了结论：渲染是一个宏任务，通过 Event Loop 来做一帧帧的渲染。

通过 Performance 调试工具，我们可以看到 Main 线程 Event Loop 的细节，看到 JS 执行和渲染的详细过程。

有时你可能会看到有的 Task 部分被标红了，还警告说这是 Long Task。因为渲染和 JS 执行都是在同一个 Event Loop 内做的，那如果有执行时间过长的 Task，自然会导致渲染被延后，也就是掉帧，用户感受到的就是页面的卡顿。

避免 Long Task，这是网页性能优化的一个重点。这也是为什么 React 使用了 Fiber 架构的可打断的组件树渲染，替代掉了之前的递归渲染整个组件树的方式，就是为了不产生 Long Task。

总结

本文目的为了证明渲染是不是一个宏任务，但其实更重要的是想讲清楚调试工具的意义。

调试工具可以分析程序运行过程中某一刻或某一段时间的各方面的数据，有两种方式：一种是 Debugger 那种断点的方式，可以看到上下文变量的值、调用栈，可以帮助理清逻辑、定位问题。而性能分析工具则是另一种方式，通过录制一段时间内的各种数据，做事后的分析和统计，这样能保证数据的真实性。

网页的性能分析工具 Performance 可以记录网页执行过程中的各个线程的执行情况，主要是主线程的 Event Loop 的执行过程，包括 JS 执行、渲染等。

通过 Performance，我们可以轻易的得出“渲染是一个宏任务”的结论。

就像在 Debugger 面前，JS 执行过程没有秘密一样。在 Performance 面前，网页的执行过程也同样没有秘密。

作者：zxg_神说要有光
来源：https://juejin.cn/post/7037839989018722340

方案：使用微信提供的url link方法 生成短链接 发送给用户 用户点击短链接会跳转到微信提供默认的默认页面 进而打开小程序
场景假设：经理人发布一条运输任务 司机收到短信点击打开小程序接单

实现：

• 经理人发布时点击发布按钮 h5调用服务端接口 传参服务端要跳转的小程序页面 所需要参数

• 服务端拿access_token和前端传的参数 加链接失效时间 调用微信api

api.weixin.qq.com/wxa/generat… 得到链接 如wxaurl.cn/ow7ctZP4n8v 将此链接发送短信给司机

• 司机点击此链接 效果如下图所示：打开小程序 h5写逻辑跳转指定页面
  

自己调postman调微信api post方式 接口： api.weixin.qq.com/wxa/generat…

传参

{ 
        "path": "pages/index/index",\
    "query": "?fromType=4&transportBulkLineId=111&isLinkUrlCome=1&SCANFROMTYPE=143&lineAssignRelId=111",\
      "env_version": "trial",\
      "is_expire": true,\
    "expire_time": "1638855772"\
}

返参

{
      "errcode": 0,
    "errmsg": "ok",
    "url_link": "https://wxaurl.cn/GAxGcil2Bbp"
}

url link说明文档： developers.weixin.qq.com/miniprogram…
url link方法需要服务端调用 调用接口方式参考： developers.weixin.qq.com/miniprogram…

作者：懿小诺
来源：https://juejin.cn/post/7037356611031007239

1. MVVM和MVC

Vue是MVVM，React是MVC。

MVVM(Model-View-ViewModel)是在MVC(Model View Controller)的基础上，VM抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。

也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

可以理解为MVVM是MVC的升级版。

虽然React不算一个完整的MVC框架，可以认为是MVC中的V(View)，但是Vue的MVVM还是更面向未来一些。

2. 数据绑定

vue是双向绑定，react是单向绑定。

单向绑定的优点是相应的可以带来单向数据流，这样做的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”。同时组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于项目的可维护性。

但是Vue虽然是双向绑定，但是也是单向数据流，它的双向绑定只是一个语法糖，想看正经的双向绑定可以去看下Dva。

单向绑定的缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的重复代码。同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得冗余。

双向绑定可以在表单交互较多的场景下，会简化大量业务无关的代码。

我认为Vue的设计方案好一些，全局性数据流使用单向，局部性数据流使用双向。

3. 数据更新

3.1 React 更新流程

React 推崇 Immutable(不可变)，通过重新render去发现和更新自身。

3.2 Vue 更新流程

Vue通过收集数据依赖去发现更新。

Vue很吸引人的就是它的响应式更新，Vue首次渲染触发data的getter，从而触发依赖收集，为对应的数据创建watcher，当数据发生更改的时候，setter被触发，然后通知各个watcher在下个tick的时候更新数据。

所以说，如果data中某些数据没有在模板template 中使用的话，更新这些数据的时候，是不会触发更新的。这样的设计非常好，没有在模版上用到的变量，当它的值发生变化时，不更新视图，相当于内置了React的shouldComponentUpdate。

3.3 更新比较

• 获取数据更新的手段和更新的粒度不一样

Vue通过依赖收集，当数据更新时 ，Vue明确知道是哪些数据更新了，每个组件都有自己的渲渲染watcher，掌管当前组件的视图更新，所以可以精确地更新对应的组件，所以更新的粒度是组件级别的。

React会递归地把所有的子组件重新render一下，不管是不是更新的数据，此时，都是新的。然后通过 diff 算法 来决定更新哪部分的视图。所以，React 的更新粒度是一个整体。

• 对更新数据是否需要渲染页面的处理不一样

• 只有依赖收集的数据发生更新，Vue 才会去重新渲染页面

• 只要数据有更新(setState，useState 等手段触发更新)，都会去重新渲染页面 （可以使用shouldComponentUpdate/ PureComponent 改善)

Vue的文档里有一描述说，Vue是细粒度数据响应机制，所以说数据更新这一块，我认为Vue的设计方案好一些。

4. 性能对比

借用尤大大的一段话：

模板在性能这块吊打 tsx，在 IDE 支持抹平了的前提下用 tsx 本质上是在为了开发者的偏好牺牲用户体验的性能（性能没遇到瓶颈就无所谓） 这边自己不维护框架的人吐槽吐槽我也能理解，毕竟作为使用者只需要考虑自己爽不爽。作为维护者，Vue 的已有的用户习惯、生态和历史包袱摆在那里，能激进的程度是有限的，Vue 3 的大部分设计都是戴着镣铐跳舞，需要做很多折衷。如果真要激进还不如开个新项目，或者没人用的玩票项目，想怎么设计都可以。 组件泛型的问题也有不少人提出了，这个目前确实不行，但不表示以后不会有。 最后实话实说，所有前端里面像这个问题下面的类型体操运动员们毕竟是少数，绝大部分有 intellisense + 类型校验就满足需求了。真的对类型特别特别较真的用 React 也没什么不好，无非就是性能差点。

为什么模板性能吊打TSX？

tsx和vue template其实都是一样的模版语言，tsx最终也会被编译成createElement，模板被编译成render函数，所以本质上两者都有compile-time和runtime，但tsx的特殊性在于它本身是在ts语义下的，过于灵活导致优化无从下手。但是vue的模板得益于自身本来就是DSL，有自己的文法和语义，所以vue在模板的compile-time做了巨多的优化，比如提升不变的vnode，以及blocktree配合patchflag靶向更新，这些优化在最终的runtime上会把性能拉开不少。

DSL： 一种为特定领域设计的，具有受限表达性的编程语言。

所以说Vue的性能是优于React的。

5. React Hooks和Vue Hooks

其实 React Hook 的限制非常多，比如官方文档中就专门有一个章节介绍它的限制：

1. 不要在循环，条件或嵌套函数中调用 Hook

2. 确保总是在你的 React 函数的最顶层调用他们。

3. 遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

而 Vue 带来的不同在于：

1. 与 React Hooks 相同级别的逻辑组合功能，但有一些重要的区别。 与 React Hook 不同，setup函数仅被调用一次，这在性能上比较占优。

2. 对调用顺序没什么要求，每次渲染中不会反复调用 Hook 函数，产生的的 GC 压力较小。

3. 不必考虑几乎总是需要 useCallback 的问题，以防止传递函数prop给子组件的引用变化，导致无必要的重新渲染。

4. React Hook 有臭名昭著的闭包陷阱问题，如果用户忘记传递正确的依赖项数组，useEffect 和 useMemo 可能会捕获过时的变量，这不受此问题的影响。 Vue 的自动依赖关系跟踪确保观察者和计算值始终正确无误。

5. 不得不提一句，React Hook 里的「依赖」是需要你去手动声明的，而且官方提供了一个 eslint 插件，这个插件虽然大部分时候挺有用的，但是有时候也特别烦人，需要你手动加一行丑陋的注释去关闭它。

我们认可 React Hooks 的创造力，这也是 Vue-Composition-Api 的主要灵感来源。上面提到的问题确实存在于 React Hook 的设计中，我们注意到 Vue 的响应式模型恰好完美的解决了这些问题。

--- 来自ssh

Vue的组合式API刚出来的时候确实一看好像React Hooks，我也对它的.value进行了吐槽，

但是总体来说还是更偏向于Vue Hooks。

6. 写法

React的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，所以说React的写法感觉相对自由一些，逻辑正确老子想怎么写怎么写，对于我来说，我确实更偏向于React的写法。

Vue则是把html，css，js组合到一起，就像 Web 开发多年的传统开发方式一样， vue-loader会解析文件，提取每个语言块用各自的处理方式，vue有单文件组件(SFC)，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。Vue感觉是给你搭了一个框架，告诉你什么地方该写什么东西，你只要按照他的要求向里面填内容就可以了，没有React那么自由，但是上手难度简单了许多。而且因为SFC，一个组件的代码会看起来很长，维护起来很头痛。

7. 理念及设计

Vue 和 React 的核心差异，以及核心差异对后续设计产生的“不可逆”影响。

Vue 和 React 在 API 设计风格和哲学理念（甚至作者个人魅力）上的不同。

Vue 和 React 在工程化预编译构建阶段，AOT 和 JIT 优化的本质差异和设计。

这个层次的比较确实对我难度确实大，我也懒得去copy，下面是Lucas大佬的分析，可以去看一下，时空隧道。

作者：黑色的枫
来源：https://juejin.cn/post/7037365650251055134

前言

微前端是 2016 年thoughtWorks提出的概念，它将微服务的理念应用于浏览器端，即将前端应用由单体应用转变成多个小型前端应用聚合的应用。各个小型前端应用可以独立运行、独立开发、独立部署。

为什么出现？

与微服务出现的原因相似，随着前端业务越来越复杂，前端的代码和业务逻辑也愈发难以维护，尤其对于中后台系统，很容易出现巨石应用，微前端由此应运而生，其根本目的就是解决巨石应用的项目复杂，系统庞大，开发人员众多，难以维护的问题。

微前端 vs 巨石应用

架构方案

基座模式是当前比较常见的微前端架构设计。

首先以容器应用作为整个项目的主应用，负责子应用的注册，聚合，提供子运行环境、管理生命周期等。子应用就是各个独立部署、独立开发的单元。

应用注册表拥有每个应用及对应的入口。在前端领域里，入口的直接表现形式可以是路由，又或者对应的应用映射。

目前可以实现微前端架构的方案有如下：

HTTP后端路由转发（nginx）

• ✅ 简单高效快速，同时不需要前端做额外的工作。

• ❌ 体验并不好，相当于mpa页面，路由到每个应用需要重新刷新

iframe

• ✅ 前端最简单的应用方式，直接嵌入，门槛最低，改动最小

• ❌ iframe都会遇到的一些典型问题：UI 不同步，DOM 结构不共享（比如iframe中的弹框），跨域通信等

各个业务独立打到npm包中

• ✅ 门槛低，易上手

• ❌ 模块修改后需要重新部署发布，太麻烦。

组合式应用路由分发（基座模式）

• ✅ 纯前端改造，体验良好，各个业务相互独立

• ❌ 需要设计和开发，有一定成本，同时需要兼顾子页面和基座的变量污染，样式互相影响等问题

web component

• ✅ 是一项标准，目前它包含三项主要技术，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。应该是微前端的最终态

• ❌ 比较新，兼容性较差

微前端页面形态

微前端基座框架需要解决的问题

路由分发

作为微前端的基座应用，是整个应用的入口，负责承载当前子应用的展示和对其他路由子应用的转发，对于当前子应用的展示，一般是由以下几步构成：

1. 远程拉取子应用内容

2. 将子应用的 js 和 css 抽离，采用eval来运行 js，并将 css 和 html 内容append到基座应用中留给子应用的展示区域

3. 当子应用切换走时，同步卸载这些内容

对于路由分发而言，以采用react-router开发的基座SPA应用来举例，主要是下面这个流程：

1. 当浏览器的路径变化后，react-router会监听hashchange或者popstate事件，从而获取到路由切换的时机。

2. 最先接收到这个变化的是基座的router，通过查询注册信息可以获取到转发到那个子应用，经过一些逻辑处理后，采用修改hash方法或者pushState方法来路由信息推送给子应用的路由，子应用可以是手动监听hashchange或者popstate事件接收，或者采用react-router接管路由，后面的逻辑就由子应用自己控制。

应用隔离

应用隔离问题主要分为主应用和子应用，子应用和子应用之间的JavaScript执行环境隔离，CSS样式隔离，

CSS

• 当主应用和子应用同屏渲染时，就可能会有一些样式会相互污染，如果要彻底隔离CSS污染，可以采用CSS Module 或者命名空间的方式，给每个子应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀。

• 而对于子应用与子应用之间的CSS隔离就非常简单，在每次应用加载时，将该应用所有的link和style 内容进行标记。在应用卸载后，同步卸载页面上对应的link和style即可。

JavaScript隔离

• 每当子应用的JavaScript被加载并运行时，它的核心实际上是对全局对象Window的修改以及一些全局事件的改变，例如jQuery这个js运行后，会在Window上挂载一个window.$对象，对于其他库React，Vue也不例外。为此，需要在加载和卸载每个子应用的同时，尽可能消除这种冲突和影响，最普遍的做法是采用沙箱机制（SandBox）。

• 沙箱机制的核心是让局部的JavaScript运行时，对外部对象的访问和修改处在可控的范围内，即无论内部怎么运行，都不会影响外部的对象，需要结合 with 关键字和window.Proxy对象来实现浏览器端的沙箱。

消息通信

应用间通信有很多种方式，当然，要让多个分离的子应用之间要做到通信，本质上仍离不开中间媒介或者说全局对象。所以对于消息订阅（pub/sub）模式的通信机制是非常适用的，在基座应用中会定义事件中心Event，每个子应用分别来注册事件，当被触发事件时再有事件中心统一分发，这就构成了基本的通信机制。

当然，如果基座和子应用采用的是React或者是Vue，是可以结合Redux和Vuex来一起使用，实现应用之间的通信。

搭一个看看？

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。也是支付宝内部广泛使用的微前端框架。

那么我们就使用 qiankun 从头搭一个demo出来体验一下

基座

• 基座我们使用react，自行使用 create-react-app 创建一个react项目即可。

• npm install qiankun -s

• 在基座中需要调用 registerMicroApps 注册子应用，然后调用start启动

因此在 index.js 中插入如下代码

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8080',
    container: '#container',
    activeRule: '/app-vue',
  },
]);

// 启动 qiankun
start();

• 修改App.js

• • 加入一些 antd 元素，让demo像样一些

  • 同时，由于qiankun根据路由来加载不同微应用，我们也安装 react-router-dom

• • npm install react-router-dom

  • 安装完之后修改 App.js 如下：

import { useState } from 'react';
import { Layout, Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom'
import './App.css';

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  
  const onCollapse = collapsed => {
    setCollapsed(collapsed);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
          <Menu.Item key="1" icon={<PieChartOutlined />}>
            <Link to="/app-vue">Vue应用</Link>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '16px' }}>
          <div id="container" className="site-layout-background" style={{ minHeight: 360 }}></div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>This Project ©2021 Created by DiDi</Footer>
      </Layout>
    </Layout>
  );
}

export default App;

• 记得修改 index.js，把 App 组件用 react-router-dom 的 BrowserRouter 包一层，让 BrowserRouter 作为顶层组件才可以跳转

• 至此，基座搭好了

子页面

尝试使用vue作为子页面，来体现微前端的技术隔离性。

• 使用vue-cli创建vue2.x项目

• 修改main.js如下：

import Vue from "vue/dist/vue.js";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

// window.__POWERED_BY_QIANKUN__ 为true 说明在 qiankun 架构中
// 修改webpack的publicPath，将子应用资源加载的公共基础路径设为 qiankun 包装后的路径
// 这个 __INJECTED_PUBLIC_PATH_BY_QIANKUN__ 的实际地址是子应用的服务器地址，子应用的应用资源都在他本身的实际服务器上
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时 直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

// 应用需要导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。
export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}

export async function mount(props) {
  console.log("[vue] props from main framework", props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}

• router.js配置如下：

import Vue from "vue/dist/vue.js";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/test",
    name: "Test",
    component: () => import("./components/Test.vue"),
  },
  {
    path: "/hello",
    name: "Hello",
    component: () => import("./components/Hello.vue"),
  },
];

const router = new VueRouter({
  base: window.__POWERED_BY_QIANKUN__ ? "/app-vue/" : "/",
  mode: "history",
  routes,
});

export default router;

• 根目录下新建vue.config.js 用来配置webpack，内容如下：

const { name } = require("./package");
module.exports = {
  devServer: {
    // 跨域
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      // 把微应用打包成 umd 库格式
      libraryTarget: "umd",
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

启动

基座和子应用分别启动，可以看到，子应用已经加载到了主应用中：

作者：visa
来源：https://juejin.cn/post/7037386845751083021

Android | 彻底理解 View 的坐标

getLeft()

getTop()

getRight()

getBottom()

 

getScrollX()

getScrollY()

 

viewBinding.tvScroll.scrollTo(-100,0)