「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
谈谈你平时都用了哪些方法进行性能优化？
减少http请求次数、打包压缩上线代码、使用懒加载、使用雪碧图、动态渲染组件、CDN加载包。
知道lodash吗？它有哪些常见的API ？
Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。
_.cloneDeep 深度拷贝
_.reject 根据条件去除某个元素。
_.drop(array, [n=1] ) 作用：将 array 中的前 n 个元素去掉，然后返回剩余的部分.
为什么要清除浮动，因为浮动的盒子脱离标准流，如果父盒子没有设置高度的话，下面的盒子就会撑上来。
1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）
2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
3.使用after伪元素清除浮动（推荐使用）
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
｝
4.使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
\
页面布局常用的方法有浮动、定位、flex、grid网格布局、栅格系统布局
浮动：
- 优点：兼容性好。
- 缺点：浮动会脱离标准文档流，因此要清除浮动。我们解决好这个问题即可。
绝对定位
- 优点：快捷。
- 缺点：导致子元素也脱离了标准文档流，可实用性差。
flex 布局（CSS3中出现的）
- 优点：解决上面两个方法的不足，flex布局比较完美。移动端基本用 flex布局。
网格布局（grid）
- CSS3中引入的布局，很好用。代码量简化了很多。
利用网格布局实现的一个左右300px中间自适应的布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html * {
padding: 0;
margin: 0;
}
/* 重要：设置容器为网格布局，宽度为100% */
.layout.grid .left-center-right {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px; /* 重要：设置网格为三列，并设置每列的宽度。即可。*/
}
.layout.grid .left {
background: red;
}
.layout.grid .center {
background: green;
}
.layout.grid .right {
background: blue;
}
</style>
</head>
<body>
<section class="layout grid">
<article class="left-center-right">
<div class="left">
我是 left
</div>
<div class="center">
<h1>网格布局解决方案</h1>
我是 center
</div>
<div class="right">
我是 right
</div>
</article>
</section>
</body>
</html>
栅格系统布局
优点：可以适用于多端设备
