输入URL到显示页面的全过程
从浏览器地址栏输入 url 到显示页面的步骤 <a id="t1" </a <a id=" 2" </a 基础版本 ： 1. 浏览器根据请求的 交给 域名解析 ，找到真实 ，向服务器 发起请求 ； 2. 服务器交给后台处理完成后 返回数据 ，浏览器 接收⽂件 （ 、 、 、图象等）； 3. 浏览器对加载到的资源（ 、 、 等）进⾏语法解析，建立相应的内部数据结构 （如 的 ）； 4. 载⼊解析 到的资源⽂件， 渲染页面 ，完成。 <a...
前端性能优化-白屏时间
一、白屏时间 白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。 二、白屏时间的重要性 当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的 提升用户的体验，减少用户的跳出，提升页面的留存率。 三、白屏的过程 从输入url，到页面的画面展示的过程 1、首先，在浏览器地址栏中输入u...
说下你对DOM树的理解
概念：DOM 是表述 HTML 的内部数据结构，它会将 Web 页面和 JavaScript 脚本连接起来，并过滤一些不安全的内容。 DOM 的生成：通过浏览器渲染引擎内部的 HTML 解析器，将 HTML 字节流转换为 DOM 结构 HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络进程加载了多少数据，HTML 解析器便解析多少数据 DOM 生成简单过程：HTML 字节流 分词器 DOM 节点 DOM 树节点 通过分词器将...
重排(reflow)和重绘(repaint)
页面生成的过程： 1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4.生成布局(flow)，浏览器在屏幕上“画”出渲染树中的所有节点； 5.将布局绘制(paint)在屏幕上，显示出整个页面。 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲...