介绍一下 CSS 的盒子模型
1\. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border) 2\. 类型： IE 盒子模型、标准 W3C 盒子模型； 3\. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content) 4\. 而IE盒模型的宽高是指content+padding+border。 5.设置盒模型的方式是：设置box sizing box sizing:content box 标准盒模型 bo...
前端性能优化 - 用RAIL模型分析性能
RAIL是一个以用户为中心的性能模型，它把用户的体验拆分成几个关键点（例如，tap，scroll，load），并且帮你定义好了每一个的性能指标。 有以下四个方面： Response Animation Idle Load <img width="676" height="245" src="../../ resources/1734894ee7aaf2b6 tplv t2oaga2asx 2e5a8010c5bb40479.webp"/...
前端性能优化-CSS性能优化
一、内联首屏关键CSS 渲染的大概流程： 加载HTML资源 解析HTML 加载CSS资源，同时构建DOM树 解析CSS，同时渲染DOM树 当CSS文件过大，就会停留在第3步，网速慢时，打开网站的时候经常遇到没有样式的情况。 所以我们需要先加载部分CSS（首屏需要用到的CSS），其他优先级比较低的CSS就以异步的方式加载。 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的...
网站图片加载慢怎么优化
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？ <a id="t1" </a <a id="1 Sprites 2" </a 1、使用 Sprites 图片技术 它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 能很好地减少网页的 请求，从而大大的提高页面的性能。...
输入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 树节点 通过分词器将...