js性能优化--学习笔记

《高性能网站建设进阶指南》:

1.使用局部变量,避免深入作用域查找,局部变量是读写速度最快的;把函数中使用次数超过一次的对象属性和数组存储为局部变量是一个好方法;比如for循环中的.length通常可以保存为局部变量。

2,多个if时,if顺序按概率降序排列

3,当仅判断一两个条件时,if通常比switch更快,当有两个以上条件且条件比较简单(不是范围判定)时,switch通常更快;因为多数情况下,switch语句中执行单个条件的时间比if短;

4,循环中把循环变量递减到0,而不是递增到长度,把条件改成了与0比较,速度更快,如for(var i=arr.length;i--){};

5,避免for in;for in是用来遍历对象的可枚举属性,需要遍历整个原型链来查找可枚举属性,若

Array.prototype.myf=function(){};//(数据属性默认都是可枚举的)
var a=['a','b'];for(var p in a){console.log(p+','+a[p]);}

输出将是:

0,a
1,b
myf,function (){}

对于object同样如此,所以一般需要用hasOwnProperty来确保只变例对象实例自身的属性。

若已知对象的属性,则采用普通的for循环性能优于for in;如var arr=['p1','p2','p3'];for(){process(obj[arr[i]]);}

6,性能优化:拆分js,减少初次render的下载量,注意会出现用户点击时,事件绑定还没完成的情况。js延迟下载;

7,css选择符;匹配顺序是从右到左的;避免通配符,用classname代替标签名,利用属性继承。。。。。。

 

《高性能javascript》:

 V8 引擎由以下几个核心部分组成:

  • 基本编译器(base compiler),在你的代码运行之前,它会分析你的 JavaScript 代码并生成本地机器码,而不是执行字节码或简单地解释它。这种机器码起初是没有被高度优化的。
  • V8 将对象解析为对象模型(object model)。对象是在 JavaScript 中是以关联数组的方式呈现的,但是在 V8 引擎中,它们是通过隐藏类(hidden classes)的方式来表示的。这是一种可以优化查找的内部类型机制。
  • 一个运行时分析器(runtime profiler),它监视正在运行的系统,并标识 “hot” 函数,也就是那些最后会花费大量运行时间的代码。
  • 一个优化编译器(optimizing compiler),它重新编译和优化那些被运行时分析器标识为 “hot” 的代码,并进行 “内联” 等优化(例如,在函数被调用的地方用函数主体去取代)。
  • V8支持逆优化(deoptimization),这意味着,如果优化编译器发现在某些假定的情况下,把一些已经优化的代码进行了过度的优化,它会舍弃优化后的代码。
  • 垃圾回收器,理解它的运作原理和理解如何优化你的JavaScript代码同等重要。

垃圾回收是内存管理的一种机制,垃圾回收器的概念是,它将试图回收那些不再被使用的对象所占据的内存,在像 JavaScript 这种支持垃圾回收的语言中,如果程序中仍然存在指向一个对象的引用,那么该对象将不会被回收。

在大多数情况下,我们没有必要去手动得解除对象的引用(de-referencing)。只需要简单滴将变量放在需要它们的位置(在理想的情况下,尽可能使用局部变量,也就是说,在它们被使用的函数中声明它们,而不是在更外层的作用域),垃圾就能正确地被回收。

在 JavaScript 中,强制进行垃圾回收是不可能的,而且你也不应该尝试这样做,因为垃圾回收是由运行时控制,并且它通常知道垃圾回收的最佳时机。在可能的情况下,尽量避免使用 delete

尽管如此,你肯定会发在许多流行的 JavaScript 库中使用了 delete - 这有它语言目的。这里的主旨是,避免在运行时修改 “hot” 对象的结构,JavaScript 引擎可以检测到这些 “hot” 的对象,并尝试对其进行优化。如果在对象的生命期中没有遇到重大的结构改变,引擎的检测和优化过程会来得更加容易,而使用 delete 则会触发对象结构上的这种改变。

