记一复杂页面的前端优化(1) - 不一样的延迟加载

简介:

 刚刚做完1个复杂页面的前端性能优化,这里的优化是针对这个页面具体的需求单独做的优化,所以这里不会谈那些减少http请求,合并压缩js,css,图片合并等等。因为这些是所有页面都需要做的,如果需要了解这些,可以参考我这篇文章:web高性能开发系列随笔

 

页面介绍:

  该页面是1个记账类的页面,页面如下:

2010071317292919.jpg

 

  页面主要有4部分组成:

1. 上部的输入部分(有5大不同的类型,每个类型都是1个单独的tab,对应内容也不一样)   

2. 左边的分类列表(默认显示一级分类,点击展开子类)

3. 右边时间选择区(按月,年,季,自定义时间过滤等等)

4. 右边下半部分的数据列表(默认只显示每条数据基本信息,点击展开详细信息) 

 

  可能看到这里大家不觉的这个页面会很大,那就再细说下,该页面包含记账的所有的功能(添加、删除,修改,分拆,上传图片,显示数据,数据排序),而且每种下拉列表前面都有个"加号"(见输入部分的下列列表),点击"加号"都会弹出类似如下的窗口进行添加(总共有8个左右的弹出窗口),所有的这些都是通过js来实现(js代码总共写了大概2000行,不含注释):

  2010071317361234.jpg

 

 

问题

  该页面有一些用户反映比较慢,经过测试也发现,因为页面比较复杂,js也比较多,所以在IE下速度会比较慢(特别是IE6),而chrome和firefox速度还是可以的,所以这次的优化主要针对IE,当然优化后的其他浏览器肯定也会受益。

 

优化1:弹出窗口的延迟加载

  本来第1个优化不应该写这个,因为这个优化效果并不是最明显的。把它放在第一位,是因为个人觉得这种延迟加载的想法还不错,比较有新意(目前还没见过网上有人介绍过这种延迟加载)。

 

  入正题,上面说到,该页面总共有8个弹出窗口,而且每个弹出窗口的都使用了不同的图片(不少是png),监控发现这些弹出窗口用的png图片虽然设置了缓存头(也使用了document.execCommand("BackgroundImageCache", false, true);),但是在IE6下每次都不直接使用缓存,而是发生1个请求,并得到304状态回应(原因我估计跟使用DD_belatedPNG来处理png图片有关,因为时间关系还没深入研究),监控图如下:

  2010071317382689.jpg

  从图中可以看出这几个图片很影响加载速度,其实一开始我们根本用不上这些弹出窗口的图片,因为默认都是隐藏的,而且这些弹出窗口,一般用户都用的比较少。理所当然,我们想到了延迟加载。

 

  想到延迟加载,第一想到就是先不加载弹出窗口的html代码,这样就不会加载对应的图片了,当用户点击弹出按钮的时候,再去后台加载对应的html代码。但这样就有个问题,当用户点击"加号"按钮,用ajax去加载html代码,用户明显就会感觉到半天窗口还没弹出来,就会连续的点击,这种用户体验肯定是失败的。

 

  我们想要的延迟加载是先加载html代码,但不加载html代码使用的图片。但用户点击"加号"的时候,直接弹出窗口并加载图片,这样用户一点击就可以看到窗口。那如何实现这种功能了,于是我想到了html的注释。我们先把所有弹出窗口的html代码放进注释中(这样就不会加载图片),当用户点击"加号"时,用js读取注释中的html插入到body中(不需要ajax),然后弹出窗口。

 

  比如有2个弹出窗口,代码大概如下(并不是完整代码,不能直接运行):

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
< script >
     var loaded = new Object();  // 记录哪些html已经append到body中
    /**
     * 加载html,该html已经以注释的方式嵌入的html中,eg:
     * < div  id="fast_model_lazy">
     <!--[lazy]>
     *  sass
     *  <![endlazy]-->
     * </ div >
     */
    function loadHtml(id){
        // 已经加载过,不再加载
        if(loaded[id])
            return false;
        
        var html = $.trim(document.getElementById(id).innerHTML);
        // 去掉注释开头(11位)和结尾(14位)
        html = html.substring(11,html.length-14);
        $(document.body).append($(html));
        
        loaded[id]=1;
        return true;
    }
    function click1(){
        loadHtml("fast_model_lazy");
        // 弹出窗口
        $("#fast_model_lazy").showDialog();
    }
    function click2(){
        loadHtml("fast_model2_lazy");
        // 弹出窗口
        $("#fast_model2_lazy").showDialog();
    }
</ script >
< button  click="click1()">弹出第一窗口</ button >
< button  click="click2()">弹出第二窗口</ button >
 
< div  id="fast_model_lazy">
   <!--[lazy]>
   <div id="fast_model" class="model">
        ....这里省略html
   </div>
  <![endlazy]-->
</ div >
 
< div  id="fast_model2_lazy">
   <!--[lazy]>
   <div id="fast_model2" class="model">
        ....这里省略html
   </div>
  <![endlazy]-->
</ div >

 

总结:

 这种延迟加载的方式,主要用于延迟图片的加载,css的应用,js的解析和执行等等,并不是为了延迟加载html。如果是大量的html代码,比如分页的数据,

使用这种方式就不太合适。个人觉的这种加载方式还可以在很多地方用的到的。

 

后语:

 今天就写这些,下次再写写对该页面的其他的一些优化。











本文转自BearRui(AK-47)博客园博客,原文链接:http://www.cnblogs.com/BearsTaR/archive/2010/07/14/Tally_Optimization.html    ,如需转载请自行联系原作者


相关文章
|
1月前
|
前端开发 数据可视化 JavaScript
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
前端vite+vue3——可视化页面性能耗时指标(fmp、fp)
77 6
|
1月前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分,它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法,包括减少HTTP请求、压缩代码、使用CDN等。
|
7天前
|
缓存 前端开发 jenkins
Serverless 应用引擎产品使用合集之前端的项目部署在镜像里时,页面总是自动刷新,是什么导致的
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
1月前
|
前端开发 JavaScript Java
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
Java网络商城项目 SpringBoot+SpringCloud+Vue 网络商城(SSM前后端分离项目)五(前端页面
|
1月前
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
|
1月前
|
存储 前端开发 API
对象存储OSS产品常见问题之获取文件结构并在前端页面展示如何解决
对象存储OSS是基于互联网的数据存储服务模式,让用户可以安全、可靠地存储大量非结构化数据,如图片、音频、视频、文档等任意类型文件,并通过简单的基于HTTP/HTTPS协议的RESTful API接口进行访问和管理。本帖梳理了用户在实际使用中可能遇到的各种常见问题,涵盖了基础操作、性能优化、安全设置、费用管理、数据备份与恢复、跨区域同步、API接口调用等多个方面。
|
1月前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
8月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
59 0
|
1月前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
1月前
|
存储 前端开发 安全
无限连接:前端跨页面通信的实现与应用
在前端开发中,有时我们需要在不同的页面之间进行数据传递和交互。这种场景下,前端跨页面通信就显得尤为重要。前端跨页面通信是指在不同的页面之间传递数据、发送消息以及实现页面间的交互操作。本文将详细介绍前端跨页面通信的属性、应用场景以及实现方法,并提供一些代码示例和引用资料,帮助读者深入了解并应用这一重要的技术。

热门文章

最新文章