SameSiteCookieRecoveryMandatoryOpeningDeprecationofTLS1.0andTLS1.1WebanimationsAPI更新支持离线加载网页数据支持wakelockWebAssemblySIMD进入实验阶段DevTools增加Issues选项卡JavaScript支持私有方法JavaScript支持弱引用安全更新恢复SameSitecookie更改4月，Chrome暂时推迟了SameSitecookie属性的推出，以确保在COVID-19响应的关键初始阶段提供基本服务的网站的稳定性。过去几个月，Chrome一直在关注这些网站的准备情况，Chrome84将同时恢复SameSitecookies的强制开启，并启用Chrome80+的强制开启。弃用TLS1.0和TLS1.1TLS（传输层安全性）是保护HTTPS的协议。它的历史可以追溯到近20年前的TLS1.0及其更早的前身SSL。TLS1.0和1.1都有很多缺点：TLS1.0和1.1在完成计算哈希时使用MD5和MD5，两者都是弱哈希。SHA-1。TLS1.0和1.1在服务器签名中使用MD5和SHA-1。TLS1.0和1.1仅支持RC4和CBC密码。RC4已损坏，此后将被删除。TLS的CBC模式构建存在缺陷，容易受到攻击。TLS1.0的CBC密码也错误地构造了它们的初始化向量。TLS1.0不再符合PCI-DSS。支持TLS1.2是避免上述问题的前提。TLS工作组已弃用TLS1.0和1.1。Chrome现在也弃用了这些协议。Web动画APIChrome84向Web动画API添加了许多以前不受支持的功能。Promise支持animation.ready和animation.finishedPromise调用：consttransformAnimation=modal.animate(openModal,openModalSettings);transformAnimation.finished.then(()=>{text.animate(fadeIn,fadeInSettings)});性能提升基于对mousemove等事件进行动画处理时，每次都会创建一个新的动画，会很快消耗内存，降低性能。为了解决这个问题，浏览器引入了可替换动画，实现了自动清理，将完成的动画标记为可替换的，如果被另一个完成的动画替换则自动移除。elem.addEventListener('mousemove',evt=>{rectangle.animate({transform:translate(${evt.clientX}px,${evt.clientY}px)},{duration:500,fill:'forwards'});});每次鼠标移动时，浏览器都会重新计算每个球在中的位置，并为该新点创建动画。浏览器现在知道在以下情况下删除旧动画：动画完成后。合成序列中的一个或多个动画也已完成。新动画是为相同的属性设置动画。更流畅的动画合成模式您现在可以为动画设置合成模式，这意味着除了默认的替换模式外，动画还可以添加。复合模式允许开发人员编写不同的动画，并让他们控制效果的组合方式。现在支持三种复合模式：“替换”（默认模式）、“添加”和“累积”。在默认的“replace”复合模式下，最终动画将替换transform属性并最终变为rotate(360deg)scale(1.4)。对于“添加”，合成器添加旋转并乘以比例，导致最终状态为旋转（720度）比例（1.96）。'accumulate'合并转换，导致旋转（720度）比例（1.8）。内容索引API使用新添加的内容索引API，您可以为离线可用的内容添加URL和元数据。然后通过此元数据将内容呈现给用户，从而提高可发现性。这样，即使没有Internet链接，您的网站也可用。这是一个示例调用：constregistration=awaitnavigator.serviceWorker.ready;awaitregistration.index.add({//Required;settosomethinguniquewithinyourwebapp.id:'article-123',//Required;urlneedstobeanoffline-capableHTMLpage.//ForcompatibilityduringtheOriginTrial,includelaunchUrlaswellurl:'/articles/123',launchUrl:'/articles/123',//必需;usedinuser-visiblelistsofcontent.title:'Articletitle',//必需;usedinuser-visiblelistsofcontent.description:'Amazingarticleaboutthings!',//必需;usedinuser-visiblelistsofcontent.icons:[{src:'/img/article-123.png',sizes:'64x64',type:'image/png',}],//Optional;validcategoriesarecurrently://'homepage','article','video','audio',or''(default).category:'article',});WakelockAPI你有没有遇到过这样的烦恼：一边看电脑屏幕一边做其他事情，电脑长时间无反应后进入屏保。WakelockAPI允许网页请求唤醒锁以防止屏幕变暗或进入屏幕保护程序。可以使用navigator.wakeLock.request()来调用唤醒锁，结合setTimeout在一段时间后自动释放：//Thewakelocksentinel.letwakeLock=null;//Functionthatattemptstorequestascreenwakelock.constrequestWakeLock=async()=>{尝试{wakeLock=awaitnavigator。wakeLock.request('screen');wakeLock.addEventListener('release',()=>{console.log('ScreenWakeLock被释放');});console.log('ScreenWakeLockisactive');}catch(err){console.error(`${err.name},${err.message}`);}};//Requestascreenwakelock...awaitrequestWakeLock();//...andreleaseitagainafter5s.window.setTimeout(()=>{wakeLock.release();wakeLock=null;},5000);IdleDetectionAPI空闲检测（IdleDetectionAPI）会在用户空闲时通知开发者，提示如长时间没有与键盘、鼠标、屏幕交互、屏幕保护程序激活、屏幕锁定或诸如移动到其他屏幕之类的事情。开发者可以自定义触发通知的阈值。以下场景非常适合使用空闲检测：聊天软件或在线社交网站可以使用此API通知用户他们的联系人当前是否可用。例如博物馆展示程序等应用程序可以使用此API在没有交互后返回首页。需要复杂计算的应用程序（例如绘制图表）可以将这些计算限制在用户与其设备交互时。检测空闲检测是否可用：if('IdleDetector'inwindow){//IdleDetectorAPIsupported}调用示例：//CreatetheidledetectorconstidleDetector=newIdleDetector();//Setupaneventlistenerthatfireswhenidlestatechanges.idleDetector.addEventListener('change',()=>{constuorState.idleDetectoruserState;constsState=idleDetector.screenState;console.log(`Idlechange:${uState},${sState}.`);});//启动theidledetector.awaitidleDetector.start({threshold:60000,signal,});Web汇编SIMDSIMD（SingleInstructionMultipleData）是单指令流多数据流，它使用一个控制器控制多个处理器，同时对一组数据（也称为“数据向量”）中的每一个执行相同的指令操作来实现空间平行。简单地说，一条指令可以同时处理多个数据。WebAssemblySIMD提案的最终目标是将矢量运算纳入WebAssembly规范，这可以极大地加速高级计算应用程序，例如音频/视频编解码器、图像处理应用程序、密码应用程序等。虽然还处于实验阶段，但现在被广泛使用的开源程序（如Halide、OpenCV.js、XNNPACK）都支持WebAssemblySIMD。我们可以清楚地看到SIMD的性能差异。如果没有SIMD，现代笔记本电脑每秒只能获得大约3帧，而启用SIMD后，您可以获得每秒15-16帧的流畅体验。这是一个更有趣的“隐身”示例：WebAssemblySIMD原始版本试用版可作为Chrome版本84-86中的实验使用。DevTools使用新的问题选项卡更新了问题选项卡抽屉，以帮助减少控制台输出混乱。目前，控制台是Web开发人员、库、框架和Chrome本身记录消息、警告和错误的中心位置。“问题”选项卡以结构化、聚合和可操作的方式显示来自浏览器的警告，链接到DevTools中受影响的资源，并提供有关如何修复它们的指南。随着时间的推移，越来越多的Chrome警告将出现在问题选项卡而不是控制台中，这应该有助于减少控制台的混乱。性能面板更新性能面板现在在页脚中显示“总阻塞时间(TBT)”信息。TBT是一种加载性能指标，有助于量化页面变为可用所需的时间。它本质上衡量一个页面看起来可用的时间（因为它的内容已经呈现在屏幕上），但实际上是不可用的，因为JavaScript阻塞了主线程，因此页面无法响应用户输入。TBT是近似于第一类延迟的主要实验室指标，它是Google的新CoreWebvitals之一。要获得TBT，请不要使用ReloadPage工作流来记录页面加载性能。相反，单击录制，手动重新加载页面，等待页面加载，然后停止录制。如果您看到TotalBlockingTime:Unavailable，这意味着DevTools无法从Chrome的内部配置文件数据中获取所需的信息。此外，还支持CLS：图片预览将鼠标悬停在background-image上可以在tooltip中看到图片预览：V8v8.4-支持私有方法v7.4中新增的私有字段进一步支持私有方法和访问器。从语法上讲，私有方法和访问器的名称以#开头，就像私有字段一样。这里简单介绍一下语法：classComponent{#privateMethod(){console.log("I'monlycallableinsideComponent!");}get#privateAccessor(){return42;}set#privateAccessor(x){}}私有方法和访问器具有与私有字段相同的范围规则和语义。V8v8.4-弱引用JavaScript是一种垃圾收集语言，这意味着当垃圾收集器运行时，程序无法再访问的对象占用的内存可能会自动回收。除了JavaScript中的WeakMap和WeakSet引用之外，JavaScript中的所有引用都足够强大，可以防止引用的对象被垃圾回收。例如，下面的代码：只要globalRef可以通过全局范围访问，它和它的回调属性中的函数都不会被收集。constglobalRef={callback(){console.log('foo');}};JavaScript开发人员现在可以通过WeakRef功能对对象进行弱引用。如果弱引用引用的对象也没有被强引用，它们不会阻止它被垃圾收集。constglobalWeakRef=newWeakRef({callback(){console.log('foo');}});(asyncfunction(){globalWeakRef.deref().callback();awaitnewPromise((resolve,reject)=>{setTimeout(()=>{resolve('foo');},42);});globalWeakRef.deref()?.callback();})();
