前端学习博客

浏览器渲染更新原理

跨域：指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全措施。同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN。

【再学浏览器页面渲染】文章目录【再学浏览器页面渲染】浏览器的内部结构Chrome 多进程架构浏览器多进程的优势浏览器中页面的渲染过程1. 页面导航过程2. 页面渲染过程注意点：浏览器的内部结构从结构上来说，浏览器主要包括了八个子系统：用户界面、浏览器引擎、渲染引擎、网络子系统、JavaScript 解释器、XML 解析器、显示后端、数据持久性子系统。这些子系统组合构成了我们的浏览器。页面的加载和渲染过程，离不开网络子系统、渲染引擎、JavaScript 解释器和浏览器引擎。Chrome 多进程

浏览器缓存 && 浏览器本地存储（总结）文章目录浏览器缓存 && 浏览器本地存储（总结）一、浏览器缓存(http缓存)相关术语1. 对浏览器的缓存机制的理解2. 浏览器资源缓存的位置有哪些？3. 协商缓存和强缓存的区别（http缓存、缓存策略、缓存过程）（1）强缓存ExpiresCache-Comtrol（2）协商缓存Last-Modify/If-Modify-SinceETag/If-None-Match（3）既生Last-Modified何生Etag？4. 为什么需要浏

【浏览器渲染原理】步骤及优化文章目录【浏览器渲染原理】步骤及优化一、对浏览器内核的理解二、浏览器的主要组成部分三、浏览器的渲染过程四、浏览器渲染优化① 针对JavaScript：② 针对CSS：③ 针对DOM树、CSSOM树：④ 减少回流与重绘：五、渲染过程中遇到 JS 文件如何处理？六、什么是文档的预解析？七、CSS 如何阻塞文档解析？八、如何优化关键渲染路径？九、什么情况会阻塞渲染？十、回流与重绘① 回流与重绘的概念及触发条件（1）回流（重排）（2）重绘② 如何避免回流与重绘？③ 如何优化动画？十一、

【前端浏览器】之进程与线程文章目录【前端浏览器】之进程与线程1. 进程与线程的概念2. 进程和线程的区别3. 浏览器渲染进程的线程有哪些4. 进程之前的通信方式5. 僵尸进程和孤儿进程是什么？6. 死锁产生的原因？ 如果解决死锁的问题？7. 如何实现浏览器内多个标签页之间的通信?1. 进程与线程的概念从本质上说，进程和线程都是 CPU 工作时间片的一个描述：进程描述了 CPU 在运行指令及加载和保存上下文所需的时间，放在应用上来说就代表了一个程序。线程是进程中的更小单位，描述了执行一段指令所需的

【浏览器工作原理与实践三】：浏览器中的网络文章目录【浏览器工作原理与实践三】：浏览器中的网络一、HTTP1：HTTP性能优化超文本传输协议 HTTP/0.9被浏览器推动的 HTTP/1.0那么该如何实现多种类型文件的下载呢？缝缝补补的 HTTP/1.11. 改进持久连接2. 不成熟的 HTTP 管线化3. 提供虚拟主机的支持4. 对动态生成的内容提供了完美支持5. 客户端 Cookie、安全机制总结二、HTTP2：如何提升网络速度HTTP/1.1 的主要问题第一个原因，TCP 的慢启动。第二个原因，同时开

【浏览器工作原理与实践笔记二】：浏览器中的页面循环系统文章目录【浏览器工作原理与实践笔记二】：浏览器中的页面循环系统一、消息队列和事件循环：页面是怎么活起来的使用单线程处理安排好的任务在线程运行过程中处理新任务处理其他线程发送过来的任务处理其他进程发送过来的任务消息队列中的任务类型如何安全退出页面使用单线程的缺点第一个问题是如何处理高优先级的任务第二个是如何解决单个任务执行时长过久的问题。总结二、Webapi：setTimeout是怎么实现的浏览器怎么实现 setTimeout使用 setTimeout

【浏览器工作原理与实践笔记一】：宏观视角上的浏览器文章目录【浏览器工作原理与实践笔记一】：宏观视角上的浏览器一、Chrome架构：仅仅打开了1个页面，为什么有4个进程二、TCP协议：如何保证页面文件能被完整送达浏览器⼀个数据包的“旅程”1. IP：把数据包送达目的主机2. UDP：把数据包送达应⽤程序3. TCP：把数据完整地送达应⽤程序总结三、HTTP请求流程：为什么很多站点第二次打开速度会很快浏览器端发起HTTP请求流程1. 构建请求2. 查找缓存3. 准备IP地址和端口4. 等待TCP队列5. 建⽴

Event Loop(事件循环)文章目录Event Loop(事件循环)Ⅰ基本概念事件队列（Task Queue）Ⅱ 宏任务(macro task)和微任务(micro task)MacroTask（宏任务）MicroTask（微任务）Ⅲ -node环境下的事件循环机制① 与浏览器环境有何不同?② Node的宏任务和微任务③ Node事件循环的顺序Ⅰ基本概念javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程意味着，javascript代

浏览器中的JavaScript线程文章目录浏览器中的JavaScript线程一、进程和线程什么是并行处理进程 VS 线程进程和线程之间的关系有以下4个特点二、单进程浏览器时代问题1：不稳定问题2：不流畅问题3：不安全三、多进程浏览器时代早期多进程架构⽬前多进程架构引出的问题四、定时器引发的思考Ⅰ-定时器真是定时执行的吗?Ⅱ-定时器回调函数是在分线程执行的吗?Ⅲ-定时器是如何实现的?五、JS是单线程的如果在执行JavaScript代码的过程中，有异步操作呢？为什么js要用单线程模式, 而不用多线程模式?一

文章目录CookieLocalStorageSessionStorageCookie、LocalStorage、SessionStorage区别SessionSession 的缺点JWTCookieCookie是一种存储机制，当我们第一次请求网页内容的时候是没有任何cookie的，服务器在收到请求以后会在HTTP响应里添加头部Set-Cookie，并且在Set-cookie里进行标识，在下一次请求的时候浏览器就会在HTTP请求里添加头部Cookie，并且用上Set-Cookie里的标识，这样服务器就可

文章目录一.浏览器组成1. 对浏览器内核的理解2. 浏览器的主要组成部分二、浏览器渲染原理1.浏览器的渲染过程步骤一：步骤二：步骤三：步骤四：步骤五：2.相关概念①重排(更新元素的几何属性)②重绘(更细元素的绘制属性)③直接合成阶段三.浏览器渲染优化**(1)针对JavaScript：****(2)针对CSS：****(3)针对DOM树、CSSOM树：****(4)减少回流与重绘：**一.浏览器组成浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资

浏览器安全XSS攻击1.什么是XSS攻击？概念XSS全程是Cross Site Scripting,为了和"CSS"区分开来，故简称XSS。翻译过来就是"跨站脚本"。XSS攻击是指黑客往HTML文件中或DOM中注入恶意脚本，从而在用户浏览页面时，利用注入的恶意脚本对用户实施攻击的一种手段。最开始的时候，这种攻击是通过跨域实现的，所以叫"跨域脚本"。但是发展到如今，往HTML文件注入恶意代码的方式越来越多，所以是否跨域注入脚本已经不是唯一的注入手段了，但是XSS这个名字却一直保留至今。XSS 的本