QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

Web 2.0 应用客户端性能问题十大根源

  • 2010-08-27
  • 本文字数:1838 字

    阅读完需:约 6 分钟

Web 2.0 应用的推广为用户带来了全新的体验,同时也让开发人员更加关注客户端性能问题。最近,资深 Web 性能诊断专家、知名工具 dynatrace 的创始人之一 Andreas Grabner 根据自己的工作经验,总结了Web 2.0 应用客户端性能问题十大根源,InfoQ 中文站将这十个问题做了概括整理,供Web 开发人员借鉴和思考。

1. IE 中的 CSS 选择器(selector)运行缓慢

Web 开发人员通常使用 JavaScript 框架(如 jQuery)提供的 CSS 选择器来实现查找功能,如 var element = $(“.shoppingcart”),但是 IE 6 和 7 没有提供这种查找方法的原生实现。所以,JavaScript 框架不得不通过遍历整个 DOM 树来达到目的。这种方式花费的时间比在其他浏览器中的消耗要多得多,而且严重依赖于 DOM 树的规模。IE 8 对 CSS 查找提供了较好的支持,所以 Web 人员最好升级相应的 JavaScript 框架版本以利用这些新特性。

2. 针对相同对象重复进行 CSS 查找

正如第一点所说,单个 CSS 查找代价高昂,在这种情况下,如果还要对相同的对象进行多次重复查找,那性能问题就可想而知了。下图是一个典型的 Web 页面中 CSS 查找功能调用统计结果:

dynaTrace analysis how often a CSS Selector got executed on a single page

(引自 dynatrace 博客,中间一列为查找函数总执行时间,单位毫秒,最后一列为函数调用次数)

对于这种问题,Andreas Grabner 建议将第一次查找的结果保存到变量中,在以后需要的时候重用即可,不必再重复进行查找。

3.XHR 调用太多

JavaScript 和 XmlHttpRequest 是 AJAX 技术的基础,很多 JavaScript 框架都提供了非常方便的使用方法,Web 开发人员会充分利用其异步通信优势来实现诸如分页加载等效果,避免对整个页面的操作。

Andreas Grabner 根据自己的经验指出,他发现这种方式被滥用了——过多的信息通过过多的调用来动态访问。例如,在一个显示 10 种商品的页面中,开发人员可能想分别加载每种商品的详细信息。这意味着,你需要和服务器端进行 10 次交流才能得到全部信息,也会对后台系统产生压力。他建议,在这种情况下,把 10 次调用合并成 1 次来减少通信压力。

4. 代价高昂的 DOM 操作

操作 DOM 是网页交互性的必要技术。拿添加 DOM 元素来说,存在多种实现方式,每种方式因为不同的浏览器类型和元素数量大小带来的性能影响也各不相同。建议大家仔细分析比较不同的方法,采用适合自身情况的技术。

5.JavaScript 文件过多

Andreas Grabner 说,对于一个典型的网站来说,存在超过 40 个单独的 JavaScript 文件并不少见。他指出,JavaScript 文件过多带来两个问题:一是浏览器在加载这些文件时需要通过 JavaScript 引擎切换上下文运行环境,二是因为下载文件而带来额外的网络通信。解决方法是:减少 JavaScript 文件数量!

6.DOM 规模庞大

DOM 规模对页面性能影响很大,具体表现在:

  • 占用的内存
  • 从根节点到子节点的 style 变化所花费的开销
  • IE 中 CSS 查找的性能问题
  • DOM 遍历操作的性能问题

所以,警惕你的 DOM 树!

7. 事件处理函数绑定过多

对于 Web 开发人员来说,绑定事件处理函数是日常工作之一。Andreas Grabner 提醒大家关注其对性能的影响:

  • 绑定操作本身消耗时间(如查找对象、注册事件管理器等)。
  • 当事件被触发时,事件管理器需要查找注册该事件的元素,并调用正确的事件处理函数。
  • 在切换页面时,要记住对事件解绑,避免 DOM 相关的内存泄露问题。

8. 外部服务执行缓慢

很多网页都嵌入了外部内容(如广告栏等)或者调用外部服务,Web 开发人员通常需要在页面中包含由第三方提供商发布的 JavaScript 文件,而通常这些文件中就存在前面所提到的性能问题,我们需要擦亮眼睛,如果有问题要反馈给第三方供应商让其修改优化。

9. 滥用视觉效果

