输入URL到显示页面的全过程
从浏览器地址栏输入 url 到显示页面的步骤 <a id="t1" </a <a id=" 2" </a 基础版本 ： 1. 浏览器根据请求的 交给 域名解析 ，找到真实 ，向服务器 发起请求 ； 2. 服务器交给后台处理完成后 返回数据 ，浏览器 接收⽂件 （ 、 、 、图象等）； 3. 浏览器对加载到的资源（ 、 、 等）进⾏语法解析，建立相应的内部数据结构 （如 的 ）； 4. 载⼊解析 到的资源⽂件， 渲染页面 ，完成。 <a...
什么是BFC ？如何创建 BFC ？BFC 有什么用
一、什么是BFC （Block Formatting Context）： BFC（块级格式化上下文）是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域指对块级元素起作用。 BFC可以让元素成为隔离独立的容器，且容器内的子元素不会影响到外面的布局。 二、BFC 有什么用： 1）防止外边距重叠 BFC导致的属于同一个BFC中的子元素的margin重叠。(Box垂直方向的距离由margin决定...
前端性能优化-白屏时间
一、白屏时间 白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。 二、白屏时间的重要性 当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的 提升用户的体验，减少用户的跳出，提升页面的留存率。 三、白屏的过程 从输入url，到页面的画面展示的过程 1、首先，在浏览器地址栏中输入u...
CSS 中 position 有哪些值
position：允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。 ：静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置 ——这里没有什么特别的。 ：与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠。 如果不设置 top,right,bottom,left，则基本与stat...
说下你对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)在屏幕上，显示出整个页面。 第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲...
css3新特性
2.过渡 过渡，是我在项目里面用得最多的一个特性了！也相信是很多人用得最多的一个例子！我平常使用就是想让一些交互效果（主要是hover动画），变得生动一些，不会显得那么生硬！好了，下面进入正文！ 引用菜鸟教程的说法：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。 2 1语法 栗子1 栗子2 上面栗子是简写模式，也可以分开写各个属性（这个在下面就不再重复...