【面经整理4】await和高频css

最新推荐文章于 2024-11-17 20:40:20 发布

EVELESLIE

最新推荐文章于 2024-11-17 20:40:20 发布

阅读量259

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/EVELESLIE/article/details/129676591

版权

文章介绍了前端开发中的异步编程概念，如asyncawait如何简化Promise的使用，以及解决回调地狱问题。同时，讨论了跨域问题及其解决方案，包括JSONP和CORS。接着，提到了CSS的盒模型、定位方式以及重排重绘的概念。此外，还涵盖了移动端适配策略和BFC（块级格式化上下文）的重要性。最后，文章讨论了Flex布局和常见的布局实现方式。

摘要由CSDN通过智能技术生成

Async await：

什么是Async await：

Async await是异步编程的一种方法，它可以使用同步的方式来实现异步。Async await是基于generator和promise实现的一个语法糖。
Async的返回值是一个promise对象，如果没有返回值，那就会是promise(undefine)
await必须在Async中使用
Async await解决了promise中then嵌套的问题，即回调地狱。回调函数最大的问题是容易形成回调地狱，即多个回调函数嵌套，降低代码可读性，增加逻辑的复杂性，容易出错。

跨域：

什么是跨域：

跨域是浏览器设置的一种保护措施，防止不同源的网页之间获取数据，保证数据的安全。a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

怎么解决跨域问题：

1.通过jsonp来设置跨域
jsonp其实是比较古老的一种跨域方式。它通过给数据包装上一层js函数，再包装上一个json转换来进行数据传输。jsonp能够实现跨域的原理是由于js中的script标签没有跨域的限制。
首先先在客户端写好一个js函数，由于script 标签的特殊性，传回来的数据如果符合js语法就会立即执行。这个时候客户端把执行函数名以url的方式传给服务端，服务器端就会将函数名与服务器数据进行拼接。

2.通过CORS来设置跨域

服务器会发送一个origin请求，里头装了协议主机和端口，服务器检查请求是否能同意访问。如果同意就会发送一个 Access-Control-Allow-Origin回复。
> 3.通过反向代理来设置跨域
以nginx为例，使用nginx作为代理服务器，客户端发送数据给nginx由它代为转发

cookie storage

在这里插入图片描述

盒模型

页面上的每一个元素都可以看成是盒模型，本质是一个矩形盒子。
盒模型分为两类，分别是w3c标准盒模型和IE盒模型。
这两个的差别在于计算盒子的宽高上。
W3C标准盒模型计算整个盒子的宽高时，会算上padding和border。IE盒模型计算盒子宽高时不会计算padding和border。

在这里插入图片描述
如上图模型，在w3c模式下的盒子尺寸是100+102+102 = 140
在IE模式下的尺寸是100.
怎么切换两个模式：

box-sizing:border-box //ie盒模型
box-sizing:content-bix //w3c盒模型

块级元素和行内元素

行内元素会在一行显示，如果这行的位置排满了，才会挤到下一行。行内元素会并排显示。
块级元素单独占用一行，不会并排显示。
块级元素可以设置宽高padding margin，行内元素不能设置padding margin
常见的行内元素有img a span
常见的块级元素有div p ul
块级元素和行内元素可以互相转换
display:block – 显示为块级元素（块级元素默认样式）
display:inline – 显示为行内元素（行内元素默认样式）
display:inline-block – 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性（行内块元素默认属性）

选择器以及优先级

1.！important 优先级10000
2.内联选择器优先级1000 写在标签行内的
3.ID选择器优先级100 .div
4.类别选择器优先级10 #div
5.属性选择器优先级10
6.伪类优先级10 :hover
7.元素选择器优先级1
8.通配符选择器优先级0 *
9.继承选择器没有优先级

定位方式

css中定位有以下几种类型：
static静态定位，少见
relative相对定位，相对于自己之前原来的位置移动，不会脱离标准流
absolute绝对定位：

1．如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档)。
2．如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。3．绝对定位不再占有原先的位置。(脱标)

fixed固定定位
sticky粘性定位
脱标的盒子不会触发外边距塌陷

重排和重绘

浏览器渲染过程

解析HTML生成DOM树
解析CSS文件生成CSSOM树
DOM树和CSSOM树联合起来变成渲染树
根据渲染树计算节点位置信息（重排的流程在此）
根据渲染树和得到的节点位置信息在页面上进行绘制（重绘的流程在此）
重排指的是页面元素的大小、位置、尺寸发生变化，导致浏览器进行重新调整；
重绘指的是页面元素的颜色等不影响布局的属性发生变化。
重排一定会导致重绘，重绘不一定导致重排。

怎么减少重排和重绘：

（1）使用 transform 替代 top
（2）不要把节点的属性值放在一个循环里当成循环里的变量
（3）不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
（4）把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
（5）不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className。

移动端适配方案

Rem适配
rem指的是相对于根元素的像素大小
vw/vh适配
vw/vh是将屏幕直接分为100等份，1vw是1%的屏幕宽度，1vh是1%的屏幕高度
@media媒体查询适配

BFC的理解，最好从概念、特点、应用场景三方面回答

什么是BFC:

BFC指的是Block Formatting Contex块级格式化上下文，具体理解就是相当于使用一个框框住元素，使得元素的布局不受外界的干扰。

什么时候使用BFC:

在实际应用中如果有两个临近块级元素都设置了margin外边距，会出现高度坍塌的情况，这种时候就需要BFC

怎么设置BFC：
根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

flex布局常见属性，解释flex:1含义

flex布局又称为流动布局，启动了flex布局的元素称为container，被它包裹的元素是它的子元素
在这里插入图片描述
在flex container中有两个轴，横向的是主轴，纵向的是交叉轴。通过flex-direction来设置轴向。
flex:1

flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认值是0 1 auto。
flex-grow是如果有剩余空间，是否扩大，0为不扩大
flex-shrink是如果剩余空间不够，是否缩小，1为缩小
flex-basis为项目本身的大小，默认值是auto
下面来分别讲讲 flex:1 flex:auto, flex:0, flex:none的区别
flex: 1
flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%
flex: auto
flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto

两栏布局实现方式

在这里插入图片描述

<body>
    <div class="box">
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
</body>
<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        background-color: gray;
    }
    .right{
        background-color: lightblue;
        flex: 1;
    }
</style>

三栏布局：

在这里插入图片描述

<body>
    <div class="box">
        <div class="left">左边</div>
        <div class="middle">中间</div>
        <div class="right">右边</div>
    </div>
</body>
<style>
    .box{
        display: flex;
    }
    .left{
        width: 200px;
        background-color: gray;
    }
    .middle{
        background-color: blueviolet;
        flex: 1;
    }
    .right{
        width: 200px;
        background-color: lightblue;
        
    }

圣杯布局、双飞翼布局：

在这里插入图片描述

<body>
    <div class="container">
        <div class="center">圣杯</div>
        <div class="left"></div>
        <div class="right"></div>

    </div>

</body>
<style>
    .container{
        padding-left: 200px;
        padding-right: 200px;
    }
    .center{
        float: left;
        background-color: chartreuse;
        width: 100%;
        height: 500px;
    }
    .left{
        margin-left: -100%;
        right:200px;
        float: left;
        width: 200px;
        height: 300px;
        background-color: yellow;
        position: relative;

    }
    .right{
        margin-right: -200px;
        float: left;
        width: 200px;
        height: 300px;
        background-color: red;
    }
</style>