![](https://img-blog.csdnimg.cn/2020060722263794.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
浏览器
文章平均质量分 93
一步一个脚印,为了学习而学习
Free Joe
我本微末凡尘,却也心向天空
展开
-
优化浏览器主线程执行的几个API,着重讲解 requestIdleCallback 与 requestAnimationFrame
为了提高浏览器的性能和用户体验,现代浏览器采用了一些技术来优化主线程的执行。本文将提供浏览器因JS耗时任务导致页面卡顿的部分解决方案。 - `setTimeout` 延迟加载 (使用不当可能适得其反) - `web worker` 多线程 (不能操作dom,主要计算密集型的任务) - `requestIdleCallback` 帧空闲时运行 (react18带🔥的,低优先级任务) - `requestAnimationFrame` 每帧都会运行 (主要做动画效果调优)原创 2024-04-22 12:05:56 · 1305 阅读 · 0 评论 -
优化关键渲染路径(如何缩短页面首绘时长)
在衡量 Web 页面性能的时候有一个重要的指标叫“FP(First Paint)”,是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率,更快的页面响应意味着更多的 PV(Page View)、更高的参与度,以及更高的转化率。原创 2020-07-04 15:33:20 · 774 阅读 · 0 评论 -
页面的渲染流程、渲染阻塞以及JS Event loop
从输入URL到页面过程页面渲染流程渲染进程里面的线程(浏览器内核)浏览器内核中线程之间的关系阻塞渲染css加载是否会阻塞dom树加载?改变脚本加载次序(defer与asysn)从Event Loop谈JS的运行机制事件循环机制事件循环机制补充说明:(涉及JS引擎线程和事件触发线程)聊一聊定时器事件循环进阶:macrotask与microtask原创 2020-07-01 22:17:11 · 1457 阅读 · 2 评论 -
HTTP知识点收录
搞懂HTTP和HTTPS协议HTTP是一个无状态的协议?你真的了解get和post的区别了吗HTTP状态码HTTP请求头HTTP缓存原创 2020-06-25 16:34:10 · 131 阅读 · 0 评论 -
浏览器一个Tab对应一个渲染进程?浏览器渲染进程个数究竟与什么有关系(多进程浏览器Chrome为例)
- 父页面的打开的子页面在没有跨域访问的情况下,是会共用父页面的渲染进程的。(more tab one process)- 页面中采用iframe框架引入其他页面,则iframe会独立成辅助框架,有自己的渲染进程。(one tab more process)- 共用渲染进程的数个页面,当顶级的父页面关闭了或者跨域了,则会禅让该渲染进程。- 新建的标签页也会合并为一个渲染进程,仅限不进行搜索查询的时候,这是谷歌刘浏览器的内存优化策略。原创 2020-06-24 15:33:27 · 1992 阅读 · 0 评论 -
浅析HTTP缓存
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。当 web 缓存发现请求的资源已经被存储且未过期,它会拦截请求,返回该资源的拷贝,而不会去源服务器重新下载。原创 2020-06-23 02:46:48 · 426 阅读 · 0 评论 -
一文了解HTTP请求流程!Web请求时HTTP与TCP/IP协议间的关系
HTTP 协议,正是建立在 TCP 连接基础之上的,属于应用层协议。>HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础。原创 2020-06-22 17:12:28 · 1120 阅读 · 0 评论 -
Web 中的 TCP/IP 是如何工作的?一个数据包是如何正确传达到目标主机对应程序中的?
互联网,实际上是一套理念和协议组成的体系架构。其中,协议是一套众所周知的规则和标准,如果各方都同意使用,那么它们之间的通信将变得毫无障碍。了解一下OSI七层模型和TCP/IP协议的关系:TCP/IP是一组协议的代名词,包括许多别的协议,组成了TCP/IP协议簇。TCP/IP是基于TCP和IP这两个最初的协议之上的不同通信协议大的的集合。TCP/IP四层模型 则是合并数据链路层以及物理层为网络接口层。一个数据包的旅程互联网中的数据是通过数据包来传输的。如果发送的数据很大,那么该数据就会被拆分为很原创 2020-06-22 02:41:37 · 1101 阅读 · 1 评论 -
重排、重绘、合成以及如何优化(基于Chrome)
重排又称重构、回流,当我们通过JavaScript或者CSS修改了元素的几何位置属性,例如改变元素的宽度、高度等,那么浏览器会触发重新布局,解析之后的一系列子阶段。repaint是在一个元素的外观被改变,但没有改变布局的情况下发生的,如改变了visibility、outline、background等。当repaint发生时,浏览器会验证DOM树上所有其他节点的visibility属性。原创 2020-06-21 21:58:18 · 1473 阅读 · 1 评论 -
层叠上下文 渲染图层 复合图层(硬件加速)区别与联系
拥有层叠上下文属性的元素会生成一个新的层叠上下文对象,每个层叠上下文对象都是一个渲染图层,</font>渲染图层与复合图层是不同的概念,<font color=oran>渲染图层更像是一个纯二维的概念,无论其怎么层叠覆盖最终都归依于根层叠上下文。而复合图层则完全脱离根层叠上下文,相当于开辟新的位面。原创 2020-06-21 15:53:30 · 4456 阅读 · 0 评论 -
页面的渲染流程(Chrome)
编写好的HTML、CSS、JavaScript等文件,经过浏览器就会显示出页面,这经历了什么过程呢?原创 2020-06-18 00:07:48 · 3317 阅读 · 0 评论 -
浏览器导航过程发生了什么?(Chrome)
当你在浏览器中字符,按下Enter键后,浏览器是怎么渲染出一个新的页面的呢?期间都经历了什么.简单记忆一次导航过程:- DNS 查询- TCP 连接- HTTP 请求即响应- 服务器响应- 客户端渲染原创 2020-06-13 17:25:48 · 772 阅读 · 0 评论 -
剖析浏览器中的进程与线程
- 进程是cpu资源分配的最小单位,也是独立运行的最小单位(一个进程就是一个程序的运行实例)- 线程是cpu调度的最小单位(线程是不能单独存在的,它是由进程来启动和管理的,一个进程中可以有多个线程,进程内的线程共享进程全部资源)原创 2020-06-07 22:22:44 · 951 阅读 · 0 评论 -
浏览器的组成部分有什么? 主流浏览器的内核与JS引擎的种类
浏览器主要由SHELL和内核两部分组成,其中内核又分为渲染引擎和JS引擎。SHELL就是浏览器的用户界面,渲染引擎主要用于获取网页结构、添加CSS样式、计算网页结构等;JS引擎用于解析JavaScript语言,为网页添加动态效果。原创 2020-06-07 22:20:06 · 2089 阅读 · 0 评论