![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
只想看世界
因为专业技术可能不到位,博客仅作为学习记录的工具,如果有幸能帮到你,那真是太好了。
展开
-
首次登录界面使用大图片做背景,加载缓慢
使用骨架屏:骨架屏是需要自己画的,你需要把布局画好做成一个组件,在需要的页面引用,然后等数据请求回来以后隐藏掉再显示正常的页面就可以。通常仅仅在接口请求比较多的页面用到骨架屏,路由懒加载:webpack打包时会把懒加载的路由组件打包成单独的js bundle,在出发时再调用。预渲染: 使用 Preload/Prefetch 优化。解决首次登录,加载缓慢的过程。原创 2022-11-07 16:55:00 · 1211 阅读 · 1 评论 -
websocket和HTTP2.0的服务器推送有什么区别
websocket和HTTP2.0的服务器推送有什么区别原创 2022-11-04 20:11:04 · 1696 阅读 · 0 评论 -
flex的缩写值的使用
flex: initial等同于设置flex: 0 1 auto flex属性的默认值。flex-basis:0%表示建议支持是0,因此,设置flex:0的元素的最终尺寸表现为最小内容宽度;flex-basis:auto表示固定尺寸由内容决定,最终尺寸通常表现为最大内容宽度。flex:none等同于设置flex: 0 0 auto(推荐)flex:1等同于设置flex: 1 1 0% (推荐)flex:auto等同于设置flex: 1 1 auto。flex:0等同于设置flex: 0 1 0%原创 2022-11-04 20:10:03 · 810 阅读 · 0 评论 -
前端面试过程中关于浏览器多线,开启子线程,核心组件
浏览器是多线程的,有js引擎线程,Gui渲染线程,事件触发线程,定时触发线程,异步请求线程。使用h5的新特性web work开启js的子线程,但是完全受主线程控制,不允许操作dom。渲染引擎: Blink-》(chrome,opera)浏览器的核心组件,一是渲染引擎,另一个是JS引擎。js引擎: V8-》(chrome,opera)原创 2022-10-20 16:37:10 · 447 阅读 · 0 评论 -
浏览器缓存,如何选择,各有什么优缺点,存储图片呢,强制缓存与协商缓存用在哪些地方
因为他是应用的入口,只有加载它之后才会加载它引用的资源文件,如css、js、img等,所有要保证index.html不被缓存,这样你才能保证本地资源版本跟服务器一致。至于css、js等资源文件如果重新打包那么他们的文件名也会根据内容发生变化(contentHash),都是不同的文件了也就不担心缓存带来的副作用了。2)js、css、img等文件可以进行强缓存 ,会在打包后生成对应的hash标识,所以这些文件可以设置一个比较长的缓存时间;3)逻辑处理之类的必须要准确数据,也就不会做缓存。原创 2022-10-20 16:35:57 · 229 阅读 · 0 评论 -
local storage在不同标签页,不同浏览器之间通用吗,可以跨域吗
local storage不可以跨域,但是可以使用iframe+postmessage可以实现。localStorage相比而言可以在多个标签页中共享数据,sessionStorage只适用于同一个标签页,:同源页面,也就是协议,端口,域名相同的页面。当然不能跨浏览器啦,都不是一个存储系统。原创 2022-10-20 15:49:37 · 2845 阅读 · 0 评论 -
在浏览器中和在node中跑js的差异
2.JS需要浏览器的JS引擎进行解析执行,但是不同浏览器的JS引擎不同,存在兼容性问题。1.浏览器和node.js都可以看作是JS的运行平台,浏览器是JS在客户端的运行时环境,而node.js是JS在服务端的运行环境。3.node.js无法使用DOM和BOM的操作,浏览器无法执行node.js中的文件操作等功能。5.浏览器用的是ES的模块化,nodejs常用的的是CommonJs的模块标准。浏览器端,microtask 在事件循环的 macrotask 执行完之后执行。原创 2022-10-20 15:48:52 · 1114 阅读 · 0 评论 -
js中forEach与for循环实现按顺序输出promise
首先拿到4个pending的promise对象,然后分别.then注册成功的回调,一秒后res1、res2、res3, res4状态变为fulfilled,最后从上到下依次打印结果,四块代码会同时执行。如果使用for循环,就能够按顺序输出1,2,3,4。隔9秒输出1, 隔8秒输出2, 隔7秒输出3, 隔6秒输出4。题干:通过数组中的值设定第一个promise使用9秒,第二个使用八秒,第三个使用七秒,第四个使用六秒。先隔七秒输出4,然后每隔一秒输出一个3,2,1。4 forEach没有for循环效率高。原创 2022-10-05 15:41:33 · 2433 阅读 · 0 评论 -
使用echart展示数百万条数据时,应该怎么做
使用echart展示数百万条数据时,应该怎么做。原创 2022-10-02 21:14:56 · 2808 阅读 · 0 评论 -
父子域如何用cookie实现在父域中登录,子域中不用登录
如果不指定,默认为 origin,不包含子域名。它最初是耶鲁大学实验室的项目,后来转让给了 JASIG 组织,项目更名为 JASIG CAS,后来该组织并入了Apereo 基金会,项目也随之更名为 Apereo CAS。一个应用登录以后,后端返回token,前端拿到token后保存在localstroge中,另一个应用登陆时,判断localstroge中是否存储有token,如果有存储,直接使用登录成功。其实这个实现就是单点登录,只要登录了其中一个应用系统,其他的应用系统也可以使用,不用重新登录。原创 2022-09-29 14:43:59 · 1472 阅读 · 0 评论 -
http1.0到http3.0的介绍,常见的http的请求方式介绍,常见状态码
本质上来讲, PUT和POST极为相似,都是向服务器发送数据,但它们之间有一个重要区别,PUT通常指定了资源的存放位置,而POST则没有,POST的数据存放位置由服务器自己决定。而基于UDP的QUIC协议,则可以内建与TCP中不同的连接标识方法,从而在网络完成切换之后,恢复之前与服务器的连接。基于TCP的HTTP/2,尽管从逻辑上来说,不同的流之间相互独立,不会相互影响,但在实际传输方面,数据还是要一帧一帧的发送和接收,一旦某一个流的数据有丢包,则同样会阻塞在它之后传输的流数据传输。提高了网络的利用率。原创 2022-09-15 11:23:27 · 1056 阅读 · 0 评论 -
单例模式的实现
使用es6的class也可以实现。原创 2022-09-28 16:46:12 · 104 阅读 · 0 评论 -
cookie session token以及jwt
但token不同,token是开发者为了防范csrf而特别设计的令牌,浏览器不会自动添加到headers里,攻击者也无法访问用户的token,所以提交的表单无法通过服务器过滤,也就无法形成攻击。Header :描述 JWT 的元数据。首次登录,取数据库查询用户的用户名密码是否匹配,登录成功获得用户的uid,例如使用md5加密算法,对uid进行加密,得到的加密字符串返回给客户端,下次客户端请求带上token,服务端根据加密发构造方法,得到uid然后,再次使用加密算法,看得到的密文是否和返回的token一致。原创 2022-09-15 16:45:21 · 309 阅读 · 0 评论 -
使用原生js实现鼠标移入video播放,移除video暂停
使用onmoueenter,onmouseleave 来监听鼠标移入移除。注意是使用video的play()和pause()方法来实现。代码中使用两种方法得到video这个元素。另一种是使用id得到元素,两种方法均可。一种是在方法中传入this。原创 2022-09-15 09:03:19 · 2017 阅读 · 0 评论 -
伪类与伪元素
伪类:伪类用于选择DOM树之外的信息,匹配指定状态的元素,比如:visited,:active,:hover,:active。或者满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。伪元素:伪元素为DOM树没有定义的虚拟元素,它不以元素为最小选择单元,它选择的是元素指定内容。::first-line 选择指定元素的第一行。::before 在指定元素的内容后面插入内容。::after 在指定元素的内容前面插入内容。原创 2022-09-14 16:29:08 · 79 阅读 · 0 评论 -
html5新特性
html5新特性。原创 2022-09-14 15:12:26 · 137 阅读 · 0 评论 -
发布订阅者设计与观察者模式
发布订阅者与观察设计者原创 2022-09-13 11:05:33 · 161 阅读 · 0 评论 -
如何把arguments转换为数组
es6的方法就是使用扩展运算符。原创 2022-09-08 11:00:32 · 92 阅读 · 0 评论 -
数组扁平化的方法
es6的自带的方法,flatten,使用数组的some方法。原创 2022-09-08 10:45:00 · 105 阅读 · 0 评论 -
防抖节流函数的实现
节流函数,一段时间内,只取第一次点击的值,经典实现,点击按钮上传。防抖函数,就是一段时间内点击多次,取最后一次。原创 2022-09-08 10:16:32 · 251 阅读 · 0 评论 -
实现函数柯里化
实现函数柯里化,就是判断当前接受的参数与函数的参数长度(fn.length函数参数长度)是否一致,如果一致就返回函数执行结果。否则继续返回柯里化函数。原创 2022-09-08 09:27:27 · 117 阅读 · 0 评论 -
使用class手写实现完整的promise及其方法
【代码】使用class手写实现完整的promise及其方法。原创 2022-09-05 16:51:32 · 392 阅读 · 0 评论 -
js中super的使用
因为:ES5 的继承的实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this。son2.func()出错的原因是,在对象son2,定义的func方法是传统的定义方式,不是es6新定义的方法的简写方式,func(){};使用super:super继承,super方法,super对象。...原创 2022-08-12 09:05:58 · 6661 阅读 · 0 评论 -
v8引擎垃圾回收与执行js代码过程
的概念,即将原本需要一次性遍历堆内存的操作改为增量标记的方式,先标记堆内存中的一部分对象,然后暂停,将执行权重新交给JS主线程,待主线程任务执行完毕后再从原来暂停标记的地方继续标记,直到标记完整个堆内存。程序中声明的对象首先会被分配到From空间,当进行垃圾回收时,如果From空间中尚有存活对象,则会被复制到To空间进行保存,非存活的对象会被自动回收。v8的内存结构由新生代,老生代,大对象区,代码区,map区,垃圾回收过程主要出现在新生代和老生代。To空间的内存占比是否已经超过25%......原创 2022-07-29 22:33:31 · 468 阅读 · 0 评论 -
js预编译
js预编译过程原创 2022-06-08 16:53:53 · 1314 阅读 · 1 评论