美文网首页
前端性能优化

前端性能优化

作者: praycis | 来源:发表于2018-09-19 19:58 被阅读0次

请求过程中潜在的优化点

  1. dns是否可以通过缓存减少DNS查询时间
  2. 网络请求的过程走最近的网络环境
  3. 相同的静态资源是否可以缓存
  4. 能否减少HTTP请求的大小
  5. 减少HTTP请求的次数
  6. 通过服务端渲染是否可行
http请求的大小和数量相关的优化
  1. html代码压缩
  2. css.js的压缩合并混淆
  3. 文件合并 (有两个问题:首屏加载问题和缓存失效问题)

图片相关优化

png8,24,32之间的区别

  • png8 256色支持透明
  • png24 2^24色不支持透明
  • png32 2^24支持透明

根据不同的业务场景选择不同的图片格式很重要

不同格式图片常用的业务场景

  • jpg有损压缩,压缩率高,不支持透明,适用于大部分不需要透明图片的业务场景
  • png支持透明,浏览器兼容性好,适用于大部分需要透明图片的业务场景
  • webp压缩程度更好,在ios webview里有兼容性问题,适用于android全部
  • svg矢量图,代码内嵌,相对较小,图片样式相对简单的场景
进行图片压缩的方法
  • 图片压缩网站:tinypng.com
  1. css sprite雪碧图
  2. Image inline (base64编码)
  3. 矢量图 (代码)

相关文章

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 前端面试必问及加分点---性能优化篇

    如何进行网站性能优化 你有用过哪些前端性能优化的方法? 谈谈性能优化问题 代码层面的优化 前端性能优化最佳实践

  • 前端性能优化

    对于前端的性能优化,主要有分为加载优化和性能优化。在Google官方文档中,给出了性能优化有哪些好处。前端优化的最...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 关于前端性能优化问题详解

    关于前端性能优化问题详解 出处:http://segmentfault.com/blogs 前端性能优化指南 AJ...

  • 前端性能优化

    前端性能优化 下面是我认知的前端性能优化的策略,本书主要着手 JavaScript 优化展开阐述。 JavaScr...

  • 2019-10-22

    2018 前端性能优化清单

  • 2020-04-11

    前端工程化相关 前端动画相关 优化前端性能

网友评论

      本文标题:前端性能优化

      本文链接:https://www.haomeiwen.com/subject/acrinftx.html