zoukankan      html  css  js  c++  java
  • 提高 DHTML 页面性能

    联盟电脑摘要:本文说明了某些DHTML功能对性能的重大影响,并提供了一些提高DHTML页面性能的技巧。

    目录

    简介
    成批处理DHTML更改
    使用innerText
    使用DOM添加单个元素
    扩展SELECT元素中的选项
    用DOM更新表
    编写一次,使用多次
    请勿过多使用动态属性
    数据绑定很有效
    不要在document对象中设置expando属性
    避免切换类和样式规则
    查找父项之前,先折叠文本范围
    其他资料

    简介
    动 态HTML(DHTML)在MicrosoftInternetExplorer4.0中的引入,使Web作者和开发人员可以使用新的编程模型。此 后,Web作者充分利用了这个强大的特性来提供动态内容、样式和定位,使Web用户得以体验丰富的交互式功能。DHTML的灵活性使得通常会有多种方式可 以实现您的构思。理解InternetExplorer的HTML分析和显示组件如何处理请求,可帮助您确定完成工作的最佳方法。本文介绍了某些 DHTML功能对性能的重大影响,并提供了一些提高页面性能的技巧。

    成批处理DHTML更改
    在DHTMLWeb页面上,提高 性能的最有效方法是改进对页面上HTML内容的更改。有多种方法可以更新Web页面,了解这一点非常重要。从客户的反馈来看,Web作者可以应用HTML 文本块,也可以通过使用DHTML对象模型(英文)或W3C文档对象模型(DOM)(英文)来访问个别HTML元素。无论何时更改HTML内 容,InternetExplorer的HTML分析和显示组件都必须重新组织该页面的内部表现形式,重新计算文档布局和文档流,并显示这些变化。虽然实 际性能由Web页面的内容和您所作的更改决定,但是这些操作代价都比较大。如果您应用HTML文本块,而不是个别访问元素,则必须调用HTML分析器,这 将导致额外的性能开销。接受HTML文本的方法和属性包括insertAdjacentHTML(英文)和pasteHTML(英文)方法,以及 innerHTML(英文)和outerHTML(英文)属性。

    技巧1:在一个脚本函数中对HTML内容进行更改。如果您的设计使用了多个事件处理程序(例如响应鼠标移动),则应集中进行更改。


    HTML 分析和显示组件的另一项重要事实是:一旦脚本返回控制(例如,当脚本事件处理函数退出时,或者当调用setTimeout(英文)等方法时),该组件将重 新计算布局并显示Web页面。现在,您已经了解InternetExplorer如何处理变化,下面将开始提高Web页面的性能。

    技巧2:建立一个HTML字符串并对文档进行一次更改,而不是进行多次更新。如果HTML内容不是必要的,可考虑使用innerText(英文)属性。


    在以下示例中,速度较慢的方法每次设置innerHTML属性时都调用HTML分析器。要提高性能,可以先建立一个字符串,然后将其分配给innerHTML属性。

    请显示

    慢:

    divUpdate.innerHTML="";
    for(vari=0;i100;i++)
    {
    divUpdate.innerHTML+="SPAN这是一个较慢的方法!/SPAN";
    }

    快:

    varstr="";
    for(vari=0;i100;i++)
    {
    str+="SPAN因为使用字符串,此方法较快!/SPAN";
    }
    divUpdate.innerHTML=str;

    有关详细信息,请参见动态内容(英文)。

    使用innerText
    DHTML对象模型通过innerText(英文)属性访问HTML元素的文本内容,而W3CDOM则提供一个独立的子文本节点。直接通过innerText属性更新元素的内容,比调用DOMcreateTextNode(英文)方法更快。

    技巧3:使用innerText属性更新文本内容。


    以下示例显示了如何使用innerText属性提高性能。

    请显示

    慢:

    varnode;
    for(vari=0;i100;i++)
    {
    node=document.createElement("SPAN");
    node.appendChild(document.createTextNode("使用createTextNode()"));
    divUpdate.appendChild(node);
    }

    快:

    varnode;
    for(vari=0;i100;i++)
    {
    node=document.createElement("SPAN");
    node.innerText="使用innerText属性";
    divUpdate.appendChild(node);
    }

    使用DOM添加单个元素
    如前所述,应用HTML文本的访问方法将导致调用HTML分析器,从而会降低性能。因此,使用createElement(英文)和insertAdjacentElement(英文)方法添加元素比调用一次insertAdjacentHTML方法快。

    技巧4:调用createElement和insertAdjacentElement方法比调用insertAdjacentHTML方法快。


    成批处理DHTML更新并调用一次insertAdjacentHTML方法可以提高性能,但是有时直接通过DOM创建元素效率更高。在下面的方案中,您可以尝试一下这两种方法并确定哪一种更快。

    请显示

    慢:

    for(vari=0;i100;i++)
    {
    divUpdate.insertAdjacentHTML("beforeEnd","SPAN使用insertAdjacentHTML()/SPAN");
    }

    快:

    varnode;
    for(vari=0;i100;i++)
    {
    node=document.createElement("SPAN");
    node.innerText="使用insertAdjacentElement()";
    divUpdate.insertAdjacentElement("beforeEnd",node);
    }

    扩展SELECT元素中的选项
    对于上一条使用HTML文本方法的规则来说,将大量OPTION(英文)元素添加到SELECT(英文)中的情况是一种例外。这时候,使用innerHTML属性比调用createElement方法访问选项集合效率更高。

    技巧5:使用innerHTML将大量选项添加到SELECT元素中。


    使 用字符串连接操作来建立SELECT元素的HTML文本,然后使用此技巧设置innerHTML属性。对于数量特别大的选项,字符串连接操作也会影响性 能。在此情况下,请建立一个数组并调用MicrosoftJScriptjoin(英文)方法来执行OPTION元素HTML文本的最终连接。

    请显示

    慢:

    varopt;
    divUpdate.innerHTML="SELECTID='selUpdate'/SELECT";
    for(vari=0;i1000;i++)
    {
    opt=document.createElement("OPTION");
    selUpdate.options.add(opt);
    opt.innerText="第"+i+"项";
    }

    快:

    varstr="SELECTID='selUpdate'";
    for(vari=0;i1000;i++)
    {
    str+="OPTION第"+i+"项/OPTION";
    }
    str+="/SELECT";
    divUpdate.innerHTML=str;

    更快:

    vararr=newArray(1000);
    for(vari=0;i1000;i++)
    {
    arr="OPTION第"+i+"项/OPTION";
    }
    divUpdate.innerHTML="SELECTID='selUpdate'"+arr.join()+"/SELECT";

    用DOM更新表
    使用DOM方法插入表的行和单元格比使用insertRow(英文)和insertCell(英文)方法(DHTMLtable对象模型的一部分)效率更高。尤其在创建大的表时,效率上的差别更加明显。

    技巧6:使用DOM方法建立大表。


    请显示

    慢:

    varrow;
    varcell;
    for(vari=0;i100;i++)
    {
    row=tblUpdate.insertRow();
    for(varj=0;j10;j++)
    {
    cell=row.insertCell();
    cell.innerText="第"+i+"行,第"+j+"单元格";
    }
    }

    快:

    varrow;
    varcell;
    vartbody=tblUpdate.childNodes[0];
    tblUpdate.appendChild(tbody);
    for(vari=0;i100;i++)
    {
    row=document.createElement("TR");
    tbody.appendChild(row);
    for(varj=0;j10;j++)
    {
    cell=document.createElement("TD");
    row.appendChild(cell);
    cell.innerText="第"+i+"行,第"+j+"单元格";
    }
    }

    编写一次,使用多次
    如 果您的Web站点使用脚本来执行一些常用操作,可以考虑将这些功能放到独立的文件中,以便可以由多个Web页面重复使用。这样做,不仅可以改善代码的维护 性,而且使该脚本文件保留在浏览器的缓存中,从而只需要在用户访问站点时向本地下载一次。将常用的样式规则放在独立的文件中也可以得到同样的好处。

    技巧7:通过将常用代码放到行为或独立文件中来重用脚本。


    要 更好地利用脚本重用功能,请将常用的脚本操作放到DHTML附加代码或元素行为(英文)中。行为提供了一个有效的方法,用于重用脚本和建立从HTML访问 的组件,并使您可用自己的对象、方法、属性和事件来扩展DHTML对象模型。对于未使用viewlink(英文)功能的行为,可以考虑使用 InternetExplorer5.5中的lightweight(英文)行为特性进行更有效的代码封装。另外,如果您的脚本代码在一个 SCRIPT(英文)块中,会获得更高的性能。

    请勿过多使用动态属性
    动态属性(英文)为Web作者提供了一种将表达式用作属 性值的方法。表达式在运行时计算,其结果值将应用于属性。这是一个强大的特性。此特性可用于减少页面上的脚本数量,但是因为必须定时重算表达式,而且该表 达式经常与其他属性值相关,所以它会对性能带来消极的影响。这种情况对定位属性尤其明显。

    技巧8:限制使用动态属性。


    数据绑定很有效
    数 据绑定(英文)是一个强大的功能,它使您可以将数据库查询的结果或XML数据岛(英文)的内容,绑定至Web页面上的HTML元素。您无需返回服务器提取 数据,就可以提供数据排序和过滤功能,以及不同的数据视图。设想一个Web页面可以将公司的数据显示为折线图、条形图或饼图,还具有将数据按办公室、产品 或销售阶段排序的按钮,而且所有这些功能只需要访问一次服务器就能实现。

    技巧9:使用数据绑定来提供丰富的客户端数据视图。


    有关数据绑定的详细信息,请参见以下文章:

    数据绑定概述(英文)

    绑定页面数据(英文)

    倾斜的、平均的和事实上的数据绑定(英文)
    不要在document对象中设置expando属性
    expando(英 文)属性可以添加至任何对象。此属性非常有用,它可以存储当前Wed页面内的信息,并提供了另一种扩展DHTML对象模型的方法。例如,您可以给 DHTML元素指定一个clicked属性,用此属性提示用户已经单击了哪一个元素。在引发事件时,也可以使用expando属性,向事件处理函数提供更 多的上下文信息。无论您如何使用expando属性,切记不要在document(英文)对象上设置它们。如果您这样做,则当您访问该属性时,文档必须执 行额外的重算操作。

    技巧10:在window(英文)对象上设置expando属性。


    请显示

    慢:

    for(vari=0;i1000;i++)
    {
    vartmp;
    window.document.myProperty="第"+i+"项";
    tmp=window.document.myProperty;
    }

    快:

    for(vari=0;i1000;i++)
    {
    vartmp;
    window.myProperty="第"+i+"项";
    tmp=window.myProperty;
    }

    避免切换类和样式规则
    切 换类和样式规则是一种代价非常高的操作,需要重新计算并调整整个文档的布局。如果您的Web站点使用样式表来提供内容的备用视图,可以考虑直接修改要更改 的元素的style(英文)对象,而不是修改元素的className(英文)属性或与类关联的styleSheet(英文)对象。

    技巧11:在更改内容的外观时,直接修改style对象。


    查找父项之前,先折叠文本范围
    TextRange(英 文)对象表示用户选定或从HTML元素中检索的一个文本区域,例如BODY(英文)。通过调用parentElement(英文)方法,可以标识文本范围 的父项。对于复杂的文本范围,在调用parentElement方法之前,先调用collapse(英文)方法效率会更高。

    技巧12:在访问parentElement方法之前,先折叠文本范围。

  • 相关阅读:
    ICONS-图标库
    图形资源
    vue项目中,如果修改了组件名称,vscode编辑器会在引入修改组件的名字处提示红色波浪线 The file is in the program because:Imported via xxx Root file specified for compilation .
    接口在dev环境报跨域问题(has been blocked by CORS policy:Response to preflight request doesn't pass access control check:No 'Access-Control-Allow-Origin' header ispresent on the requested resource.),qa环境正常
    阿里云occ的图片文件URL用浏览器直接打开无法访问,提示This XML file does noe appear to have any style information associated with it. The document tree is shown below.
    vue 项目使用element ui 中tree组件 check-strictly 用法(父子不互相关联的反显情况)
    高德地图进行线路规划绘制标记点操作(vue)
    vue中实现拖拽调整顺序功能
    2021-01-22 浏览器相关知识
    2021-01-22 js 相关知识点
  • 原文地址:https://www.cnblogs.com/gyjWEB/p/4535644.html
Copyright © 2011-2022 走看看