主要是三大点:
①减少对HTTP的请求次数和大小
②代码的优化
③dns及HTTP通信方式
举例说明:
1.js中减少闭包的使用(原因:闭包会产生不是放的栈内存) a:循环给元素做事件绑定的时候,尽可能的把后期需要的信息(列如索引) 储存到元素的自定义属性上,而不是创建闭包储存 b.可以在最外层形成一个闭包,把一些后续需要的公共信息进行存储,而不是每一个发发都创建闭包(例如单例模式) c.尽可能的手动释放不被站用的内存
2.尽量减少css和js文件(把需要引入的css合并成一个,js也是合并成一个),原理是在减少http请求次数,尽可能的把合并后的代码进行压缩, 减少http请求资源的大小 a:webpack这种构建工具 b:在移动开发(或者要求高性能的pc开发),如果js和css不多的,我们可以写内嵌式 3.尽量用矢量图或者svg图标代替传统的png等格式的图片 4.减少对DOM的操作(主要是减少DOM的重绘和回流(重排)) a:关于重排的分离读写 b:使用文档碎片或支付窜拼接做支付窜绑定 5.在js中避免“嵌套循环”(这种会额外郑家很多次循环次数)和“死循环” 6.采用图片的懒加载(延迟加载),目的是减少页面第一次加载过程中http的请求次数 7.利用浏览器和服务器的缓存技术(304缓存),把一些不经常更新的静态资源做缓存处理(css、js、静态图片等都可以做缓存) 原理也是为了减少http请求大小 8.尽可能使用事件委托(事件代理)来处理事件绑定的操作,减少DOM的频繁操作,其中包括每一个DOM元素做事件绑定 9.减少使用css表达式(expression) 10.尽可能减少对标签选择器的使用(css选择器的解析是从右往左解析) 11.css雪碧图技术(css sprite/css 图片精灵) 把所有较小的图片汇总到一张大图上,用定位的方式展示到对应小图标即可 12.减少cookie的使用(主要是减少本地cookie存储内容大小) 13.页面中的数据获取采用异步编程和延迟分批加载 14.页面中出现视频音频标签,我们不让页面加载的时候就去加载这些资源(要不然加载会变慢)(只需要设置preload="none"即可)等页面加载完成,音频播放的时候我们再加载资源 15.在客户端和服务端交互的时候,对于多项数据我们尽可能基于json格式来进行传送(json格式的数据处理方便,资源偏小) ?相对于xml格式的传输才会有这个优势 16.尽可能实现js的封装(低耦合高内聚),见晒页面中的冗余代码(减少HTTP请求资源的大小) 17.在css导入的时候尽量减少使用@import导入式,因为@import是同步操作,而link是异步操作 18.使用window.requestAnimationFrame(js中的帧动画)代替传统的定时器动画 19.减少递归的使用,避免死递归,避免由于递归函数到制的栈内存嵌套(建议使用尾递归)
|