CodingWithAlice

我的一方小天地，如果对你有帮助，那真的太好了

05-3 白屏优化？

05-3 白屏优化？ 白屏定义 - 视觉阶段 阶段一（原来的页面）：发起主页面 HTML 请求后、网络进程拿到数据喂给 渲染进程 前 阶段二（解析白屏）：渲染进程 拿到数据后，会创建一个 空白页面 ，然后 等待 css 和 js 文件加载完成 -> 先生成 CSSOM -> 执行 js -> 合成布局树 -> 首次渲染 阶段三（新页面）：首次渲染完成后，进入完...

Posted by CodingWithAlice on April 9, 2021

05-2 html+js+css是如何解析渲染的

05-2 html+js+css是如何解析渲染的 CSS 是如何工作的 - 按照js是否存在/引入方式不同 1/3、html + css 文件的渲染流程分析 先看下面的一个示例代码 分析一下这段示例代码是怎么渲染的： 核心要注意的几点： 1、渲染进程/浏览器进程，发起的主页面请求被送到 网络进程 中去执行 2、网络进程请求到 HTML 数据后，将其发送给 渲染进程，然后渲染...

Posted by CodingWithAlice on April 9, 2021

05 渲染流程：HTML、CSS和JavaScript是如何变成页面的

05 渲染流程：HTML、CSS和JavaScript是如何变成页面的 渲染流程总结：构建DOM树、样式计算、布局、分层、绘制、栅格化、合成显示，如下图所示 流程总结： 渲染进程 的主线程将 HTML 内容转换为能够读懂的 DOM 树结构 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出DOM节点的样式 创建 布局树，并计算元素的布局信息...

Posted by CodingWithAlice on April 9, 2021

04 导航流程：从输入url到打开页面发生了什么

04 导航流程：从输入url到打开页面发生了什么 看到一篇还不错的更底层的讲解博客：从 URL 输入到页面展现到底发生了什么？ 导航流程：用户发出URL请求到页面开始解析的这个过程 从输入URL到页面展示流程： 1、用户输入 浏览器进程中的 UI 线程 对输入内容做区分，并生成对应 URL： 如果查询关键字是 url – 根据规则，把这段内容加上协议，合成为完整的 UR...

Posted by CodingWithAlice on April 8, 2021

03 为什么很多网站第二次打开速度会很快

03 为什么很多网站第二次打开速度会很快 主要原因是第一次加载页面过程中，缓存了一些耗时的数据 1、DNS缓存：在浏览器本地把对应的IP和域名关联起来 2、同源站点可以复用渲染进程，同时HTTP/1.1 后TCP连接都是默认长连接，节省了建立连接的时间 3、浏览器页面资源缓存 请求一次资源后，只要Cache-Control:Max-age=2000设置的缓存时间还没有过期，如...

Posted by CodingWithAlice on April 8, 2021

03 http请求流程

03 HTTP请求流程 构建请求需要 DNS域名解析后的 ip -> 本文涉及的图文都有误，具体流程查看 导航流程 的【URL 请求流程】部分 HTTP协议：一种允许浏览器向服务器获取资源的协议，是Web的基础。 问：在浏览器地址栏中输入链接，浏览器会做什么呢？ 答：参考如下 HTTP请求示意图 1. 构建请求 首先，浏览器构建请求行信息 GET /index.h...

Posted by CodingWithAlice on April 8, 2021

02 网络协议 - IP/UDP/TCP协议

02 网络协议 - IP/UDP/TCP协议 性能指标：首次渲染时长FP（从页面加载到首次开始绘制的时长） 影响FP的重要因素：网络加载速度 —> 优化速度首先要了解网络协议：HTTP/WebSocket都是基于TCP/IP协议 —> 互联网中的数据是通过数据包来传输的。数据发送的数据很大，通常会被拆分为很多数据包来进行传输，而数据包在传输过程中又有很大概率丢失或者出错。...

Posted by CodingWithAlice on April 7, 2021

浏览器原理 知识图谱

浏览器原理 知识图谱 了解 URL 是怎么变成页面的？ 一、浏览器的5个核心部分 1、浏览器架构设计：每个页面都是独立运行在一个进程里面的 2、js引擎 3、页面工作原理 页面中事件循环系统是如何运作的？ 构建页面的核心流程是什么？（性能问题） 4、浏览器网络 5、浏览器安全

Posted by CodingWithAlice on April 6, 2021

01 浏览器进程

01 浏览器进程组成 + 复用渲染进程 + 进程/线程 总结： 多进程浏览器：包括1个浏览器（Browser）主进程、1个 GPU 进程、1个网络进程、多个渲染进程和多个插件进程 默认情况下，Chrome会为每个Tab标签创建一个渲染进程。（同源：同协议、同域名、同端口『相同站点，复用进程』） 进程适合用于需要独立运行和资源隔离的场...

Posted by CodingWithAlice on April 6, 2021

background属性的使用

background属性的使用 写在前面，这篇主题是结合开发中遇到的问题，对backgroud样式进行一个系统了解学习 （虽然css一向不是我在开发中关注的重点，但是当我跳了几次坑之后，我觉得有必要整理复习一下，以后再也不想跳坑了） 如果你对这个属性非常之了解，可以出门左拐不送哟～ 结论 推荐使用写法 background: url('http://...') no-repeat 0...

Posted by CodingWithAlice on February 4, 2021

FEATURED TAGS
《JavaScript高级程序设计4》 < JS原生基础相关 > < 算法题 > < vue相关知识点 > < CSS相关内容 > < HTTP相关 > < 面试题整理 > < 浏览器原理 > < 工作经验沉淀 > < 小程序 > < webpack > < 工程化 > < database > < 重构2 > < React17+TS4 > < node > < AI >
ABOUT ME

CodingWithAlice

✉️ hao_ling@foxmail.com

FRIENDS