前端优化中使用base64的优缺点

优点

（1）base64格式的图片是文本格式，占用内存小，转换后的大小比例大概为1/3，降低了资源服务器的消耗；

（2）网页中使用base64格式的图片时，不用再请求服务器调用图片资源，减少了服务器访问次数。

缺点

（1）base64格式的文本内容较多，存储在数据库中增大了数据库服务器的压力；

（2）网页加载图片虽然不用访问服务器了，但因为base64格式的内容太多，所以加载网页的速度会降低，可能会影响用户的体验。

（3）base64无法缓存，要缓存只能缓存包含base64的文件，比如js或者css，这比直接缓存图片要差很多，而且一般HTML改动比较频繁，所以等同于得不到缓存效益。

<img src="data:image/jpeg;base64,/9j/4AAQS……"/>

一般图片小于10kb的时候，我们才会选择使用base64图片太大的图片转换成base64得不偿失

http://tool.chinaz.com/tools/imgtobase 图片转成base64的网站、
https://tinypng.com/ 压缩图片的网站

前端优化中使用base64的优缺点相关推荐

关于大型网站技术演进的思考（二十）--网站静态化处理—web前端优化—中（12）...
Web前端很多优化原则都是从如何提升网络通讯效率的角度提出的,但是这些原则使用的时候还是有很多陷阱在里面,如果我们不能深入理解这些优化原则背后所隐藏的技术原理,很有可能掉进这些陷阱里,最终没有达到最佳 ...
前端优化中的防抖与截流
1. 什么是防抖? 在事件触发后的指定时间之后,再去执行真正需要执行的函数,如果在该时间之内事件又被触发,则重新开始计时. 常见的应用场景: 1. 滚动事件触发: 2. 搜索框输入查询: 3. 表单验 ...
浅析渲染引擎与前端优化
本文以 Chrome 浏览器的内核 WebKit(更确切是 WebKit 分支 Blink,以下统称为 WebKit )为例,对渲染引擎如何展示页面做个简单.全面的了解. 本文主要是两方面内容: 浅析 ...
前端优化系列之一：dns预获取 dns-prefetch 提升页面载入速度
问题:怎么做到dns域解析? 用于优化网站页面的图片问题:怎么提升网站性能? dns域解析,是提升网站的一个办法. DNS Prefetch,即DNS预获取,是前端优化的一部分. 一般来说,在前端优 ...
[前端优化]使用Microsoft Ajax Minifier对资源文件进行压缩优化
在前端优化中,js.css等文件的优化一般都是压缩的优化,进行合并.减小体积以达到减小请求的目的. 今天发现了一个集成在VS中的压缩插件,使得压缩变得比较快捷. 配置方法首先需要去下载Microso ...
前端优化之DNS预解析
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...
06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度
title: 前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 urlname: 06_前端优化系列之一_DNS预获取dns-prefetch提升页面载入速度 date: 2 ...
前端优化系列之DNS预获取 dns-prefetch 提升页面载入速度
前端优化系列之一:DNS预获取 dns-prefetch 提升页面载入速度 DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少D ...
前端优化系列:DNS预获取 dns-prefetch 提升页面载入速度
DNS Prefetch,即DNS预获取,是前端优化的一部分.一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 . DNS 作为互联网的基础协议 ...

前端优化中使用base64的优缺点

优点

缺点

前端优化中使用base64的优缺点相关推荐

最新文章

热门文章