不少人对 null 的使用上也存在误解。将一个对象引用设置为 null,并不是意味着“清空”该对象,只是将它的引用指向 null。使用 o.x = null 比使用 delete 会更好些,但这甚至可能也是不必要的。

如果此引用是当前对象的最后引用,那么该对象就满足了垃圾回收的资格。如果此引用不是当前对象的最后引用,则该对象是可访问的,而不会被垃圾回收。

另外需要注意的是,全局变量在页面的生命周期中是不会被垃圾回收器清理的。只要页面保持打开状态,全局对象就会常驻在内存当中。只有当刷新页面、导航到其他页面、关闭标签页或退出浏览器时,全局变量才会被清理。函数作用域的变量超出作用域范围时,它就会被清理。当函数完全结束,并且再没有任何引用指向其中的变量,函数中的变量会被清理。

经验法则:

为了使垃圾回收器尽早回收尽可能多的对象,请不要保留(hold on)不再需要的对象。(qi:比如在函数里return一个不需要的变量,因为这会导致变量不会被回收)这里有几点需要谨记:

  • 就像之前所说的那样,比手动删除变量引用更好的方式是,在恰当的作用域中使用变量,例如,尽量在函数作用域中声明变量,而尽可能不要声明不会被回收的全局变量,这将意味着更干净更省心的代码。
  • 确保解绑那些不再需要的事件监听器,尤其是那些即将被移除的 DOM 对象所绑定的事件。
  • 如果你正在使用数据缓存,确保手动清理缓存或者使用衰老机制,避免缓存中储存大量不会被重用的数据。

数组字面量非常有用,它可以暗示数组的大小和类型。它通常用在体积不大的数组中。

 
// V8 知道你需要一个长度为 4 并且储存数字的数组:
var a = [1, 2, 3, 4];

// 不要这样做:
a = []; // V8 将对数组一无所知
for(var i = 1; i <= 4; i++) {
a.push(i);
}

qi:闭包也会导致变量不会被回收,事件委托:$('table').on('click', td, ...)优于$('table td').on('click', ...)

当浏览器重新渲染文档中的元素时需要重新计算它们的位置和几何形状时,我们称之为回流。回流会阻塞用户在浏览器中的操作,因此理解提升回流时间是非常有帮助的。使用document.createDocumentFragment()创建了一虚拟的节点对象(节点对象包含所有属性和方法),保存多个小节点后在append;在所有节点类型中,只有文档片段DocumentFragment在文档中没有对应的标记。DOM规定文档片段(documentfragment)是一种”轻量级“的文档,可以包含和控制节点,但不会像完整的文档那样占用额外资源。即当请求把一个 DocumentFragment 节点插入文档树时,插入的不是 DocumentFragment 自身,而是它的所有子孙节点。这使得 DocumentFragment 成了有用的占位符,暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作,尤其是与 Range 接口一起使用时更是如此.

qi: css性能:尽量repaint而不是reflow.

显式设置图片的宽高:

当浏览器加载页面的HTML代码时,有时候需要在图片下载完成前就对页面布局进行定位。如果HTML里的图片没有指定尺寸(宽和高),或者代码描述的尺寸与实际图片的尺寸不符时,浏览器则要在图片下载完成后再“回溯”该图片并重新显示,这会消耗额外时间。所以,最好为页面里的每一张图片都指定尺寸,不管是在页面HTML里的<img>标签,还是在CSS里。

浏览器解析页面顺序:参考http://www.alloyteam.com/2015/05/wang-ye-xing-neng-zhi-html-css-javascript/;

qi:浏览器得到某个页面后,按顺序开始解析,遇到css file和image,发相应的请求,同时继续往下,到结束就构建好了无样式的dom tree,css file下载后解析得到CSSOM,结合dom tree开始渲染得到render tree,至此在chrome developer tool里就是domComplete完成的时间(蓝色竖线),等image下载好插入render tree,至此在chrome developer tool里就是domLoader完成的时间(红色竖线).因为js有可能改变dom tree结构,所以如果遇到js file会暂时停止其他渲染行为,等js解析完成后再渲染。 使用async标识的javascript,浏览器将异步执行javascript不会阻塞正常的dom渲染。

