美文网首页
webapp之路

webapp之路

作者: 玩问 | 来源:发表于2018-08-08 18:07 被阅读0次

缺陷:
(1)Web基于DOM,而DOM很慢。浏览器打开网页时,需要解析文档,在内存中生成DOM结构,如果遇到复杂的文档,这个过程是很慢的。可以想象一下,如果网页上有上万个、甚至几十万个形状(不管是图片或CSS),生成DOM需要多久?更不要提与其中某一个形状互动了。

(2)DOM拖慢JavaScript。所有的DOM操作都是同步的,会堵塞浏览器。JavaScript操作DOM时,必须等前一个操作结束,才能执行后一个操作。只要一个操作有卡顿,整个网页就会短暂失去响应。浏览器重绘网页的频率是60FPS(即16毫秒/帧),JavaScript做不到在16毫秒内完成DOM操作,因此产生了跳帧。用户体验上的不流畅、不连贯就源于此。

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

(4)网页没有硬件加速。网页都是由CPU处理的,没用GPU进行图形加速。

未来方向:
(1)多线程浏览器。每个网页应该由多个线程进行处理,主线程只负责布局和渲染,而且应该在16毫秒内完成,JavaScript由worker线程执行,这样就不会发生堵塞了。Mozilla正在开发的Servo就是这样一个项目。

(2)DOM的异步操作。JavaScript对DOM的操作不再是同步的,而是触发后,交给Event Loop机制进行监听。

(3)非DOM方案。浏览器不再将网页处理成DOM结构,而是变为其他结构。React的Virtual DOM方案就是这一类的尝试,还有更激进的方案,比如用数据库取代DOM。

摘自:阮一峰——也许,DOM 不是答案 http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html

相关文章

  • webapp之路

    缺陷:(1)Web基于DOM,而DOM很慢。浏览器打开网页时,需要解析文档,在内存中生成DOM结构,如果遇到复杂的...

  • webapp优化的辛酸之路

    webapp优化的辛酸之路 标签(空格分隔): 优化 移动端的首屏加载速度非常重要,使用了vue.js搭建的SPA...

  • webapp/hybrid app踩坑之路

    在写hybrid app的时候,遇到了很多坑,觉得还是开个贴子记录下。 1、input框点击之后,出现页面白屏的情...

  • 在 docker 容器中挂载主机目录

    docker run -d --name web # -v /src/webapp:/opt/webapp --m...

  • docker打包npm问题

    打包命令:docker build -t demo-fraud-webapp:latest -f webapp/w...

  • Spring Boot 将web项目打包成jar运行

    **1. 在src/main文件夹下创建webapp文件夹,将前端源码放入webapp下(并将webapp文件夹e...

  • webapp

    首先讲讲传统web端和webApp的区别, 1.传统的web端通过手机浏览器进行访问,webApp则嵌了个原生那个...

  • webapp

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6...

  • WebApp

    web app开发技巧总结[http://www.cnblogs.com/duanhuajian/archive/...

  • ❖ Web Application 网络应用框架理解

    一个Webapp Framework框架,不同于Web Server (或HTTP Server)。 Webapp...

网友评论

      本文标题:webapp之路

      本文链接:https://www.haomeiwen.com/subject/babxbftx.html