前端性能优化及技巧


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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
JavaScript作用域示例详解
Jul 07 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
详解Node.js读写中文内容文件操作
Oct 10 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 Javascript
JavaScript继承的三种方法实例
May 12 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
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
javascript常用方法总结
2015/05/14 Javascript
javascript 闭包详解
2015/07/02 Javascript
nodejs调取微信收货地址的方法
2017/12/20 NodeJs
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
js动态引入的四种方法
2018/05/05 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
Python实现包含min函数的栈
2016/04/29 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
python修改txt文件中的某一项方法
2018/12/29 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
如何基于python操作json文件获取内容
2019/12/24 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
UML设计模式笔试题
2014/06/07 面试题
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
物业总经理岗位职责
2014/02/28 职场文书
村庄环境整治方案
2014/05/15 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
微信搭讪开场白
2015/05/28 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
python playwright之元素定位示例详解
2022/07/23 Python