一、响应式设计
1、是什么？
是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。
2、常见特点
（1）同时适配PC+平板+手机等
（2）标签导航在接近手持终端设备时改变为经典的抽屉式导航
（3）网站的布局会根据视口来调整模块的大小和位置
3、实现方式
基本原理：通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
width=device-width：指自适应手机屏幕的尺寸宽度
maximum-scale：是缩放比例的最大值
initial-scale：是缩放的初始化
user-scalable：是用户的可以缩放的操作
实现响应式布局的方式有如下：
（1）媒体查询
当视口在375px~600px之间，设置字体大小为18px
@media screen (min-width:375px) and (max-width:600px){
body{font-size:18px;}
}
（2）百分比
当浏览器的宽高发生变化时，通过百分比单位，可以使浏览器中的组件的宽高随着浏览器的变化而变化，从而实现响应式效果。
height、width的百分比属性依托于父标签的宽高，但是其他盒子属性不完全依赖父元素：
子元素的top/left/bottom/right如果设置百分比，则相对于直接非static定位的父元素的宽高
子元素的padding如果设置百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width，而与父元素的height无关。
子元素的margin如果设置成百分比，不管是垂直还是水平方向，都相对于父元素的width
border-radius如果设置为百分比，则是相对于自身宽度。
（3）vw/vh
vw相对于视图窗口宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的1%
（4）rem
相对于根元素html的font-size属性，默认浏览器字体大小是16px，即1rem=16px
可以结合媒体查询针对不同设备的分辨率改变font-size的值
@media screen and (max-width:414px){
html{
font-size:18px
}
}
（5）主流UI框架的栅栏布局实现响应式
element-ui antd
4、优缺点：
优点：面对不同分辨率设备灵活性强；能够快捷解决多设备显示适应问题
缺点：仅适用布局、信息、框架并不复杂的部门类型网站；兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间变长；其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
二、CSS提高性能的方法
1、内联首屏关键CSS
通过内联css关键代码可以在下载完首屏html文件就可以立刻渲染，css内联使用使渲染时间提前
如果外部使用css代码，在解析html结构过程中遇到外部css文件，才会开始下载css代码再渲染
注意：较大的css代码不适合内联（初始拥塞窗口，没有缓存）
2、异步加载css
在css文件请求、下载、解析完成之前，css会阻塞渲染，浏览器将不会渲染任何已处理的内容。加载完内联代码后，后面的外部引用css没必要阻塞浏览器渲染，此时可以采取异步加载的方式：
（1）使用JavaScript将link标签查到head标签最后
// 创建link标签
const myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
// 插入到header的最后位置
document.head.insertBefore(
myCSS,
document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling
);
（2）设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设置为screen或all，从而让浏览器开始解析css
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
（3）通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。加载完成之后，将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
3、资源压缩
利用webpack、gulp/grunt、rollup等模块化工具，将css代码进行压缩，使文件变小，大大降低了浏览器的加载时间
4、合理使用选择器
css匹配的规则是从右往左匹配，例如#id .class h3的匹配规则为：先找到h3元素，然后去除祖先不是.class的元素，最后去除祖先不是#id的元素。
如果嵌套的层级更多，页面中的元素更多，那么匹配所要花费的时间代价自然更高，所以：
（1）不要嵌套使用过多复杂选择器，最好不要三层以上。
（2）使用id选择器就没必要再进行嵌套
（3）通配符和属性选择器效率最低，避免使用
5、减少使用昂贵的属性
页面发生重绘的时候，昂贵属性如box-shadow、border-radius、filter、透明度、:nth-child等，会降低浏览器的渲染性能
6、不要使用@import
@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时，而且多个@import可能会导致下载顺序紊乱
7、其他
