Web前端性能优化的三个偏方

首先牢骚几句。。。
这一次性能优化针对的模块,初次开发阶段客户给的时间就非常少,俩月时间跳过设计一边需求分析一边编码,最后干出6000+的代码行。
最终结果嘛,呵呵,除开一堆bug不说,性能就是个非常大的问题。
这次客户想让我们给它优化了,给的工时仍然是少少少。。。
常规方法都备齐之后性能没有太多改善,因为主要问题是出在业务逻辑结构上,在没有时间对整体结构动大手术的前提下,想出了这么几个偏方。

偏方一:
我们的开发只针对IE浏览器,这一偏方对于其他浏览器可能不适用。
要优化的主页面,完全是由JS动态加载数据并生成元素再添到页面上的,虽然各个元素都是构造好以后就append到了页面上,但是跑JS的时候整个页面就是白花花的。
究其原因,猜测是因为画面渲染和JS执行走的是同一线程,JS一直在跑,画面渲染就没法进行了。
于是我写了这么个方法:

 1 function asyncInvoke() {
 2     var idx = 0;
 3     var funcs = arguments;
 4     var invoker = function () {
 5         if (funcs[idx] != undefined) {
 6             if (funcs[idx] instanceof Function) {
 7                 funcs[idx++]();
 8             }
 9             // 关键点
10             setTimeout(invoker, 1);
11         }
12     };
13     invoker();
14 }

把最顶层的几个方法都扔这个方法来调,初始化的效果就不再是整个页面在卡了半天之后duang一下都显示出来了。虽然整体用时没变,但是感官上会好很多。
原理嘛,就是setTimeout的那一毫秒,把线程的控制权交给了画面渲染,之后的JS代码就得先等一等了。

偏方二:
后来通过调查发现,在进行某一个操作的时候,某一些耗时较长的方法被反复调用了,而最终的效果其实又是最后一次运行单独决定的。
这些方法是分布在不同的几个事件里,从单一的事件来看这个方法又是必须执行的,某一操作触发了多个事件就出现了性能问题。
于是我又拜托了setTimeout,写了这么个方法:

 1 var InvokeCtrl = function () {
 2     if (!(this instanceof InvokeCtrl)) return;
 3
 4     InvokeCtrl.prototype.invokeMap = {};
 5
 6     InvokeCtrl.prototype.invoke = function (caller, func, args, delay) {
 7         if (delay == undefined) delay = 10;
 8
 9         if (this.invokeMap[func]) {
10             // 关键点
11             clearTimeout(this.invokeMap[func]);
12         }
13         this.invokeMap[func] = setTimeout(function () {
14             func.apply(caller, args);
15         }, delay);
16     };
17 };

通过InvokeCtrl.invoke来调用方法的话,就避免了无谓的多次执行。不过,只有一次执行的时候也会延迟10毫秒,这点时间对于客户来说是感觉不出来的。
原理呢,就是用Map来记录每一个要执行的方法,以及对应的setTimeout返回的ID,间隔内的再一次执行就会清除掉上一次的timeout,再把这一次要执行的内容延迟执行。
这个方法对于window.onresize的问题也是适用的,至于delay长度就要看具体方法来定了。

偏方三:
我们的画面上用了大量的HTML模板,之前的做法是AJAX请求并缓存这些模板内容,但是大量的请求显然会导致性能下降。
借鉴于doT.js的玩法,我写了这么个方法:

1 function getTemplate(templateId) {
2     return document.getElementById(templateId).innerHTML;
3 }

关键是这里:

1 <script id="someTemplate" type="template">
2 这里是模板内容
3 </script>

当然实际情况的模板比这个复杂得多,非常简单的模板直接用字面量形式写在JS里可能会更好。
把包含模板的script标签写到主画面的JSP上,这样就实现了一次加载,不用每次都去请求了。不过,这种写法显然会让JSP变得臃肿,一些不一定会用到的模板还是使用AJAX会更好。另外还要注意的是script标签加载前调用getTemplate方法会出错的。

最后想说的是,一切不给够时间做设计的客户都是大土鳖!

时间: 2024-10-12 13:54:02

Web前端性能优化的三个偏方的相关文章

Web前端性能优化的9大问题

1.请减少HTTP请求基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时,将

Web 前端性能优化【转】

Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端优化最佳实践之 内容篇Web 前端优化最佳实践之 Server 篇Web 前端优化最佳实践之 Cookie 篇Web 前端优化最佳实践之 CSS 篇Web 前端优化最佳实践之 JavaScript 篇Web 前端优化最佳实践之 图象篇Web 前端优化最佳实践之 Mobile(iPhone) 篇 Yahoo! 的 Exceptional Performance team 在 Web 前端方面作

WEB前端性能优化小结

1. 请减少HTTP请求 基本原理: 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. 而当我们请求的网页文件中有很多图片.CSS.JS甚至音乐等信息时

Web前端性能优化全攻略[转载]

1. 尽量减少  ">HTTP 请求 (Make Fewer  ">HTTP Requests) 作为第一条,可能也是最重要的一条.根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益.有几种常见的方法能切实减少  ">HTTP 请求: 1) 合并文件,比如把多个  ">CSS 文件合成一个: 2)  ">CSS Sprites 利用  ">CSS background 相关元

Web前端性能优化全攻略

网页制作poluoluo文章简介:Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Web 前端性能优化是个大话题,是个值得运维人员持续跟踪的话题,是被很多网站无情忽视的技术. Yahoo! 的 Exceptional Performance team 在 Web 前端方面作出了卓越的贡献.广为人知的优化规则也由 13 条到 14 条,再到 20 条,乃至现在的 34 条--真是与时俱进啊.最新的 34 条也针对不同的角度做了分类. 面向内容的优化规则

阿里巴巴 web前端性能优化进阶路

Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化黄金法则,以及大名鼎鼎的优化大师Steve Souders.本文并非一篇讨论性能优化技术方法的文章,而更多的是对中文站搜索List页面持续两年多的前端性能优化实践的思路总结.希望对正在从事这个领域研究的前端同学能有所帮助. 简单的说,我们的性能优化实践分为三个阶段:初探期.立规期.创新期, 每个阶段

WEB前端性能优化常见方法

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程. 常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页

web前端性能优化——干货

web前端性能优化 2017-05-23 服务器--分析工具:YSlow 1.多台服务器--服务器集群(应用服务器): 2.负载均衡 服务器:接受请求,分配服务器: 3.数据库(读:写=7:3),主服务器(读)<---->缓存服务器<---->从服务器(写)分离. 注:可以参考:李智慧的<大型网站架构演化发展历程> 网页前端--可以参考<高性能网站建设(进阶)指南> 1.减少HTTP请求,图片地图,合并脚本和样式表 2.使用内容发布网络--CDN.CDN:C

Web 前端性能优化相关内容解析

Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对照着去优化自己的网站或者相关项目.本文由Jeff 整理. 0.提高服务器的响应速度 砸钱的东西,但却最根本:搞好这一项,甚比下面任何一项. 1.优化样式表和脚本的排列顺序 正确地排列外部样式表与外部和内嵌脚本的顺序,可增加下载时同时加载的数据量,并提高浏览器显示网页的速度. 将样式表放在顶部,将脚本放在底部