![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
文章平均质量分 83
前端的一些基础知识,包括跨域、跨站、网络等相关知识。
努力的小朱同学
未来很长,梦想很远。
展开
-
前端实现文件下载的方法
该方案是通过`ajax`请求,获取到`blob`类型的文件数据流,然后再将文件数据流转换成`URL`对象,最终再通过``标签实现下载。下载时可以自定义指定文件下载到本地时的名称。原创 2024-04-25 16:08:39 · 411 阅读 · 0 评论 -
浏览器从输入URL到这个页面完全呈现的过程,发生了什么? (附带TCP三次握手和四次挥手解释)
1、DNS解析根据url的域名去查找对应的ip地址,查找顺序为:浏览器缓存 — 系统缓存 — 路由缓存 — 系统的hosts文件 — DNS服务器。2、TCP连接和发送HTTP请求根据查到ip地址和url中的端口号,以及请求的相关信息(请求方法、参数等),构造一个http请求,并将这个请求通过TCP发送到服务器。3、服务器处理请求并返回HTTP报文服务器接收请求之后,对请求进行处理,并作出响应,返回对应的html数据。4、浏览器接收数据并解析渲染页面浏览器接收到服务器响应原创 2021-11-20 22:32:54 · 2328 阅读 · 1 评论 -
前端性能优化的几种方案
前端进行性能优化的方案很多,这里只列举部分。在实际应用中不要贪多,想着都用上,要对网站的主要用户群体进行针对性优化。1、降低请求量 ① 合并资源,减少http请求数量。 ② lazyLoad,如图片懒加载。分批加载,每次只加载一部分。 ③ 使用字体图标或CSS绘制,来代替部分图片。2、加快请求速度 ① 预解析DNS ② 使用HTTP2.0 ③ 并行加载 ④ CDN 分发 ⑤ webP,对图片进行压缩,减少图片体积。 ⑥ minify/gzip 压缩,原创 2021-11-27 20:20:52 · 9070 阅读 · 0 评论 -
简述 http 和 https 的相关知识
1、http http 的中文全称为 超文本传输协议,是一个基于TCP/IP 协议的应用层协议,用于从服务器传输超文本到本地浏览器,使浏览器更加高效。该协议的常用端口为:80。而且 http的连接是无状态的。http传输的数据是明文传输,安全性较低。2、https https 是以安全为目标的协议,简单来说 就是在 http 协议的基础上加入了 SSL 协议,对传输的数据进行加密处理,安全性更高。该协议的常用端口为:443。https 的通信步骤: ① 客户端使用https url访问原创 2021-11-27 18:31:31 · 1442 阅读 · 0 评论 -
URL地址的两种格式
1、传统格式格式:scheme://host:port/path?query#fragment ① scheme:协议。例如http、https、ftp等(必写)。 ② host:域名或IP地址(必写)。 ③ port:端口号,http 默认端口为 80 ,可以省略。 ④ path:路径,例如/view/index。 ⑤ query:参数,例如 uname=zhangsan&age=20 ⑥ fragment:锚点(哈希 Hash),用于定位页面的某个位置。符原创 2021-10-12 15:57:31 · 18061 阅读 · 2 评论 -
前端实现图片下载的方法
在任何方案下,前端都无法绕过跨域的限制,所以需要图片所在的服务器对你当前域名开放权限,否则是无法下载的,最多能做到查看图片。1、直接使用a标签的download属性。2、canvas对象+a标签。3、ajax请求(blob或base64格式)+a标签。4、domtoimage+a标签。5、form表单。6、iframe。原创 2023-11-07 19:55:37 · 780 阅读 · 0 评论 -
前端 之 FormData对象进阶
本篇博客主要包含以下内容:1、FormData对象、JSON字符串、key=value字符串 三种参数形式对比。2、对FormData对象中的数据进行过滤。3、FormData对象结合同步token预防CSRF攻击。4、FormData对象结合input实现选择文件夹,批量上传文件。5、FormData对象结合dataTransfer实现拖拽文件夹,批量上传文件。原创 2023-05-19 18:14:35 · 2617 阅读 · 1 评论 -
前端 之 FormData对象浅谈
FormData提供了一种以 `key/value`键值对集合表示表单数据的数据构造方式,通过该方式我们可以将`file`、`blob`等不易传输的数据通过 `ajax` 请求轻松的发送到服务器端。 当使用`FormData` 对象作为参数时,无需手动设置请求的编码类型,浏览器会自动将请求的编码类型`Content-type`设置为`multipart/form-data`。原创 2023-05-14 20:34:41 · 5192 阅读 · 0 评论 -
JavaScript实现点击复制(JS访问剪贴板相关)
document.execCommand()方法用来操作当前聚焦的可编辑元素(`input`、`textarea`)中的内容,例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果。Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力,该API是用来取代document.execCommand() 这种剪贴板访问方式的。原创 2023-04-06 19:55:57 · 9772 阅读 · 3 评论 -
前端Cookie基础知识
Cookie(也称为Web Cookie、浏览器Cookie等等)是服务器发送到用户浏览器并保存在本地的一小块数据,该数据通常是用户账号相关的信息,不同浏览器对Cookie的数量和大小限制不同,但一般来说,单域名下设置的cookie不能超过30个,单条cookie的大小不能超过4kb。如果Cookie超出浏览器限制,则会被浏览器忽略,不被保存。而且Cookie可以设置过期时间,到达过期时间后,浏览器就会把Cookie清除掉。原创 2023-02-28 17:52:35 · 10044 阅读 · 0 评论 -
前端将base64图片转换成file文件
首先利用split()方法对base64进行分割,将前缀文件信息,与文件内容分隔开。然后从前缀中获取到文件的类型信息以及具体的格式后缀。再然后借助window.atob()方法对base64文件数据进行解码,接着利用Uint8Array(length)和charCodeAt(index),对接码后的数据进行处理。最后通过File(bits, name, options)构造函数,传入对应的参数创建一个新的file对象。原创 2023-02-21 15:21:08 · 10566 阅读 · 2 评论 -
前端借助Canvas实现压缩base64图片两种方法
第一种方法是在创建canvas元素后,设置其宽高为图片宽高*压缩比例,然后将图片渲染到canvas元素上,同时设置渲染图片的宽高与canvas一致,最后通过toDataURL()将canvas画布转成base64,参数type设置为原来的图片类型。第二种方法是在创建canvas元素后,设置其宽高与图片宽高一致,并将图片渲染到canvas元素上,但是在通过toDataURL()将canvas画布转成base64时,第一个参数设置图片类型为image/jpeg或image/webp,第二个参数设置图片的质量原创 2023-02-19 19:17:55 · 3456 阅读 · 5 评论 -
前端FileReader对象实现图片file文件转base64
其原理主要是借助`FileReader`对象来实现图片格式的转换,`FileReader`对象中的`readAsDataURL()`方法,可以读取一个`File`或`Blob`类型的文件,并将其转换为base64格式的字符串。但要注意的一点是:我们通过`readAsDataURL()`方法去读取一个文件时,属于异步操作,因此我们需要在`FileReader`对象的onload事件或onerror事件中,通过回调函数的方式,将文件类型转换的结果,传递给方法的调用者。还有最重要的一点:该方法不兼容IE。原创 2023-02-19 16:36:22 · 3781 阅读 · 0 评论 -
前端实现文件上传(点击+拖拽)
通过原生的html+js来实现文件的点击上传和拖拽上传。首先是点击上传文件,只需要借助`input`标签即可,但为了美观,所以过一个div,模拟成上传按钮,然后监听点击事件,通过`元素.click()`去模拟点击真正的上传元素。然后是拖拽获取上传文件,通过HTML5新增的`drag`API+`dataTransfer`来实现文件的拖拽获取,但在某些低版本IE浏览器不兼容。最后当我们获取到上传文件之后,我们就可以借助`formDate`对象以及ajax工具(原生、axios等)进行上传了。原创 2022-12-25 19:01:17 · 10335 阅读 · 3 评论 -
前端零碎知识随笔
1、取消checkbox按钮在浏览器切换页面时状态的自动保存2、清除IE浏览器中输入框自带的删除和查看icon图标3、font-weight属性设置数值在部分电脑上不起作用的原因4、HTML标签中支持onload()和onerror()事件的标签不多,常见的有body、link、script、frame、iframe、img等,除此之外window对象也支持这两个事件。原创 2022-12-18 22:05:52 · 1051 阅读 · 0 评论 -
谈谈对跨域(跨源)的一些理解
我们讲了这么多的跨域的解决方案,但我们不得不思考这样一个问题:浏览器为什么要设置这么一道障碍?几乎所有人都知道答案,那就是为了安全。可这个安全是为了谁?有人说是为了浏览器的安全,避免恶意脚本的执行,对客户端造成损害,但这是片面的。也有人说是为了服务端的安全,避免服务器被攻击,但通过抓包可以发现,当出现跨域时,其实服务端的数据已经完整返回了,也就是说其实服务器对于跨域并不知情,所以这种说法也是片面的。其实跨域真正的意义是为了保护**数据资源**的安全,例如:图片、字体、音视频、css、js等等。原创 2022-11-21 09:33:42 · 1174 阅读 · 0 评论