日常用到的前端性能优化

html的优化

• 减少字节数（减少html嵌套、dom节点数；删除无语义代码、多余的空格、换行符、缩进和不必要的注释；删除冗余标签和属性； 使用相对路径的URL，css、js尽量外链）
• 文件放置位置
  • css样式文件链接尽量放在页面头部
    css加载不会阻塞DOM tree解析，但是会阻塞DOM tree渲染，页会阻塞后面js执行
    任何body元素之前，可以确保在文档部分中解析了所有css样式（内联和外联），从而减少浏览器必须重排文档的次数。
    如果放在页面底部，就要等待最后一个css文件下载完成，此时会出现“白屏”，影响用户体验
  • js引用放在html底部
    防止js的加载、解析、执行对阻塞页面后续元素的正常渲染
• 减少iframes使用
  会阻碍父文档加载，父文档onload事件会一直等它加载完才加载，而且在iframe里创建元素开销大）
  可以对它做延迟加载，不要一上来就加载，等父文档加载完后，再赋值给他 <iframe id='a'></iframe>；document.getElementById('a').setAttribute('src', 'url')
• 避免table布局
• 增强用户体验（设置favicon.ico；增加首屏必要的css和js）

资源优化

资源的压缩、合并（减少http请求数量，请求资源大小）

html压缩、css压缩、js的压缩和混淆（webpack）、css/js文件合并

图片的优化

• 图片动画
  • webp现代图像格式，可位图像提供无损压缩和有损压缩，可设置透明。无损比png小26%，有损比jpeg小25-34%，比gif有更好的动画（缺点：最多处理256色，不适合彩色图片）
• 图片压缩
• 图片尺寸随网络环境变化
• 响应式图片
  • js绑定事件检测窗口大小
  • css媒体查询，加载不同格式图片
  • img标签的srcset属性根据浏览器根据宽、高和像素密度来加载相应的图片资源

// 媒体查询
@media screen  and(max-width:640px){
	my_image{width:640px}
}

// x表示图像的设备像素比
<img srcset='img-320w.jpg,img-640w.jpg 2x,img-960w.jpg 3x' src='img-960w.jpg'>

• 逐步加载图像

  • 使用统一占位符：没加载之前给一张加载图片
  • 使用LQIP（低质量图像占位符Low quality image placeholders）：转成base64或十六进制颜色值的数组，可以使用它在图片还没加载完之前，使用图片的低质量图像为占位符
  • 使用SQIP（基于svg的图像占位符svg quality image placeholders）：用来把svg图像生成svg占位符

• 图片替代方法

  • web font 代替图片（一般用于图标）
  • 使用Date URI 代替图片 （转成base64的图片要在10kb以下）
  • 采用image spriting 雪碧图

• 图片服务器自动优化
  是指可以在图片URL连接上增加不同特殊参数，让服务器自动化生成不同格式、大小、质量的图片。
  比如加参数100*100格式、webp格式、压缩质量，让服务器根据参数生成对应的图片

其他优化

1. axios取消重复请求

思路：请求拦截时判断是否重复请求接口，如果是就调用取消去取消当前请求
1）使用map存储用来存储每个请求标识 和 取消的函数，map.has()判断是否有重复

2. 切换页面时取消请求

var CancelToken = axios.CancelToken;

axios.interceptors.request.use((config) => {//在请求拦截器中为每一个请求添加cancelToken，并将cancel方法存入全局数组中保存
  config.cancelToken = new CancelToken((c) => {
    Vue.prototype.__cancels__.push(c);
  });
  return config;
}, (error) => {
  return Promise.reject(error);
});

router.beforeEach((to, from, next) => {//当路由切换页面的时候，遍历全局数组，将上一个页面的所有请求cancel掉
  Vue.prototype.__cancels__.forEach((cancel) => {
    cancel();
  });
  Vue.prototype.__cancels__ = [];
})

性能检测工具

• profile可以精确地检测程序的性能，浏览器遇到profileEnd()时会将统计结果生成报表显示出来，或在profile的record特性查看

console.profile()
// 要统计的代码
// ...
console.profileEnd()

• time 计算执行时间（以毫秒为单位）

console.time('times')
// 代码段落
console.timeEnd('timesEnd')