文档章节

前端性能优化及技巧

duozuo2006
 duozuo2006
发布于 2016/12/03 17:57
字数 1606
阅读 10
收藏 0
点赞 0
评论 0

为什么要优化性能对于前端工程师如此重要

          在行业内有句话不知道大家有没有听说过,‘懂得性能优化并且研究过jquery源代码的人和不懂得性能优化写出来的代码对于性能的消耗会相差上百倍甚至上千倍’,现在的javascript属于从ECMAscript3到ECMAscript5以及ECMAscript6的一个过渡的过程。在javascript的编写不健全的时候编写代码方法不得当,引起的问题也是不容忽视的。

 

 

    性能优化

    下面将自己对于性能优化的一些见解与大家分享;

    1.精灵图

      最基本的是尽可能的将背景图片做成精灵图,减少图片的请求,所以一般web工程师的另一项基础本能就是精灵图的制作。

    2.css选择器优化

        在css中要尽量的使用子代选择器>,少使用后代选择器,使用后代选择器时,搜素引擎会将所有的后代元素都进行搜索,如果我们使用子代选择器时,可以将搜索的范围缩小,从而减少DOM引擎的性能消耗。

    3.js改变样式直接操作类名

       js操作元素样式时,不要用style去直接添加样式,一般属性少时不会影响多少性能,其实则不然,在每次添加样式时,页面都会重绘一次,重绘是不得不重视的,操作样式时,直接操作类名,只引起一次重绘,用style直接添加样式会引起多次的重绘。

    4.js直接操作dom节点

      当操作节点时尽量将节点添加在元素的后面,如果插入到节点的前面时,会使插入节点之后的节点都引起回流,而插入到后面时只需要被插入的节点回流一次就可以了。

    可能有人不理解重绘与回流的概念,给大家推荐一个网址:

    http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81%E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

    5.正则匹配选择器

       在css3以及jQuery中的属性选择器,这些选择器中有的是用正则进行匹配的尽量不要去使用,当然如果对于性能优化不进行考虑的话,这些方法还是比较好用的,正则匹配选择器会使DOM引擎搜索所有的标签,很大的影响性能

    6.js获取元素优化

      在js中获得元素时,正常是使用document.getElementsById,DOM引擎会从Dom树的最底端,进行搜索,直到搜索到window中的document再进行返回搜索,所以在获得元素时最好是将document.body进行储存,当再次使用时,只需将这个变量取出使用,可以节省DOM引擎的性能

    7.内存溢出

     一般在递归运行时,会产生内存溢出,造成在运行递归时性能大幅度下降,在运行结束后内存会被系统回收,所以在运行递归时需要用对象将值保存,在每次递归运算时检测,如果存在则直接返回,不存在则添加,这样就可以解决递归的很大性能。

    8.对Ajax用GET请求

    POST请求是通过先发送HTTP请求头,再发送数据来实现的,GET而是没有请求头的,但是需要注意:GET大小限制约4K,POST则没有限制;但POST的安全性要比GET的安全性高。

    9.延迟加载图片

        在页面发起请求时,请求量过大,可以使图片进行懒加载,当页面滚到到图片的位置时,再进行加载图片。

        下面给大家推荐一个图片懒加载的插件

jquery.lazyload.js

  插件下载地址:http://download.csdn.net/download/lwpxx/5179738  

   10.避免图片src属性为空

    src 属性是空字符串的图片很常见,主要以两种形式出现:

    <img src=””>

    var img = new Image();img.src = “”;

    这两种形式都会引起相同的问题:浏览器会向服务器发送另一个请求。

 

    技巧

        1.排他思想

    先排除当前所有的,再进行下一次操作;一般在进行动画、添加样式等时,在二次操作时先清楚前面的样式再从新添加新的样式,避免同时进行动画的冲突。

        2.短路运算(||)

    一般在一个值需要判断是否存在时,尽量不要使用if语句,可以使用短路运算符,可以省去代码占用的内存。比如:

  a=a||b;

a存在则使用a,a不存在则使用b。

        3.运算(&&)

    可以运用在条件匹配时,以便条件的多余查询,比如判断一个对象是否为数组时,

