口试必谈的–前端机能优化
为何做优化
提供给用户最好体验
#有哪些差的体验
- 白屏良久才显现内容
- h5糟蹋用户流量
优化计划也许分为以下几种:
1、下降要求数目
a、削减猎取数据的接口数(初始数据只管经由过程一个接口返回)
b、削减js、css的数目(提取大众js、css应用缓存、削减后续加载接见。有些代码直接注入页面无需外链情势接见加载。)
c、图片懒加载
2、下降文件大小
a、图片紧缩以及运用webp
b、紧缩js、css
c、gzip(设置content-encoding:gzip)
d、icon或许svg绘制图标
3、加速要求速率
a、[DNS预剖析][1]
b、削减域名数目(页面、js、css、image、接口域名、同种范例文本要求只管同域名。)
c、静态资本cdn分发
d、提早加载(提早加载一部分能够被用户接见的图片或许数据信息)
4、缓存
a、http协定缓存
b、离线数据缓存localStorage
5、衬着
a、js、css优化(根据范例来写--google范例)
b、服务器衬着