处理网络请求qs、图片转base64的优劣

一、引入qs这个库,更好的处理网络请求传参。

qs.parse

let url = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
let data = qs.parse(url.split('?')[1]);// data的结果是
{a: 1, b: 2, c: '', d: xxx, e: ''
}

 qs.stringify

 


二、图片文件转为base64
好处:
1、减少了下载图片的http请求数,请求css就能下载下来图片
缺点:
1、转成base64编码后,文件体积增大
2、使用 Base64 不代表性能优化。CSS 文件体积的增大。 CSS 文件的体积直接影响渲染,导致用户会长时间注视空白屏幕。HTML 和 CSS 会阻塞渲染,而图片不会
总的看来甚至弊大于利。

// Base64 在CSS中的使用
.box{
  background-image: url("https://img-blog.csdnimg.cn/2022010702262632313.jpg");
}
// Base64 在HTML中的使用
<img src="https://img-blog.csdnimg.cn/2022010702262632313.jpg" />

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/357353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

花了一天的时间给粉丝做了一个小米官网(高仿)

身为前端程序员&#xff0c;经常会找几个官网试试手&#xff0c;哈哈&#xff0c;这次拿小米官网试试手吧。 目录 效果图&#xff1a; 项目结构 index.html index.css js 下载地址&#xff1a;点我下载 效果图&#xff1a; 项目结构 index.html <!DOCTYPE html> &l…

uniapp踩坑指南之坑多到写不完

1、sticky:到达指定位置时&#xff0c;就停留在那里不动了。当发现可以走时&#xff0c;立马就走了。 如果走不了就不会动了&#xff0c;就会一直在那里。 https://www.cnblogs.com/byeyear/p/11999334.html 设置了sticky定位的元素相对于第一个定位不为static的父级元素的位置…

小程序引入百度地图与uni.getLocation的使用

一、小程序引入百度地图 1、当你不需要引入整个地图展示&#xff0c;只需要引入某些功能的时候&#xff0c;可以直接调用服务端api。 2、访问百度地图的任何api都需要密钥。 流程&#xff1a; 3、在小程序端配置请求合法域名&#xff1a;https://api.map.baidu.com 4、直接使…

当年上大学时,编程老师让我们用html+CSS实现一个天猫官网

纯用htmlcss实现一个天猫首页还是挺考验基本功的&#xff0c;完全考验自己的CSS功底。 目录 效果图 项目结构 index.html 源码下载&#xff1a;点我下载 效果图 项目结构 主要由htmlcss组成。 index.html <!doctype html> <html lang"en"><head&g…

微服务实战系列之Dubbo(上)

前言 随着一年一度冬至的到来&#xff0c;2023的步伐也将远去。而博主的系列文章&#xff0c;也将从今天起&#xff0c;越来越聚焦如何构建微服务“内核”上。前序系列文章几乎囊括了微服务的方方面面&#xff0c;无论使用什么框架、组件或工具&#xff0c;皆可拿来用之。 那么…

多线程图解

关于多线程一直是我们学习iOS的一个重点&#xff0c;不仅是面试中经常被问到的问题&#xff0c;而且我们开发过程过程中经常会用到的技术&#xff0c;下面是一张关于多线程的图解&#xff0c;希望可以帮助大家学习多线程的开发。 转载于:https://www.cnblogs.com/lyy-5518/p/53…

spring作业_Spring和石英:多作业计划服务

spring作业作业调度对于应用程序来说是如此重要。 尤其是在大型项目中&#xff0c;处理大量工作可能是一个问题。 Spring和Quartz为解决该问题带来了巨大的好处。 本文展示了如何通过使用Spring和Quartz轻松地计划多个作业。 二手技术&#xff1a; JDK 1.6.0_21 春天3.1.1 石…

react常用知识点总结

1、什么是jsx JSX是JavaScript的扩展语法,这种<></>标签的写法就是 JSX。JSX 编写的组件通过预处理器 babel 解析后,再交给 React 库渲染到指定父容器下,形成最终html页面,供浏览器解析和显示。 JSX会被babel编译为&#xff1a;React.createElement()&#xff0c…

前端导入导出文件

