前端性能优化知识点汇总

面试必谈的--前端性能优化

为何作优化

提供给用户最佳体验

#有哪些差的体验
- 白屏很久才显示内容
- h5浪费用户流量

优化方案大概分为如下几种：

一、下降请求数量
    a、减小获取数据的接口数（初始数据尽可能经过一个接口返回）
    b、减小js、css的数量（提取公共js、css利用缓存、减小后续加载访问。有些代码直接注入页面无需外链形式访问加载。）
    c、图片懒加载
二、下降文件大小
    a、图片压缩以及使用webp
    b、压缩js、css
    c、gzip（设置content-encoding:gzip）
    d、icon或者svg绘制图标
三、加快请求速度
    a、[DNS预解析][1] 
    b、减小域名数量(页面、js、css、image、接口域名、同种类型文本请求尽可能同域名。)
    c、静态资源cdn分发
    d、提早加载（提早加载一部分可能被用户访问的图片或者数据信息）
四、缓存
    a、http协议缓存
    b、离线数据缓存localStorage
五、渲染
    a、js、css优化(按照规范来写--google规范)
    b、服务器渲染

DNS预解析
google规范