也许,DOM 不是答案

有一个词“移动网站”(web),指的是用于移动浏览的网站,但并不存在。

当人们提到“移动互联网”时,他们指的是另一件事:移动应用程序。

图片[1]-也许,DOM 不是答案-唐朝资源网

一、Web 应用与应用

与移动应用相比,网站具有一些明显的优势。

但现实是什么?

图片[2]-也许,DOM 不是答案-唐朝资源网

(1)体验很差,手机app的操作远比网站流畅。

(2)行业不支持。所有公司的移动端开发重点是游戏服务器是cs架构用来网站使用会怎么样,几乎都是原生应用。

(3)用户不在乎。大多数用户选择使用移动应用而不是网站。

如果有一天,web 一个应用会成为主流,而且必须有一个前提,它的性能可以赶上这个应用。

二、为什么网络应用会出现性能瓶颈?

图片[3]-也许,DOM 不是答案-唐朝资源网@ >

Web应用输给应用的地方不是界面(UI),而是操作性能。主要是()和()这两个方面,会出现jank,用户会感觉明显时滞,有时慢得让人难以忍受。

Web 应用的性能瓶颈主要有以下几个原因。

(1)Web是基于DOM的,而DOM是很慢的。浏览器打开网页时,需要解析文档,生成内存中的DOM结构。如果遇到复杂的文档,这个过程很慢,试想一下,如果网页上有几万甚至几十个文档上千个形状(无论是图片还是CSS),生成DOM需要多长时间?更不用说与其中一个交互了他们。

(2)DOM变慢了。所有的DOM操作都是同步的,会阻塞浏览器。操作DOM的时候,必须等上一个操作结束后才能进行下一个操作。只要一次操作卡住,整个网页会暂时失去响应,浏览器重绘网页的频率是60FPS(即16毫秒/帧),DOM操作不能在16毫秒内完成,所以出现跳帧. 不流畅和不连贯的用户体验源于此。

(3) 网页是单线程的。现在的浏览器对每个网页只使用一个线程。所有的工作都在这个线程上完成,包括布局、渲染、执行、图像解码等。怎么可能呢?不慢吗?

(4)网页没有硬件加速。网页由CPU处理,GPU不用于图形加速。

这些原因对于PC来说并不严重,但是手机的硬件资源比较有限,用户交互比较频繁。与app相比,结果完全逊色。

三、解决方案

本来是一个手机应用,最近开始部署网页版,遇到了上面的问题:网页版的体验不好。

上周,他们在网站上公布了解决方案,结果引起了轰动,因为这是一个前所未有的解决方案:

—-他们没有使用DO M,而是使用了整个网站的输出!

你可以用手机打开,体验一下,看看和app有什么不同。如果您没有帐户,可以直接在此处或此处打开。

这个方案的出发点是:如果网页一个一个地变化,用户就相当于和图片进行交互,从而绕过了DOM,减少了操作时滞。此外,它可以进行硬件加速,从而提高性能。具体技术细节请参考原文。改造是基于React框架实现的,专门开发了React-库,已经开源。

这个方案引起了很多争议(这里和这里),主要是因为它只是一个位图,没有语义。如果要在其上实现UI,就相当于重新发明了HTML语言已有的东西。 ,比如如何实现超链接,如何实现CSS效果等等。一些最简单的事情变得麻烦了,因为它不是(),哪里的文字断了,你得自己计算,用户不能选择文字。另外游戏服务器是cs架构用来网站使用会怎么样,如何让搜索引擎检索网页也不是很容易解决。

但无论哪种方式,这都是值得的尝试。

四、前面的路

James Long 写了一篇关于 Web 的评论。这篇文章的灵感来自那篇文章。

在本文中,James Long 对网络应用的未来做了一些我认为值得分享的预测。

(1)多线程浏览器。每个网页应该由多个线程处理,主线程只负责布局和渲染,应该在16毫秒内完成,由线程执行,这样就有了不会有阻塞,正在开发的伺服就是这样一个项目。

(2)DOM的异步操作。DOM的操作不再是同步的,而是触发后,post监听Event Loop机制。

(3)非DOM解决方案。浏览器不再将网页处理成DOM结构,而是处理成其他结构。React的DOM解决方案就是这种类型的解决方案。,还有更激进的解决方案,比如替换带有数据库的 DOM。

(完)

© 版权声明
THE END
喜欢就支持一下吧
点赞116 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片