《高性能javascript》笔记

阅读《高性能javascript》后,对其内容的一个整理和精简

加载与执行

 1.将script标签放在body结尾标签上面
 2.控制script标签数量(每一次script解析都意味着阻塞或延迟)
 3.内嵌脚本不要放在link样式之后
 4.对script标签应用defer属性
 5.动态创建script标签加载js文件(模块化框架即可)

数据存取

 1.不影响this的情况下,对反复访问的对象进行变量保存
 2.合理使用局部变量,减少作用域跨越
 3.避免使用with和eval
 4.谨慎地使用闭包
 5.减少Object对象的层次访问,避免过长的属性读取(es6解构赋值)

DOM编程

 1.尽量用新的选择器api代替老的,尽量用dom克隆替代dom创建
 2.html集合操作非常昂贵,可转换为数组再进行操作,同时使用局部变量缓存操作
 3.对dom访问信息进行缓存,对dom改变进行批量操作
 4.对操作频繁的dom,尽可能采用position:absolute
 5.对操作密集的dom,先display:none——>操作——>再display:block
 6.对操作量很大的dom,采用文档碎片createDocumentFragment
 7.合理使用事件委托,避免对dom进行逐个事件绑定

算法和流程控制

 1.减少使用for...in循环
 2.条件判断上,避免类型转换
 3.条件较多时,使用switch代替if..else
 4.最小化语句数,避免多个var声明,插入迭代值——arr[i++]
 5.简化终止条件,简化循环体,减值迭代
 6.展开循环(在次数不多的情况下)

字符串与正则表达式

 1.减少字符串拼接,避免"临时字符串"的出现
 2.当叠加字符串的时候,字符串变量应该靠左
 3.数组join方法比其他字符串连接方式慢
 4.字符串concat方法比使用简单的+和+=慢
 5.正则优化(个人略过...)

快速响应的用户界面

 1.对于异步操作的任务,可使用定时器分解任务,分割循环项
 2.定时器最小延迟建议为25毫秒,应避免高频定时器的数量
 3.合理使用web workers

Ajax

 1.对那些不会改变服务器状态,只获取数据的请求,应该使用get类型(会被游览器缓存起来,有利于性能)
 2.如果你只关心发送数据到服务器,可以使用图标信标(img.src="请求地址")
 3.使用能被http缓存的get查询请求的时候,应该同时在服务端设置Expires头信息(过期时间)
 4.本地设置缓存(变量缓存与storage缓存)

编程实践

 1.避免使用eval,Function,setTimeout和setInterval去执行需要解析的字符串代码
 2.对数组和对象使用字面量进行创建,而非构造器模式
 3.涉及计算的过程,应该尽量用原生方法(Math),合理使用位运算符

构建并部署高性能javascript应用

 1.合并js,减少http请求
 2.压缩js,降低请求大小
 3.设置Accept-Encoding HTTP请求头,对js进行gzip压缩
 4.设置Expires HTTP响应头,对js文件进行过期时间缓存(客户端使用时间戳更新js文件)
 5.使用内容分发网络CDN

工具

 1.javascript的性能分析简单的分析可以通过Date日期函数,推荐使用当前的集成测试和单元测试
 2.每个游览器都具备各种的检查器和资源面板,可以通过分析得出一些javascript性能的数据

猜你喜欢

转载自www.cnblogs.com/kanyu/p/9829563.html