前端技术周刊 2018-12-03:DOM

前端快爆

  • Chrome 71 开始将试用 SXG 功能,它是由 IETF 提出,Web Package 协议规范下的 Signed HTTP Exchanges 功能的缩写。该技术使得一个第三方服务器可以直接向用户提供可靠资源,且不用与原站共享 HTTPS 证书密钥。?

点评:一项非常适合 CDN 的前瞻技术。

  • Safari 发布了第 70 个科技预览版,近期版本实现了 WebRTC 的功能完善、完善了 Canvas 的审查和 WebGL Shader 的 debug 功能、WebDriver 协议针对 W3C 规范进行了更新等等。?

点评:Canvas 调试功能还是非常棒的。

  • Node.js 十一月累计安全更新发布,修正了大 http 请求头导致拒绝服务、 debugger 端口任意代码执行、Slowloris 拒绝服务及部分 OpenSSL 漏洞。为了预防这些安全风险,可以升级到 Node.js 11.3.0 / 10.14.0 / 8.14.0。?

  • Vue Conf 于 11 月下旬在杭州举行,会上与大家同步了 Vue 3 的更新消息:为提速而完全重构的 Virtual DOM 实现,基于 Proxy 实现的全新监听系统,代码更小,使用 TypeScript 重构,开放了响应式数据更新 API 等等。所有议题的 PPT 已上传官网。?

点评:应该是第一个大型基于 Proxy 接口的框架了,期待。

  • 第 13 届 D2 前端技术论坛将于杭州在明年1月6日举行,现在可以购买普通票了。?

瑞士军刀

  • Retoggle 是一个基于 React Hooks 的脑洞:把一个元素中可以定制的变量,用 React Hooks 抽取出来做成表单组件。

  • 2018 年将要过去,而前端最基础的网络请求库还有一堆:Axios、Request、Superagent、Fetch、Supertest,如果你不知道该用哪一个,这里有一篇比较他们的文章。

  • TypeScript 3.2 发布了,具体更新细节可见官方文档。

专题:DOM 布局

本周专题是易京为我们带来的 DOM 布局相关的文章列表。

布局介绍

布局即是计算可见节点在 Viewport 内的大小位置信息的过程:

  • 渲染树构建、布局及绘制
  • 从 Chrome 源码看浏览器如何 layout 布局
  • 【浏览器工作原理】:布局

Reflow

当 DOM 结构发生变化、样式变化或是调用某些属性方法触发重新构造渲染树的过程为 reflow:

  • 触发 reflow 操作 [英文版] [中文版]
  • CSS Triggers
  • 高性能 JavaScript 重排与重绘
  • 诊断强制同步布局

优化

优化的目的是尽量减少 reflow 发生的次数和影响范围:

  • 缩小样式计算的范围并降低其复杂性
  • 避免大型、复杂的布局和布局抖动
  • Preventing 'layout thrashing'
  • fastDom
  • Introducing 'layout boundaries'
  • What are Reflows and Repaints and How to Avoid Them

编辑:承虎 humphry & 审阅:壹丝 & 专题供稿:易京

首发地址:zhuanlan.zhihu.com/mm-fe

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/281409.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

公司新来了一位阿里P9,在全员大会上讲荤段子!还是上个世纪的老段子,太烂了!...

阿里P9在坊间的名声一向不好,这几年在业界出了不少令人无语的新闻,今天又来了一个:公司新来了一位阿里P9伪高管,全员大会上来先讲了一个荤段子,这个破段子还是上个世纪的,太烂了!关于这个段子&a…

【转】博客美化(1)基本后台设置与样式设置

阅读目录 1.博客园后台设置2.自定义样式的设置博客园美化相关文章目录:博客园博客美化相关文章目录 一直都拜膜那些博客园的皮肤设计高手,由于本人对前端研究甚少,所以js,css这种东西只能看得懂最基本的,会简单改改。然后一直对自…

Airdoc创始人:工智能可以在医疗领域多个环节发挥作用 但有局限性

7月1日,在由武汉国家生物产业基地建设管理办公室主办、火石创造承办、光谷健康智慧园协办的医疗大数据与医学人工智能高峰论坛上,Airdoc创始人兼董事长张大磊做了题为《AI在医疗领域中应用的问题与局限》的演讲。 Airdoc是医疗领域人工智能领军企业&…

我的世界服务器抽奖系统怎么弄,我的世界自动识别货币抽奖机如何制作

