写点什么

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:45979
用户头像

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

关注

评论

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

一人走路不孤独,小度化身百度地图导航NPC,伴你回家路

百度大脑

Hadoop运行环境搭建

编程江湖

hadoop

低代码实现探索(三十一)管好你的组件--元信息

零道云-混合式低代码平台

在线标准程序员计算器

入门小站

工具

虎年开工大吉|Hoo研究院2022年0207期区块链简报

区块链前沿News

Hoo 虎符交易所 虎符研究院 虎年

春节消费观察:四种愉悦感,抓住女人心

脑极体

Java常见数据结构详解

编程江湖

为什么你辛苦肝的博客没人看?搭框架、排版、画图技巧这些你真的懂么?

码哥字节

排版规范 写作技巧 2月月更

暂时不在更新

你?

Apache Druid 在 Shopee 的工程实践

Shopee技术团队

数据库 后端 Apache Druid

Serverless 应用优化四则秘诀

Serverless Devs

Serverless

Milvus 2.0 正式 GA

Zilliz

数据库 AI

架构实战营模块七 作业

Jude

架构实战营

GitLab + Jenkins + ACK 自动化部署方案

百瓶技术

运维 jenkins 自动化部署 #GitLab ACK

云效交付篇:流水线持续交付 | 云效快速入门

阿里云云效

阿里云 DevOps 云原生 持续交付 研发

Apache POI详解及Word文档读取示例

程序员架构进阶

Java Apache POI 2月月更

Linux之free命令

入门小站

Linux

(2-2|27)🤗Huggingface.Transformers是什么?

mtfelix

300天创作

Serverless 年终技术盘点 :工业、学术、社区遍地开花

Serverless Devs

云计算 阿里云 Serverless

微服务从代码到k8s部署应有尽有系列(一)

万俊峰Kevin

Go 微服务 web开发 go-zero RPC框架

Apache Pulsar 2021 年度盘点(结尾有惊喜)

Apache Pulsar

开源 云原生 中间件 社区 Apachepulsar

抽奖| Apache Pulsar 社区新年福袋来啦

Apache Pulsar

开源 云原生 中间件 Apache Pulsar 社区

职场焦虑之我对35岁危机的看法

老张

35岁危机 职场发展

模块七作业

whoami

「架构实战营」

聚力同行,迈向零碳未来

大咖说

云计算 阿里巴巴 阿里云 数智化

容器编排技术 Kubernetes 学习总结|社区征文

架构精进之路

云原生 新春征文 2月日更

盘点下近几年退役的顶级 Apache 大数据项目 - 继 Sentry,Sqoop 之后,Ambari 正式退役

明哥的IT随笔

大数据 ambari sqoop sentry

人人都是 Serverless 架构师 | 弹幕应用开发实战

Serverless Devs

Serverless 弹幕 应用开发

2021 Apache Pulsar 中文社区先锋奖与年度优秀案例奖出炉!

Apache Pulsar

开源 云原生 中间件 Apache Pulsar 社区

让所有工具变成你的锤子 — 邂逅《Every Tool's a Hammer》

蔡超

方法论 学习笔记 软件架构

Python代码阅读(第74篇):单词首字母转换成大写

Felix

Python 编程 字符串 阅读代码 Python初学者

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