zoukankan      html  css  js  c++  java
  • 前端性能优化集【持续更新】

    前端性能优化可以说很广泛了:

    1,减少HTTP请求次数的优化:

      1)使用代理请求,对于用户频繁的请求,客户端先自己缓存进入代理对象,代理来决定是否真正进行HTTP请求,而不是每次都触发请求。

      2)缓存代理,例如分页请求,可以将之前的请求数据缓存再代理对象中,下次请求时候先过缓存代理,有缓存就拿缓存的数据,减少HTTP请求次数。

      3)合并多个JS文件,CSS样式文件等。

      4)直接把图像嵌入网页中,Data URI Scheme,节省HTTP请求,但是浏览器不会缓存,每次更新页面都加载。

    2,事件委托,在Javascript中,添加到页面的事件处理程序数量关系到页面的整体运行性能,每个绑定函数都是对象会占内存,内存对象越多,性能越差。对于“事件处理程序过多”可以使用事件委托进行性能优化:利用事件冒泡,只指定一个事件处理程序管理所有事件。例如:

    click事件的冒泡到document层,可以为整个页面指定一个onclick事件处理程序,而不用为每个可点击的元素分别添加事件处理程序。

    #The bad#
    var
    item1 = document.getElementById("goSomewhere"); var item2 = document.getElementById("doSomething"); var item3 = document.getElementById("sayHi"); EventUtil.addHandler(item1, "click", function(event){ location.href = "http://www.wrox.com"; }); EventUtil.addHandler(item2, "click", function(event){ document.title = "I changed the document's title"; }); EventUtil.addHandler(item3, "click", function(event){ alert("hi"); });
    #The good#

    var list = document.getElementById("myLinks");
    EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch(target.id){
    case "doSomething":
      document.title = "I changed the document's title";
      break;
    case "goSomewhere":
      location.href = "http://www.wrox.com";
      break;
    case "sayHi":
      alert("hi");
      break;
      }
    });

     3,浏览器卸载页面之前移除页面中的所有事件处理程序。针对那些过时不用的“空事件处理程序”,是造成Web内存与性能的一个原因,而在不需要时候及时移除事件程序是提成Web页面性能的一个方案。

     4,页面的性能优化:

      1)因为网页的内存限制会影响分配内存给变量,所以优化内存占比时候,释放不用的数据,及时给不用的变量解除引用,确保浏览器及时回收内存,也是一种性能上面的优化。

      2)Javascript的阻塞特性,当浏览器在执行js代码时候,不能同事做其他事情,所以一般将script标签放在body标签底部,或者在window.onload事件触发后再下载脚本,又,可以加defer/async属性给script标签,两个都表示异步加载。表示加载文档和script的加载并行进行。

      3)针对DOM的操作一般代价比较昂贵,因为DOM和js之间的操作需要中间搭建一个通道,所以针对DOM的操作,如果多次操作一个DOM对象,可用临时变量将DOM对象保存。

    作用域链的优化:

      1)在作用域链中,一个变量的位置越深,读写速度越慢,所以尽可能用局部变量,而不用去查询全局变量。

  • 相关阅读:
    06 is和==的区别 encode()编码 decode()解码
    05 dic的增删改查 字典的嵌套 考试题dic.get()的相关使用
    03 编码 int ,bool,str的常用操作 主要讲str
    01 基本数据类型 变量 if语句
    04 列表的增删改查 常用方法 元祖 range
    02 while循环 格式化输出 运算符
    多校2 Harmonious Army hdu6598 网络流
    P3159 [CQOI2012]交换棋子 网络流
    P2172 [国家集训队]部落战争 最大流
    P2402 奶牛隐藏 网络流
  • 原文地址:https://www.cnblogs.com/tangjiao/p/9945150.html
Copyright © 2011-2022 走看看