前端学习记录

盒子模型

Flex 排版的核心是 display:flex 和 flex 属性，它们配合使用。具有 display:flex 的元素我们称为 flex 容器，它的子元素或者盒被称作 flex 项。

flex 项如果有 flex 属性，会根据 flex 方向代替宽 / 高属性，形成“填补剩余尺寸”的特性，

Flex 的原理

垂直居中

<div id="parent">
  <div id="child">
  </div>
</div>

#parent {
  display:flex;
  width:300px;
  height:300px;
  outline:solid 1px;
  justify-content:center;
  align-content:center;
  align-items:center;
}
#child {
  width:100px;
  height:100px;
  outline:solid 1px;
}

两列等高

<div class="parent">
  <div class="child" style="height:300px;">
  </div>
  <div class="child">
  </div>
</div>
<br/>
<div class="parent">
  <div class="child" >
  </div>
  <div class="child" style="height:300px;">
  </div>
</div>

.parent {
  display:flex;
  width:300px;
  justify-content:center;
  align-content:center;
  align-items:stretch;
}
.child {
  width:100px;
  outline:solid 1px;
}

自适应宽度

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>


.parent {
  display:flex;
  width:300px;
  height:200px;
  background-color:pink;
}
.child1 {
  width:100px;
  background-color:lightblue;
}
.child2 {
  width:100px;
  flex:1;
  outline:solid 1px;
}

浏览器解析

浏览器工作:

1. 通过 http或者https 向服务端请求页面
2. 请求回来的html 经过解析 构建DOM 数
3. 计算树上的css属性
4. 根据css 属性对元素进行渲染 得到内存中的位图
5. 位图进行合成 合成之后绘制到界面上

从域名到 IP 地址，需要用 DNS 协议查询

HTTP 协议是用 TCP 传输的，所以会有 TCP 建立连…

如果使用 HTTPS，还有有 HTTPS 交换证书

每个网页还有图片等请求

性能优化

性能应该是基于业务和实际用户体验需求的一种工程实施

性能问题可以分成很多方面，最重要的几个点是

页面加载性能(跟用户的流失率有非常强的关联性，而用户流失率，正是公司业务非常看重的指标)；
动画与操作性能；
内存、电量消耗。

因此优化重点放在页面加载性能上

用户平均加载时间(数字大约是 1 秒)

技术方案:
缓存:
降低请求成本
减少请求数
减少传输体积 避免大图片 使用svg