很多 JavaScript 框架都提供了绚丽的视觉特效,如动态弹出表单等,一些方法在示例代码中运行良好,但是在实际的页面中特别是 DOM 规模较大时表现不尽人意。Andreas Grabner 建议 Web 开发人员在引入视觉效果时关注其对浏览器 CPU、渲染引擎和整个网站性能的负面影响。

10. 日志和监控粒度过细

现在存在很多优秀的日志和监控工具,但是如果把粒度设得太细(如记录每次鼠标移动的详情),信息的收集过程会对 JavaScript 引擎和网络产生额外的负担。

Web 2.0 应用客户端性能问题十大根源向大家介绍完了,原文作者 Andreas Grabner 不仅是 Web 性能诊断工具 dynatrace 的创始人之一,而且参与了许多企业级 Web 应用的性能优化项目,他总结的这些问题相信会对国内 Web 开发人员带来一定的启示。

关心服务器端性能的读者朋友请参考本站编辑张龙撰写的《服务器端编程的十大性能问题》, InfoQ 中文站也会继续关注业界的最新进展。

2010-08-27 01:45843
用户头像

发布了 501 篇内容, 共 264.7 次阅读, 收获喜欢 61 次。

关注

评论

发布
暂无评论
发现更多内容

数字孪生实操——实践类

阿里云AIoT

物联网 数据采集 传感器 数字孪生

国庆福利:6大云原生落地指南、100余页实用转型干货 免费下载!

York

容器 DevOps 微服务 云原生 应用现代化

资源画像,看得见的容器资源优化助手

阿里巴巴云原生

阿里云 容器 云原生 ACK

小间距LED显示屏未来十大发展方向

Dylan

LED显示屏 led显示屏厂家 户内led显示屏

软件测试 | 测试开发 | Git实战(五)| 让工作更高效,搞定Git的分支管理

测吧(北京)科技有限公司

测试

关于事务注解中的常用参数详解

codeshero

Java 后端 事务 注解 9月月更

隐私计算大规模落地场景的解决之道:分布式计算架构

Jessica@数牍

隐私计算 分布式技术 分布式计算框架

DAPP系统开发Web3合约技术

薇電13242772558

dapp web3

链上自动化何以成就更好的 Web3 | 对话 OAK Network

One Block Community

区块链 自动化 专访 波卡生态

软件测试 | 测试开发 | BAT 大厂最流行的性能压测、监控、剖析技术体系解析

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Git 实战(三) | Github 必会高频基础命令与 IDE 的 Git 集成

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Git实战(四)| Git分支管理实操,搞定在线合并和本地合并

测吧(北京)科技有限公司

测试

IoT数据倾斜如何解决——实践类

阿里云AIoT

算法 流计算 物联网 数据处理 并行计算

Java | interface 和 implements关键字【接口,看这篇就够了】

Fire_Shield

Java 接口 9月月更

软件测试 | 测试开发 | Docker 镜像构建可以分享的快乐

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 黑盒测试方法论—场景法

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 黑盒测试方法论—等价类

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | Jenkins 踩坑 | job 创建、参数化、定时构建及时区偏差问题解决

测吧(北京)科技有限公司

测试

【开发者说】携住数智酒店,用原子化服务创造全新入住体验

HarmonyOS开发者

HarmonyOS

西安前端培训班学习哪家比较好

小谷哥

大数据开发培训机构怎么选择

小谷哥

Hibernate 缓存与 MyBatis 缓存的理解以及比较

codeshero

Java hibernate 缓存 mybatis缓存 9月月更

软件测试 | 测试开发 | BAT大厂都在用的Docker。学会这三招,面试、工作轻松hold住

测吧(北京)科技有限公司

测试

软件测试 | 测试开发 | 30 分钟轻松搞定正则表达式基础

测吧(北京)科技有限公司

测试

NFT 离商业化还有多远?

One Block Community

区块链 程序员 NFT 商业化

十分钟速成DevOps实践

华为云开发者联盟

后端 开发

Java培训技术学习哪个前景不错

小谷哥

西安Java培训班哪家比较好

小谷哥

武汉web前端开发培训机构学费多少

小谷哥

开放算力,云启未来!与龙蜥一起开启 2022 云栖大会之旅

OpenAnolis小助手

开源 科技 峰会 云栖大会 龙蜥社区

软件测试 | 测试开发 | Dubbo-admin+Zookeeper 的环境搭建实操与 Could-not-extract-archive 报错踩坑

测吧(北京)科技有限公司

测试

Web 2.0应用客户端性能问题十大根源_Java_崔康_InfoQ精选文章