前端基础（五）- 性能优化

元素可编辑属性

标签上添加contenteditable属性，则该标签变得可以像input一样可编辑输入：

    <div
      contenteditable="true"
      style="height: 100px; background-color: aqua; color: black"
    ></div>

盒模型

简单来说就是一个元素在页面当中所占据的大小

• 占据宽高的属性：width、height、content（内容）、margin、padding、border

CSS定义颜色的方式

• background：white
• background：#000000
• background：rgb（0,0,0）
• background:rgba(0,0,0,1)
• background:hsl(120,80%,90%)
• background:hsla(120,80%,90%,0.8)

性能优化体系

网站性能优化对用户留存率和转化率有很大影响，我们简单将性能优化分为两个大类：1. 加载时优化 2. 运行时优化

加载时性能

对于加载时优化主要解决的是让网站加载更快的一个过程，如压缩文件包，使用CDN等，而检测该指标可以看首屏时间和白屏时间：

• 首屏时间：从输入URL到首屏页面渲染完成的时间
• 白屏时间：从输入URL到页面开始显示内容的时间

白屏时间获取