转载于:https://www.cnblogs.com/yigeqi/p/4598771.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/255334.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

struct和typedef struct在C与C++中用法

struct和typedef struct 分三块来讲述&#xff1a;   1 首先&#xff1a;//注意在C和C里不同     在C中定义一个结构体类型要用typedef:     typedef struct Student    {    int a;    }Stu;     于是在声明变量的时候就可&#xff1a;Stu stu1;(如…

【数据库学习】——Python实现mysql数据库SQL文件生成和导入

目录 1、将mysql数据导出到SQL文件中&#xff08;数据库存在的情况&#xff09; 2、将现有的sql文件数据导入到数据库中&#xff08;前提数据库存在&#xff09; 3、利用Navicat导出SQL文件和导入SQL文件 1&#xff09;从数据库导出SQL文件 2&#xff09;导入SQL文件到数据…

lfcp——PB使用

场景&#xff1a;记录以备忘。 1 直接说明 pb连接说明&#xff1a;目前项目共有性能、功能、业务、联调四个环境。所以pb可以连接四个不同的数据库。1.copy一份pb程序&#xff0c;修改main.ini文件中的DBCONNECT/DBCONNECT2位new&#xff0c;DBNAME/DBNAME2为oracle数据源中的源…

【重磅】Google官方推出了免费的、中文的、机器学习初级课程。

2019独角兽企业重金招聘Python工程师标准>>> 机器学习(Machine Learning, ML)是一门多领域交叉学科&#xff0c;涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。它是人工智能的核心&#xff0c;是使计算机具有智能的根本途径&#xff0c;其应用遍及…

市面上常见arduino版本比较

http://arduino.cc/en/Main/Products 详细链接 如果是入门&#xff0c;那么首选UNO R3&#xff0c;方便又省心 如果不是特殊要求&#xff0c;不建议购买2560&#xff0c;因为贵啊 nano是块很好的控制器&#xff0c;买不买随你咯 非特殊场合使用不建…

leetcode-114. Flatten Binary Tree to Linked List

Given a binary tree, flatten it to a linked list in-place. For example,Given 1/ \2 5/ \ \3 4 6The flattened tree should look like: 1\2\3\4\5\6思路&#xff1a;递归处理&#xff0c;引用二叉链表的思想&#xff0c;使用pre记录上一个分支的指针。Accepted Co…

HALCON示例程序autobahn高速公路车道识别程序剖析

HALCON示例程序autobahn高速公路车道识别程序剖析 小哥哥小姐姐觉得有用点个赞呗&#xff01; 示例程序源码&#xff08;加注释&#xff09; *关闭halcon窗口的实时更新 dev_update_window (‘off’) *关闭halcon图形窗口 dev_close_window () *打开图形窗口 *dev_open_win…

CSS中的未定义行为,浏览器的差异(一)

今天看了张鑫旭大佬的新书的有感吧&#xff0c;记录一下。 Web标准未对一些场景做出明确规范&#xff0c;所以各大浏览器厂家只能根据自己的理解和喜好去实现&#xff0c;表现差异不是浏览器的bug&#xff0c;用计算机领域的术语描述为"未定义行为"。 比如一个例子&a…

KVC 和 KVO

作者 冲破茧缚 2015.08.28 16:12* 写了3967字&#xff0c;被8人关注&#xff0c;获得了14个喜欢KVC 和 KVO 字数363 阅读32 评论0 喜欢0KVC (Key Value Coding)&#xff0c;键值编码&#xff0c;通过键值&#xff08;字符串&#xff09;来访问属性的机制&#xff0c;来间接修改…

Atmel megaAVR控制器 串行引导Bootloader