if(typeof arr!=='string'){
     arr && arr.length&& arr.length>=0
}

        4.伪数组以及数组

        当需要封装一个非数组元素变为一个数组时,最简单的办法就是给其添加一个[],如果需要是一个伪数组时,可以给其设置一个length属性。

        5.节流阀

    一般运用在动画中,设定一个值,开始时设置为true,判断其值,在进入动画时给这个值赋值为false,在动画结束时使用回调函数再重新赋值为true。

        6.解除文本的被动选中状态(纯干货)

    当在点击一些按钮时,有时会出现文本被选中的情况,让客户看见就犹如bug一般,以下是解除这一状态的代码,粘贴即可。

    if(document.all){
        document.onselectstart= function(){return false}; //for ie
    }else{
        document.onmousedown= function(){return false};
        document.onmouseup= function(){return true};
    }
    document.onselectstart = new Function('event.returnValue=false');

        7.巧妙使用三元运算符

        当需要判断一个值是否存在,也可以使用三元运算符使代码更加优化。比如

   obj=obj===undefined?Object:obj;

        

        补充:

        上述是自己在工作中,总结的前端优化以及一些技巧与大家分享,如果大家有什么好的优化以及技巧希望可以多多评论,个人认为技术是需要多沟通才可以更好的进步。

        

© 著作权归作者所有

本文转载自:http:/my.oschina.net/zzjweb

共有 人打赏支持
duozuo2006
粉丝 0
博文 13
码字总数 8728
作品 0
北京

暂无文章

Spring Cloud云服务 - HongHu架构common-service 项目构建过程

上一篇我们介绍了《整合spring cloud云服务架构 - HongHu云架构common-service代码结构分析》,本节我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来...

itcloud
7分钟前
0
0
Connection reset

在使用HttpClient调用后台resetful服务时,“Connection reset”是一个比较常见的问题,有同学跟我私信说被这个问题困扰很久了,今天就来分析下,希望能帮到大家。例如我们线上的网关日志就会...

夜黑人模糊灬
11分钟前
0
0
如何写PHP规范注释

所有的文档标记都是在每一行的 * 后面以@开头。如果在一段话的中间出来@的标记,这个标记将会被当做普通内容而被忽略掉。 @access 该标记用于指明关键字的存取权限:private、public或prote...

度_
11分钟前
0
0
influxDB Ppostgis

PostGis 1.需要安装postgreSQL,postgis作为插件嵌入到postgreSQL中; 2.使用zip包直接安装,需要修改 makepostgisdb_using_extensions.bat文件中的路径,用户名,密码,然后直接运行; 3.没有...

courtzjl
15分钟前
0
0
多线程Thread-多线程顺序执行

需求:现在有两个任务,任务1和任务2,任务1中有多个线程,并且任务2必须等任务1完成后才能执行。 namespace TThread{ class Program { static void Main(string[] ar...

kaixinguo314
19分钟前
1
0
直播总结

https://blog.csdn.net/weiyuefei/article/details/70257616 视频: 上传服务,转码服务,视频一致性MD5 视频转码技术及转码实现详解 https://wenku.baidu.com/view/32702108844769eae009eda...

素雷
21分钟前
0
0
Linux系统-tcpdump常用抓包命令

序言 单独总结tcpdump抓包的常用命令 主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络数据 过滤端口: tcpdump -i eth1 dst port...

MrBoyce
22分钟前
0
0
274. H-Index - LeetCode

Question 274. H-Index Solution 题目大意: 论文里的 h 因子判定,题目的意思可能有点晦涩。h 因子是评判学术成就的一种重要方法,h 因子越高越好,h 因子兼顾研究学术人员的学术产出数量与...

yysue
26分钟前
0
0
 Unable to read class [com.mrp.action.BaseAction]

struts2启动时,出现的 Unable to read class [com.mrp.action.BaseAction] java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/finder/DefaultClassFinder$InfoBuildingVisito......

uug
28分钟前
0
0
分发系统介绍&expect脚本远程登录&expect脚本远程执行命令&expect脚本传递参数

20.27 分发系统介绍 应用场景 企业中随之业务的逐渐增大,后端所使用的编程语言是php,系统为LAMP/LNMP架构,需要将代码上传到服务器中;代码会不断的迭代,这就需要在业务服务器上更新代码,...

影夜Linux
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部