我的世界是一款很经典的沙盒类游戏,在游戏中红石和命令方块是这部作品的核心,可以制作很多装备和道具,下面给大家分享下我的世界自动识别货币抽奖机如何制作,希望对大家有所帮助。自动识别货币抽奖机制作方法废话不多说,(貌似一句…

Java并发编程中volatile实现过程详细解析

2019独角兽企业重金招聘Python工程师标准>>> 首先并发编程有三大特性: 可见性,有序性,原子性。volatile关键字实现了前面两个特性。那么它是如何实现这两个特性的呢? 首先是可见性。可见性主要是让缓存,直接…

《ASP.NET Core 6框架揭秘》实例演示[32]:错误页面的N种呈现方式

由于ASP.NET是一个同时处理多个请求的Web应用框架,所以在处理某个请求过程中出现异常并不会导致整个应用的中止。出于安全方面的考量,为了避免敏感信息外泄,客户端在默认情况下并不会得到详细的出错信息,这无疑会在开发过程中增加…

SpringMVC接受JSON参数详解及常见错误总结我改

SpringMVC接受JSON参数详解及常见错误总结 最近一段时间不想使用Session了,想感受一下Token这样比较安全,稳健的方式,顺便写一个统一的接口给浏览器还有APP。所以把一个练手项目的前台全部改成Ajax了,跳转再使用SpringMVC控制转发…

软件定义存储的定制化怎么走?

引言 当前,软件定义存储成为业内超高速增长的典型。有研究人员称,从2014年到2019年,软件定义存储市场将从14亿美元增长到62亿美元以上,年复合增长率将达35%。软件定义存储所带来的优势显而易见,但是对于企业来说&#…

Golang并发模型:合理退出并发协程

goroutine作为Golang并发的核心,我们不仅要关注它们的创建和管理,当然还要关注如何合理的退出这些协程,不(合理)退出不然可能会造成阻塞、panic、程序行为异常、数据结果不正确等问题。这篇文章介绍,如何合…

剑网服务器维护,12月31日服务器例行维护公告

隐元秘鉴新增以下江湖行里使用趣味道具的成就:压酒唤客尝:使用压酒三十次欲解红烛意:使用烛影三十次闲情吹笛子:使用吹断三十次引弦中落雀:使用千鸟三十次黄云动风色:使用风色三十次卷抒平生意:…

一款 Windows 软件快捷助手

WPF 开发的 Windows 软件快捷助手Windows 软件快捷助手作者:WPFDevelopersOrg - 驚鏵原文链接:https://github.com/WPFDevelopersOrg/SoftwareHelper框架使用.NET40;Visual Studio 2019;项目使用 MIT 开源许可协议;项目使用 MVV…

关于8位AD_DA转换芯片的采样率问题

关于使用Keil计算程序执行时间 打开Keil程序,进入“启动/停止调试”界面。在需要暂停的地方设置断点(在该句程序前双击)。在程序上方有一行工具栏:此工具栏分别代表复位、运行、停止、步进、步越、步出、运行到光标处等。 点击运…

CYQ.Data 数据框架 V4.0 开源版本发布(源码提供下载,秋色园V2.5版本标配框架)

说明的说明: 博客园团队两次移此文出首页,说 这篇文章不属于知识分享型文章,并且有广告嫌疑。 本文的确属于分享型文章,而且分享的知识点比其它文章都多很多,看看网友回复“谢谢分享”就知道是分享型文章了。 所谓广告…

oracle 分组后取每组第一条数据

数据格式 分组取第一条的效果 sql SELECT * FROM (SELECT ROW_NUMBER() OVER(PARTITION BY x ORDER BY y DESC) rn, test1.* FROM test1) WHERE rn 1 ;

永大服务器进去显示字母,永大电梯服务器使用说明

永大电梯服务器使用说明2021-05-25一. 目的:用于工务交车前对MPU和XDR板进行调试。二. 对应作业:1-1对MPU电梯调试接线连接:1).对MPUGB2(A2)版电梯调试时(以及A2前版本),接线情况如下:连接顺序连…

树莓派Zero 2 W(ubuntu-22.04)通过.NET6和libusb操作USB读写

有这个想法的初衷喜欢电子和DIY硬件的朋友对稚晖君应该都不陌生,他定期都会分享一些自己做的好玩的硬件,他之前做了一个ElectronBot桌面机器人我就很感兴趣,所以就自己也做了一个。起初我只是自己开发了一个叫电子脑壳的上位机软件&#xff0…

bzoj4589

fwt 原理并不知道 nim游戏石子异或和0后手赢 那么也就是求a[1]^a[2]^...^a[n]0的方案数 这个和bzoj3992一样可以dp dp[i][j]表示前i个数异或和为j的方案数 dp[0][0] 1 dp[i][j] dp[i - 1][k] * a[p] p ^ k j a[p] 0 / 1 表示有没有p这个数 这个东西也不能矩阵快速幂 但是我…

UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 85

UnicodeDecodeError: ascii codec cant decode byte 0xe5 in position 85;import sys reload(sys) sys.setdefaultencoding(utf8)

JS设计模式五:职责链模式

职责链模式简述 职责连是由多个不同的对象组成的,有发送者跟接收者,分别负责信息的发送跟接收,其中,链中第一个对象是 职责连是由多个不同的对象组成的,发送者是发送请求的对象,接收者接收请求并且对其进行…

web框架之Django(一)

Python的WEB框架有Django、Tornado、Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM、模型绑定、模板引擎、缓存、Session等诸多功能。 基本配置 一、创建django程序 终端命令:django-admin startprojec…