阅读《高性能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性能的数据