开始研究下Bootloader的代码结构 2015.1.9 粗略看了下&#xff0c;Bootloader主要做了下板卡的初始化 -----> 然后进入for( ; ; )死循环 -----> 循环刷新串口数据 -----> 根据数据做出不同应答 -----> 如果有写数据&#xff0c;则将数据存入buffer …

MapReduce入门2-流量监控

3、流量监控汇总&#xff08;使用LongWritable实现&#xff09; hdfs文件路径&#xff1a;/tmp/flow.txt 查看文件内容&#xff1a; 13770759991 50 100 25 400 13770759991 800 600 500 100 13770759992 400 300 250 1400 13770759992 800 1200 600 900字符串含义&#xff1a;…

【fiddler学习问题记录】——手机端证书下载页打不开、无法将此证书安装(已解决)

目录 1、手机端下载页打不开 解决方法1&#xff09;电脑端——将网络设置成公用&#xff08;亲测有效&#xff09; 解决方法2&#xff09;手机端将fiddler设置为信任应用&#xff0c;不被拦截 &#xff08;未试&#xff09; 2、无法将此证书安装 方法一&#xff1a;修改证书…

HALCON示例程序ball电路板焊点识别、检测、测量程序剖析

HALCON示例程序ball电路板焊点识别、检测、测量程序剖析 示例程序源码&#xff08;加注释&#xff09; 介绍&#xff1a; ball.hdev: Inspection of Ball Bonding *halcon窗口实时更新关闭 dev_update_window (‘off’) *halcon关闭所有窗口 dev_close_window () *halcon打开…

舵机的原理和控制

控制信号由接收机的通道进入信号调制芯片&#xff0c;获得直流偏置电压。它内部有一个基准电路&#xff0c;产生周期为20ms&#xff0c;宽度为1.5ms的基准信号&#xff0c;将获得的直流偏置电压与电位器的电压比较&#xff0c;获得电压差输出。最后&#xff0c;电压差的正负输出…

HDFS清理坏块

报错 Failed with exception java.io.IOException:org.apache.hadoop.hdfs.BlockMissingException: Could not obtain block: BP-1921057509-192.168.57.129-1517160177567:blk_1073741930_1106 file/user/hive/warehouse/db_hive.db/student/student.txt Time taken: 0.104 se…

如何在PowerDesigner将PDM导出生成WORD文档或者html文件

a) 使用PowerDesigner打开pdm文件 b) 点击Report Temlates 制作模板 点击PowerDesigner菜单栏“Report” -> “Report Templates” c) 选择模板数据项 完成步骤a&#xff09;&#xff0c;得到如下界面&#xff0c;左右2个区&#xff0c;Aavailable区…

【软件测试】——基础篇(软件测试技术体系、过程管理)

目录 软件测试技术体系 软件测试过程管理​编辑 接口测试用例设计 手机端测试流程​编辑 软件测试技术体系 软件测试过程管理 接口测试用例设计 手机端测试流程

vue 的常用模块安指令(持续记录)

# 全局安装 vue-cli $ cnpm install --global vue-cli# 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 路由管理模块 $ npm install vue-router --save # 状态管理模块 $ npm install vuex --save # 网络请求模块 $ npm install vue-resource --save # 停…

HALCON基于形状匹配详解

HALCON基于形状的模板匹配详细说明 很早就想总结一下前段时间学习HALCON的心得&#xff0c;但由于其他的事情总是抽不出时间。去年有过一段时间的集中学习&#xff0c;做了许多的练习和实验&#xff0c;并对基于HDevelop的形状匹配算法的参数优化进行了研究&#xff0c;写了一…

俄罗斯:自由软件在这里生根

2008年6月15日&#xff0c;我在“俄罗斯&#xff1a;自由软件在这里起飞“一文中介绍了自由软件在俄罗斯的发展情况。现在&#xff0c;许多年过去了&#xff0c;实际情况如何呢&#xff1f; 回顾以往&#xff0c;俄罗斯境内自由软件的精英们&#xff0c;在2001年组建了ALTLinux…