一、导出 1、返回值是url&#xff1a;创建个a标签即可 printRecord(params).then((response) > {if (response.success) {let a document.createElement(a);//创建a标签//从新页面打开&#xff0c;下载的话不需要这个&#xff0c;打开一个图片需要从新页面打开a.setAttrib…

vue进阶

1、vue-cli 使用 在开发中&#xff0c;需要打包的东西不止是js、css、html。还有更多的东西要处理&#xff0c;这些插件和加载器如果我们一一去添加就会比较麻烦&#xff0c;vue官方提供了一个快速搭建vue项目的脚手架&#xff0c;使用它能快速的构建一个web工程模板。 官网&…

Diff 算法核心原理

什么是虚拟DOM 讲Diff算法前&#xff0c;我先给大家讲一讲什么是虚拟DOM吧。这有利于后面大家对Diff算法的理解加深。 虚拟DOM是一个对象&#xff0c;一个什么样的对象呢&#xff1f;一个用来表示真实DOM的对象&#xff0c;要记住这句话。我举个例子&#xff0c;请看以下真实…

python 列表 字典 读写文件:pickle模块的基本使用

建议大家使用cPickle&#xff0c;速度更快&#xff01;&#xff01;&#xff01; python数据持久存储&#xff1a;pickle模块的基本使用&#xff08;转载&#xff09; 作者: pzxbc出处: http://pzxbc.cnblogs.com/本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但…

first-child、first-of-type等属性的差别

1、xxx:first-child 伪类 xxx作为第一个子元素 //p元素作为第一个子元素的都会变色 p:first-child { background:yellow; } //p作为父元素的 第一个子元素。不要求第一个元素的类型 p>:first-child {background:yellow; }//p作为父元素的 第一个子元素。要求第一个元素的类…

我的Serverless实战——引领云计算的下一个十年

前言&#xff1a;如今&#xff0c;越来越多的大厂企业开始大规模使用Serverless&#xff0c;处于变革中的开发者&#xff0c;大多已从观望状态转向尝试阶段&#xff0c;越来越多Serverless落地场景被解锁。作为基础研发底座&#xff0c;越来越多企业开始接受Serverless&#xf…

各种边距clientWidth、offsetWidth、scrollWidth、clientLeft、getBoundingClientRect详解

1、clientWidth、offsetWidth、scrollWidth <!DOCTYPE html> <html><head><meta charset"utf-8" /><style>#box1 {padding: 50px;position: static;}#box {border: 1px solid red;overflow: scroll;height: 200px;width: 500px;}#con…

花了两天时间用html+css+js做了一个网页版坦克大战游戏

大家好&#xff0c;我是孙叫兽&#xff0c;本期内容给大家分享如何用htmlcssjavaScript去做一个简易网页版坦克游戏。 目录 坦克游戏玩法及介绍 项目结构 源码地址&#xff1a; 坦克游戏玩法及介绍 我们先来看一下首页。 打开这个首页很简单&#xff0c;基本是上面这个样子&…

设置文字多行显示溢出显示省略号

#news_text { border: 1px solid red; width: 200px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /*这里可以设置文本显示的行数*/ overflow: hidden; }<div id"news_text"&g…

vue项目有几个接口content Download时间特别长的解决办法

做的可视化地图项目&#xff0c;有几个接口加载比较慢&#xff0c;大概16S左右&#xff0c;第一次加载接近一分钟&#xff0c;这谁能受得了。 对比了正式环境和测试环境&#xff0c;这个接口数据量一样&#xff0c;就是在测试服务器比较慢&#xff0c;排除滚动插件及其它的影响…

Jmeter调试工具---HTTP Mirror Server

转自&#xff1a;http://www.cnblogs.com/puresoul/p/4907655.html 一、HTTP Mirror Server的作用&#xff1a; 它可以在本地临时搭建一个HTTP服务器&#xff0c;该服务器把接收到的请求原样返回&#xff0c;这样就可以看到发送出的请求的具体内容&#xff0c;以供调试。 二、…

520 单身福利|女朋友又找我要礼物

大家好&#xff0c;我是孙叫兽&#xff0c;520快到了&#xff0c;给大家分享一下单身福利&#xff01;时间过得真快&#xff0c;一转眼又到了 520&#xff0c;有对象的程序员又激动又扎心的节日&#xff0c;其实吧&#xff0c;程序员对这种节日又期待又焦灼&#xff0c;为什么呢…