码迷,mamicode.com
首页 > 其他好文 > 详细

前端性能优化知识点汇总

时间:2019-12-04 13:21:59      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:ref   icon   白屏   类型   control   oca   压缩js   href   域名   

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

为什么做优化

提供给用户最佳体验
#有哪些差的体验
- 白屏好久才显示内容
- 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、服务器渲染

DNS预解析
google规范

前端性能优化知识点汇总

标签:ref   icon   白屏   类型   control   oca   压缩js   href   域名   

原文地址:https://www.cnblogs.com/homehtml/p/11982045.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!