![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
浏览器
文章平均质量分 71
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
GPU硬件加速的原理
引入面试中可能会经常会碰到怎么解决动画卡顿的问题,然后会引导到硬件加速。那么究竟什么是硬件加速,为什么它可以提高咱们的动画效率?我们今天就来一探究竟。首先,我们先从 CPU 和 GPU 开始了解。CPU 和 GPU 的区别CPU 即中央处理器,GPU 即图形处理器。CPU是计算机的大脑,它提供了一套指令集,我们写的程序最终会通过 CPU 指令来控制的计算机的运行。它会对指令进行译码,然后通过逻辑电路执行该指令。整个执行的流程分为了多个阶段,叫做流水线。指令流水线包括取指令、译码、执行、取数、写回五原创 2022-05-16 17:43:34 · 5761 阅读 · 0 评论 -
实现可过期的localstorage数据
惰性删除惰性删除是指某个键值过期后,该键值不会被马上删除,而是等到下次被使用的时候,才会被检查到过期,此时才能得到删除。实现方法是,存储的数据类型是个对象,该对象有两个key,一个是要存储的value值,另一个是当前时间。获取数据的时候,拿到存储的时间和当前时间做对比,如果超过过期时间就清除Cookie。定时删除每隔一段时间执行一次删除操作,并通过限制删除操作执行的次数和频率,来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。实现过程原创 2022-05-12 14:25:20 · 363 阅读 · 0 评论 -
浏览器多页标签通讯
前言文章开始之前我先解释一下什么是浏览器标签页面之间通信,通俗点讲就是我在浏览器中开了多个窗口,在其中一个窗口做了一些行为等其它的窗口不用刷新也能有相关表现。比如我在浏览器开一个商品信息窗口,一个购物车窗口,我在商品信息窗口某个商品上点击加入购物车,购物车窗口中就自动多出一个商品,不用去手动刷新,这就是两个标签页面之间的通信,那么怎么实现呢?有四种方式(我目前就知道这么多),接下来我就一一演示并详细解释其原理。浏览器localStoragelocalStorage.setItem设置数据在另一个标签原创 2021-05-21 10:31:28 · 204 阅读 · 0 评论 -
sessionStorage、localStorage 、cookies、token、session、jwt区别
cookies、sessionStorage、localStorage 和 indexDB 的区别是否在http请求只能够携带cookie数据始终在同源的http请求中携带,跨域需要设置withCredentials = truesessionStorage和localStorage、indexDB不会自动把数据发给服务器,仅在本地保存存储大小cookie数据大小不能超过4k;sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以原创 2021-05-08 14:18:08 · 792 阅读 · 4 评论 -
从输入url到页面加载完成发生了什么?梳理
1、浏览器的地址栏输入URL并按下回车。1、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。2、DNS解析URL对应的IP。3、根据IP建立TCP连接(三次握手)。4、HTTP发起请求。5、服务器处理请求,浏览器接收HTTP响应。6、渲染页面,构建DOM树。7、关闭TCP连接(四次挥手)。1.查找当前URL是否存在缓存,并比较缓存是否过期。浏览器缓存,HTTP缓存有多种规则,根据是否需要重新向服务器发起请求来分类,将其分为强制缓存,协商缓存。浏览器会先判断强缓存能否命中,命中的话原创 2021-04-14 17:35:34 · 1145 阅读 · 0 评论 -
浏览器进程与线程的概念
浏览器是多进程的,有一个主控进程,以及每一个tab页面都会新开一个进程(某些情况下多个tab会合并进程)进程包括主进程,插件进程,GPU进程,浏览器渲染进程(浏览器内核)等等1.GUI渲染线程负责渲染浏览器界面,解析HTML,CSS,构建DOM树和RenderObject树,布局和绘制等。当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行注意,GUI渲染线程与JS引擎线程是互斥的,当JS引擎执行时GUI线程会被挂起(相当于被冻结了),GUI更新会被保存在原创 2021-04-14 15:00:41 · 152 阅读 · 0 评论