写点什么

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

2010 年 8 月 27 日

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 年 8 月 27 日 01:45449
用户头像

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

关注

评论

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

亿级大表分库分表实战总结(万字干货,实战复盘)

云流

学习 编程 架构 计算机网络

覆盖全网的阿里微服务架构有多牛:K8S+实战+笔记+项目教程

Java~~~

Java 程序员 微服务 Spring Cloud 阿里云 K8S

那个小白还没搞懂内存溢出,只能用案例说给他听了

田维常

内存溢出

#不吐不快# IT职场里的奇葩经历

InfoQ写作平台官方

职场搞笑 活动专区 奇葩的经历

报告显示国际区块链监管呈三大趋势

CECBC区块链专委会

区块链 货币 监管

揭秘双11:前端技术体系

阿里云情报局

前端 前端进阶

MySQL全面瓦解—子查询和组合查询

比伯

Java 编程 程序员 架构 计算机

多线程问的太深入不知道怎么回答,从volatile开始给你讲清楚

小Q

Java 学习 面试 volatile 多线程

【乘风破浪的开发者】丁一超:从AI实战营出发探索未知的AI世界

华为云开发者社区

华为 AI modelarts

云算力挖矿模式系统开发,云算力平台搭建

13530558032

程序员求助:腾讯面试题,64匹马8个跑道,多少轮选出最快的四匹

Java架构师迁哥

数字货币交易所功能,场外OTC交易所开发公司

13530558032

USDT币支付系统开发搭建,区块链承兑商支付平台

13530558032

企业工作流设计原则及注意事项

力软.net/java开发平台

工作流

这套JVM核心知识你要全都会,月薪还不过18K可以直接跳槽了

小Q

Java 学习 架构 面试 JVM

不要拿区块链做挡箭牌

CECBC区块链专委会

区块链

断供,危机or契机?开源商业化or社区化?后疫情下的开源路这样走 | 大咖对话

易观大数据

「Spring Boot 2.4 新特性」一键构建Docker镜像

AI乔治

Java Docker 架构

《精通lambda表达式:Java多核编程》.pdf

田维常

Lambda

adb的常用操作命令

Yolanda_trying

架构师第一期作业(第 9 周)

Cheer

作业

关于linux操作系统中的buff/cache

程序员架构进阶

Linux cache buffer

数字货币钱包开发费用,区块链钱包开发优势

13530558032

牛批!2w字的Java集合框架面试题精华集(2020最新版),赶紧收藏。

Java架构之路

Java 程序员 架构 面试 编程语言

两句话给面试官讲清楚IOC

执墨

spring ioc 依赖倒置原则 springioc 控制反转

SQL数据库:子查询和关联子查询

正向成长

SQL子查询 SQL关联查询

Alibaba首发的《Java技术成长笔记》,渴望提升自己的程序员的必备宝典!

Java架构之路

Java 程序员 架构 面试 编程语言

“3+3”看华为云FusionInsight如何引领“数据新基建”持续发展

华为云开发者社区

数据库 新基建 华为云

干货!直观地解释和可视化每个复杂的DataFrame操作

计算机与AI

Python pandas 数据处理

SQL数据库:CASE表达式

正向成长

CASE表达式

数字货币助力支付体系高效运行

CECBC区块链专委会

金融

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