美文网首页
高性能JavaScript部分总结

高性能JavaScript部分总结

作者: Gopal | 来源:发表于2017-10-25 14:24 被阅读6次
  • 浏览器在执行JavaScript的代码的时候,不能同时做其他事情。事实上,多数浏览器会使用单一进程来处理用户界面刷新和JavaScript脚本的执行,所以同一时刻只能做一件事情

  • 使用in 操作符的时候,会搜索实例也会搜索原型

  • 对象在原型链中存在的位置越深,找到它也就越慢

  • 局部变量的使用:进行缓存作用

  • 但是在方法中又不能这么做,因为很有可能改变this的指向

  • 数据存储共有4种方法:字面量、变量、数组项、对象成员

  • 变量在作用域链中位置越深,访问所需要的时间就越长。由于全局变量处于作用域链的最末端,所以也就是最慢的

  • withtry...catch...都有可能改变环境作用域链

  • 属性或者方法在原型链中的位置越深,访问它的速度也就越慢

  • JSON是一种使用JavaScript对象和数组直接编写的轻量级而且易于解析的数据格式

  • 使用eval()来解析JSON字符串

  • JSON-P(JSON填充)(JSON with padding)

  • 数据是被当做原生的JavaScript

  • 数据传输和数据格式

  • 有两种方法可以避免发送不必要的请求:
    1.在服务端,设置http头部信息以确保你的响应会被浏览器所缓存
    2.在客户端,将获取到的信息缓存到本地,从而避免再次请求

  • 设置http头部:
    1、必须使用get方法
    2、expires
    3、实现起来是跨页面和跨会话

  • ajax类库有一定的局限性:比如原生的ajax的话,可以通过监听readyState为3的状态,然后执行一些操作。然而大多数JavaScript类库不允许你直接访问readystatechange时间。这意味着你必须等待完整的响应接收完毕(可能是相当长的一段时间)然后才能开始使用它

  • xml支持良好、但是它十分笨重而且解析缓慢

  • JSON的话,轻量级、解析速度快(被视为原生代码而不是字符串),通用性和xml相当

  • 字符串分隔的自定义数据格式十分轻量,在解析大量数据的时候很快,但是需要编写额外的服务端构造程序,并在客户端解析

  • 纯文本和HTML只是适合特定场合使用

  • Multipart XHR可以用来减少发送请求数,并处理一个响应中各种类型文件,但是他不能缓存收到的响应

  • 当你在JavaScript代码中执行另外一段JavaScript代码的时候,都会导致双重求值的性能消耗。
    首先会以正常的方式求值,然后在执行的过程中对包含于字符串中的代码发起另一个求值运算

  • Function() setInterval() setTimeout()

  • 延迟加载(lazy loading)

  • JavaScript的原生部分在你写代码前已经存在于浏览器中了,并且都是用低级语言写的,比如C++

  • 大多数浏览器让一个单线程共用于执行JavaScript和更新用户界面,每个时刻只能执行其中的一种操作。当JavaScript代码执行的时候,用户界面处于“锁定”状态

  • “浏览器UI线程”

“如果JavaScript整整运行了几秒钟,那么很有可能是你做错了什么...”

  • 让出UI线程的控制权,使得UI可以更新,让出控制权意味着停止执行JavaScript代码,使UI线程有机会更新,然后再执行JavaScript——JavaScript定时器

  • 第二个参数表示任务何时被添加到UI队列,而不是一定会在这段代码之后执行;这个任务会等待队列中其他所有任务执行完毕后才会执行

  • 定时器只有在创建它的函数执行完毕之后,才有可能被执行

  • arguments.callee指向当前正在运行中的匿名函数

  • 何为同步?何为异步?

  • 为什么要使用setTimeout()
    为避免锁定浏览器给用户带来的糟糕体验

  • 数组处理模式

  • 前提条件:任务可以异步处理而不影响用户体验或造成相关代码错误

  • new Date 加号(+)可以将Date对象转化为数字,那么在后续的数学运算找那个就无须转换了

  • setTimeout 中的定时器并不是准确的时间,实际上它需要在执行完前面的函数后才定时执行

  • setTimeout的时候应该注意引用的是全局变量还是局部变量,当直接调用外部函数的方法时候,实际上函数内部的变量已经变成为全局

  • 推迟执行的代码必须是字符串的形式,放入setTimeout,因为引擎内部使用的是eval函数,将字符串转为代码

  • 如果是函数的话,就应该将函数名放入其中(或者采用匿名函数的形式)

  • setTimeout中的this。当setTimeout中推迟执行的回调函数是某个对象的方法,那么该方法中的this关键字将指向全局环境,而不是指向这个对象

  • setTimeoutout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event loop的时候,再重新检查是否到了指定的时间。因为执行下面的脚本的时间是不可测的,可能会比执行的时间还要长,所以可能过了指定的时间也没有执行完,这个时间就办法保证按照预定的时间执行

  • setTimeout(f,0)的作用是,尽可能早地执行指定的任务

  • setTimeout(f,0)必须等到当前脚本的所有同步任务结束后才执行

  • JavaScript是单线程的,特点就是非常容易造成堵塞

  • 0毫秒实际上是达不到的,最少4毫秒

  • web worker没有绑定线程UI。这也意味着不能访问浏览器的许多资源。web worker有着不同的全局运行环境,因此没有办法使用JavaScript代码创建它

  • postMessage()方法onMessage事件处理器

  • web worker允许你在UI线程外部执行JavaScript代码,从而避免锁定UI

  • for in 可以用来枚举任何对象的属性名,基本语法格式如下:

for(var prop in object){
    //循环主题
}

prop变量被赋值为object的一个属性名(字符串),直到所有的属性遍历完成才返回。包括对象实例属性以及从原型链中继承而来的属性

  • 除非你明确需要迭代一个属性位置的对象,否则应该尽量避免使用for-in循环。
    不要使用for-in来遍历数组成员

  • 基于函数的迭代:forEach()被原生支持,大多数的JavaScript类库都有等价实现

jquery的实现
  • if-else优化:
    1、确保最可能出现的条件放在首位
    2、二分法的使用

  • 调用栈大小限制 一般来说,JavaScript引擎支持的递归数量与JavaScript调用栈大小直接相关(IE除外)

  • regular expression正则表达式,通常简写成“regex”

  • 字符串合并方法:+、+=、join()、concat()

字符串合并的方法
  • 什么是API?(Application Programming Interface 应用程序编程接口)Restful API ,比如分享到朋友圈,其实就是调用了腾讯方的API
    关于Restful API

关于setTimeout()你所不知道的地方,详解setTimeout()

关于那时候面试被问到的setTimeout中0毫秒和100毫秒哪个先执行的问题?
个人理解:答案是不确定的,根据setTimeout的执行机制,就是将所要执行的方法放到队列后面。因为不知道执行完脚本的时间是什么时候,有可能是在5毫秒之后,那么的话,就有可能是100毫秒的先执行

相关文章

网友评论

      本文标题:高性能JavaScript部分总结

      本文链接:https://www.haomeiwen.com/subject/yryqpxtx.html