前端性能优化及技巧


Posted in Javascript onMay 06, 2016

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

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

    性能优化

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

    1.精灵图

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

    2.css选择器优化

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

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

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

    4.js直接操作dom节点

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

    可能有人不理解重绘与回流的概念

    5.正则匹配选择器

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

    6.js获取元素优化

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

    7.内存溢出

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

    8.对Ajax用GET请求

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

    9.延迟加载图片

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

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

jquery.lazyload.js

   10.避免图片src属性为空

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

    <img src=””>

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

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

    技巧
        1.排他思想

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

        2.短路运算(||)

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

a=a||b;

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

        3.运算(&&)

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

a && a.length&& a.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;

        补充:

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

Javascript 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
Javascript调用C#代码
Jan 17 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
常用DOM整理
Jun 16 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
jquery自定义插件开发之window的实现过程
May 06 #Javascript
快速使用Bootstrap搭建传送带
May 06 #Javascript
BootStrap响应式导航条实例介绍
May 06 #Javascript
jQuery侧边栏实现代码
May 06 #Javascript
BootStrap制作导航条实例代码
May 06 #Javascript
jQuery实现下拉框功能实例代码
May 06 #Javascript
jQuery 实现评论等级好评差评特效
May 06 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
yii添删改查实例
2015/11/16 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
常用的几段javascript代码分享
2014/03/25 Javascript
JsRender实用入门教程
2014/10/31 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
jQuery实现简单的Ajax调用功能示例
2019/02/15 jQuery
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
python使用os.listdir和os.walk获得文件的路径的方法
2017/12/16 Python
Python SqlAlchemy动态添加数据表字段实例解析
2018/02/07 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python对象属性自动更新操作示例
2018/06/15 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
python如何更新包
2020/06/11 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
护士心得体会范文
2016/01/25 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