1、封装组件
把所有经常需要用到的封装成组件,在需要的时候调用它。
2、减少DOM操作
dom操作是脚本中最耗性能的一个操作,减少dom操作的方法如下:
- 对dom查询做缓存
// 未缓存dom查询
var i;
for (i = 0; i < document.getElementsByTagName('p').length; i++) {\
// todo
}
// 缓存了dom查询
var pList = document.getElementByTagName('p');
var i;
for (i = 0; i < pList.length; i++) {
// todo
}
- 多个操作尽量合并在一起执行
for循环插入dom,改成 先创建节点,最终再一次性插入到dom上。
- 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
在这里插入代码片
3、压缩图片
- 3.1 压缩图片体积, 比如说熊猫在线图片压缩,或使用打包工具来压缩图片
- 3.2 使用字体图标,比如说阿里图标
4、减少http请求
- 4.1 通过使用雪碧图,把很多小图片制作成一个大图,然后作为背景图片使用,定位即可
- 4.2 把图片转化为base64编码,减少请求
- 4.3 避免img、iframe等的src属性为空。 空src会重新加载当前页面,影响速度和效率
5、延迟加载
假设我的网页很长,图片很多很多,只需要提前加载展示前一两屏即可,这个就是一个延迟加载的思想。具体的实现方法可以看一个插件,就叫lazeload。
6、配置多个域名和CDN加速
通常浏览器对于一个域名的并发请求是有限的,比如:有100个文件要加载,但浏览器一次只可能并发请求10个文件,这样并发多次就会耗时。
因此配置多个域名能够最大限度的增加并发请求量,但这里有个缺点就是会增加浏览器域名解析的次数,这里建议利用CDN来加快域名解析。
7、利用浏览器缓存
8、代码细节优化
- 多个变量声明合并
- 少用全局变量
- 避免全局查询
- 移动端使用touch事件代替click事件
9、非核心代码异步加载
异步加载的方式,有以下几类:
- js动态脚本加载, 即使用js把script标签,加入到body中
- script标签中加入defer 、async
defer是在html解析完之后才会执行,如果是多个,按照加载的顺序依次进行。
async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关。
参考链接 https://www.cnblogs.com/halilulu/p/12576617.html