二组！！！

河马河马大河马

已于 2023-03-03 11:30:37 修改

阅读量438

点赞数

文章标签： vue.js javascript 前端

于 2022-12-08 13:07:48 首次发布

本文链接：https://blog.csdn.net/m0_52289188/article/details/128233727

版权

2022/11/8//1

1. 浏览器缓存原理

作用：减少服务器的访问次数，优化性能

类别：缓存分为协商缓存和强制缓存

强制缓存就是从本地直接获取数据（内存缓存，硬盘缓存）

协商缓存是为了，由于数据已被修改本地缓存与信息不匹配，所以协商缓存需要向服务器发送请求，若没变化返回304

31535892=365天

2022 10月6号

2. js的基础数据类型和复杂数据类型

基本数据number string boolean undefine null symbol （栈）

引用类型数组对象函数（堆中）

栈中可以直接赋值，占用空间固定

堆中，存在栈中的是指针指向堆，创建一个对象，对象引用该类型，当没有任何类型引用它才会被销毁

3. 深浅拷贝 - 常用深拷贝方式 - JSON.parse(JSON.stringify(obj))的缺点

深拷贝

1.obj0=JSON.parse(JSON.stringify(obj))

字符串转化为json，json在转化为字符串

如果对象中有函数，undefined，symbol，使用

2.手写

const obj = {
name: 'zs',
family: {
father: 'zs',
mother: 'ls'
},
hobby: ['打游戏', '喝奶茶', '熬夜']
}
const newObj = {}

function deepClone(target, old) {
for (const key in old) {
if (old[key] instanceof Array) {
// 判断是否为数组
// deepCopy 深拷贝; 深复制; 深层复制;
target[key] = []
deepClone(target[key], old[key])
} else if (old[key] instanceof Object) {
// 判断是否为对象
target[key] = []
deepClone(target[key], old[key])
} else {
// TODO...
target[key] = old[key]
}
}
}
deepClone(newObj, obj)

3.lodash的_.clonedeep方法

安装npm i lodash

var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1 === obj2);// false

JSON.parse(JSON.stringify(obj))的缺点

1.里面有new Data（）时间会变成字符串形式，而不是时间形式

2.对象里有function或undefined转化回使数据丢失

3.里面有nan会变成null

4.无法解决循环引用

***循环
- 如果再当前的宏任务里继续添加微任务会怎么执行

会将微任务添加到微任务队列执行结束后直接执行微任务

5. 事件委托

事件委托就是减少事件处理函数，把事件放到父级上，可以减少内存消耗，性能更好，比如说点击li的例子，放到ul上，检测target判断点击那个li，点击li就冒泡到ul上

6. js的作用域

预解析阶段生成作用域，函数，块，模块，全局

闭包

7. 跨域问题

cors

jsonp 动态申请script的src标签

proxy服务器代理

- webpack如何实现跨域在怎么配置

8. 如果有（1,2，3）三个接口按顺序触发，怎么按顺序获得他的结果

启动3调用2在调用1

9. 什么是虚拟DOM？

虚拟dom是普通的js对象，用来描述真实dom情况的对象，不是真实的dom所以叫虚拟dom

本来修改时需要查找整个dom树消耗资源，现在只需要根据虚拟dom对象查找会变得很快

10. vue的双向绑定原理

也就是实现响应式基础

11. vue2和vue3的区别

- 多根的原理
2. vue2的key算法的作用

在diff算法执行时更快找到节点更新虚拟dom

Vue2.0 v-for 中 :key 到底有什么用？ - 知乎

3. 组件的通信方式

props $emit 全局事件总线 vuex

4. vue的修饰符

https://blog.csdn.net/m0_64969829/article/details/122881221

5. axios的封装

2022/12/24

自我介

*******
html语义化语义化优点

html语义化有两方面的优点

1.首先就是对人来说，语义化可以见名知义，方便我们日后修改代码，或者团队其他成员可以通过名字来读懂代码。

2.对机器来说，语义对机器来说，语义化更加友好，方便搜索引擎爬虫的查找，读屏软件可以自动生成目录，也可以根据语义化来生成

块级元素和行级元素

html标签分为的两种，通过设置display inline block

还有很多如none，block，inline ，inline-block，flex

块元素是可以设置宽高并且自己占一行 div p h ul li

行元素不可以设置宽高可以和别的占一行垂直方向的margin和padding无效 span a i b em

inline-block两者优点

分别都有哪些

********
空元素

空元素是指没有子节点和内容的标签元素，

如 br hr img input link meta

src，href，url区别

url ：互联网上的绝对资源的引用，互联网上每一个资源都有对应的url，协议+ip+路径+文件名字，如https：。。。。。。

href：超文本引用，实际上不是为了引用，而是为了能建立连接跳到目标地址（用于连接引用）

src：会下载并应用到文档中（用于替换当前内容）

link（href）和@import（src）

两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

css选择器

id 类标签后代子代兄弟伪类伪元素属性通配符

选择器权重

!important > style 内联> id > class|伪类|属性 >标签|伪元素|后代>子代|兄弟>通配符

优先级

******
css单位

px:

rem:相对于根元素也就是html标签其他如下

em:相对父元素大小，font-size：2em表示父元素大小二倍

vh,vw: 相对于可视窗口的

微信小程序：rpx 2rpx=1px=2物理像素

BFC为什么出现外边距合并问题

为啥没搜到解决之类的见html和css那篇

如何实现响应式布局

html和css那篇下面双飞翼那块

rem和em，px区别

*******
promise

详见promiss

2023/01/07

郑煤机

一面

1，三栏布局

三栏布局就是两侧固定中间自适应的布局，常见我写的html和css的三栏布局，常见有浮动实现，定位实现，百分比实现，还有圣杯布局，和双飞翼布局。

2，localstorage和sessionstorage，cookies区别

1.cookies和他俩都是持久化存储的东西，cookies在同源的http请求中需要携带也就是在服务器端和浏览器端来回传递，
2.而且cookies需要设置有效时长超过时长则会失效，他俩则是本地存储，session是对话存储关闭就失效了，而另外那个一直都有，
3.c大概是4k，另外两个最少5m
3.localstorage如何设置有效时间（使用data.now加上标签

3，localstorage如何设置有效时间（使用data.now加上标签）

4，作用域

作用域，在js代码预解析阶段就会进行变量提升和作用域的确定

全局作用域，函数作用域，块级作用域，模块作用域，eval作用域

eval（接受字符串当js代码执行）在被调用时指向当前作用域，其他时间指向全局作用域，

同时作用域会引出闭包等

b6，原生js实现目标盒子点击后跟着鼠标移动

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div id="box">asdfghj</div>
    <script>
        var box = document.getElementById("box");

        drag(box);

        function drag(obj) {
            document.onmousedown = function (ev) {
                // return false;
                var ev = window.even || ev;
                // ev.clientX:从鼠标到body的距离，box.offsetLeft：conbox的边框到body的距离
                var x = ev.clientX - obj.offsetLeft;//box到鼠标点击位置的水平距离
                var y = ev.clientY - obj.offsetTop;
                document.onmousemove = function (ev) {
                    var ev = window.even || ev;
                    var le = ev.clientX - x;
                    var to = ev.clientY - y;
                    if (le < 0) {
                        le = 0;
                    }
                    if (le > document.documentElement.clientWidth - obj.offsetWidth) {
                        le = document.documentElement.clientWidth - obj.offsetWidth;
                    }
                    if (to < 0) {
                        to = 0;
                    }
                    if (to > document.documentElement.clientHeight - obj.offsetHeight) {
                        le = document.documentElement.clientHeight - obj.offsetHeight;
                    }
                    obj.style.left = le + "px";
                    obj.style.top = to + "px";
                    console.log(le, to)
                }
                document.onmouseup = function () {
                    document.onmousemove = null;
                }
                return false;
            }

        }



    </script>
</body>

</html>

这个是改良后的，滑动绑定在

下面是变形

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0%;
            padding: 0%;
        }

        #box {
            width: 200px;
            height: 50px;
            background-color: aqua;
            position: relative;
        }

        #box p {
            width: 300px;
            height: 200px;
            background-color: coral;
            position: absolute;
            left: 100px;
            top: 100px;
            /* 隐藏 */
            display: none;
            /* 穿透 */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="box">
        yiyi
        <p>自我介绍</p>
    </div>
    <script>
        box.onmouseover = function () {
            this.firstElementChild.style.display = "block"
        }
        box.onmouseout = function () {
            this.firstElementChild.style.display = "none"
        }
        box.onmousemove = function (evt) {
            this.firstElementChild.style.left = evt.offsetX + "px"
            this.firstElementChild.style.top = evt.offsetY + "px"

        }
    </script>
</body>

</html>

鼠标事件，移动与展现，然后相对定位，鼠标移动，距离值赋给移动滑块定位值

7，鼠标移动过快的话，脱离了盒子如何能让盒子继续跟着移动（mousemove）

绑定在doucument上

8，防抖和节流（为该鼠标加上防抖还是节流）

定时器防抖

function debounce(callback, delay) {
var t = null;
return function () {
clearTimeout(t);
t = setTimeout(callback, delay);
};
}

定时器节流

<template>
<div>
<input type="text" @keyup="searchMedicine">
</div>
</template>

<script>

export default {
data() {
return {
changeTime: new Date().getTime()
}
},
methods: {
searchMedicine() {
this.changeTime = new Date().getTime()
// 定时器过滤密集输入
setTimeout(() => {
if (new Date().getTime() - this.changeTime >= 1000) {
this.getDatas()
}
}, 1000)
},
getDatas() {
// 这里写请求
console.log('我是请求返回结果~~~~')
}
}
}
</script>

防抖
var btn = document.getElementById('input');
btn.addEventListener('click', debounce(submit));
function submit() {
console.log(1);
}
function debounce(fn) {
var t = null;
return function () {
if (t) {
clearTimeout(t); // 如果连续触发，则每次都会清除上一个定时器并重新开启一个定时器
}
t = setTimeout(function () {
fn(e)
}, 1000)
}
}

节流
var btn2 = document.getElementById('input2');
btn2.addEventListener('click', throttle(sub, 2000));
function sub() {
console.log(1);
}
function throttle(fn, delay) {
var begin = 0;
return function () {
var cur = new Date().getTime();
console.log(cur - begin);
if (cur - begin > delay) {
fn();
begin = cur;
}
}

}

9，移动端适配

移动端适配

1.viewport

2.rem

设置字体大小相对于根元素，大部分浏览器是16px所以大概1rem=16rpx

3.vm/vh

他俩就是视口的百分比，转化时可能不一定完全整除，会有像素差

4.flex

大屏幕上移动端使用弹性盒子可以更好的布局，弹性盒子配合vm/vh匹配更好

5.1px 问题

这里的1像素指的是CSS像素。因此我们可以发现，在写1px的时候，在不同dpr的物理设备上映射的设备像素是不同的。dpr为2时，映射的像素为2px；dpr3时就映射成3px。这样的话，如果在屏幕尺寸比较大的设备上（准确来说时设备像素比较大），1px渲染出来就样子就会有些粗。

1.使用伪元素 + CSS3``缩放的方式

2.使用动态 viewport + rem 布局的方式（即 Flexible 实现方案）

3.新方案：使用 vw 单位适配方案（将来推荐的一种方案，但目前项目中没有实际应用，故本文不做讨论）

10，vue生命周期，阿贾克斯请求放在哪里

见

12，vue2和vue3的区别，优化点

......

2023/01/10

途游

js数据类型，判断方法

number，string，boolean，null(返回obje），undefined，symbol

数组，对象，函数

typeof 判断简单数据类型，引用数据类型中，对象和数组判断不出来

可以使用

1.instanceteof

2.constructor

3.object.prototype.tostring.call

typeof返回哪几种类型？typeof null的返回值

null返回的是object

闭包，如何解决闭包引起的内存泄露(不用的时候使其为null)

闭包是指在函数访问其他函数的变量，也就是访问的变量不在函数自己的作用域里而在父级作用域里，闭包可以暂存变量，不会被垃圾回收机制回收，防止设置太多全局变量，缺点也是不能回收，会造成占用空间过大，可能会引起内存泄漏，

解决办法是在访问父级变量时，不使用后赋值为空

跨域，有几种方法

跨域有三种常见的解决办法

1.后端的cores允许指定访问

2.jsonp，利用动态申请script标签的src属性，因为src属性不受同源策略的限制

3.proxy服务器代理，可以在project

盒模型，区别

和模型分为标准和模型和怪异盒模型

当不写doctype在低版本浏览器下就会使怪异或者box-size=bordbox

盒模型是文本宽度+padding+boder+margen

设置宽度时普哦那个和模型，时设置的文本宽度，保持不变

怪异是设置文本加padding+margen保持不变

行内元素与块级元素，区别，常用的有哪些

行级元素可多个一行不能设置宽高

块级元素可设置宽高一个占一行

可以设置dispaly，inline-blick

常用的块级元素 div h p

行 em span a

重排和重绘

重排和重绘发生在界面变化是重绘值得是颜色，透明度等变化时，重拍是指宽高等变化时

如何隐藏一个元素(display,visable,透明度，缩小，定位移出可视区域)

dispaly:none

visable:

透明度:

宽高:

定位:

src，href的区别

1.请求资源类型不同
href，超文本引用，用于建立文档与资源的联系，常用的有：link、a。
src，将其所指向的资源下载并应用到当前页面，常见的有script、img。
2.作用结果不同
href，用于文档与资源之间确立联系。
src，请求到的资源替换当前内容。
3.浏览器的解析不同
href，将资源解析成css文件，并行加载请求资源，不会阻塞对当前文档的处理。
src，会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。这也是为什么把js文件放在底部而不是头部发热原因。

cookie，sessionStorage，localStorage

都是本地存储用的

大小 cokie比那俩小

cookie可以设置过期时间，lical不删则有，那个是会话

cookie每次同源请求需要写到

http常见状态码，与https区别

200

201常见成功

304缓存读取成功

301永久转移其他网站了

404未找到

500服务器错误

https=http+ssl

ssl收费价格

默认端口

80

作用域

预解析阶段就会确定作用域

常见有全局作用域，函数作用域，模块作用域，块级作用域，eval的作用域

原型和原型链

原型方便复用，比如说数组的哪些方法

无论是普通对象还是函数对象，都会自动添加一个原型对象，一函数为例，构造函数，实例，实例的原型对象的关系，构造函数的prototype全等于实例的————proto————

实例的原型对象，而实例对象和实例对象的原型对象constuctor都为构造函数，实例对象的原型对象也有自己的原型对象所以的链式结构

es6，箭头函数和普通函数的区别

es6的知识点

（）=>{}

箭头函数使代码结构更简单，

1.箭头函数的this是指向父级作用域，就是可以不看它

2.箭头函数不能new

3.没有argument可以rest

var let const

var 会有变量提升预解析时候上移

let

会有块级作用域

无变量提升

可能会暂时性死区

const和let一样不能改变

vue生命周期

vue2

创建前beforecreated

创建后created这个时候数据已经回来了可以发送请求

渲染前beforemount

渲染后mounted已经根据渲染树渲染出dom元素了可以最早操作dom，也可以在这发送请求

更新前：beforeUptate() 当data的数据发生改变会执行这个钩子，内存中的数据是新的，页面是旧的

更新后：Updated() 内存和页面都是新的

销毁前：beforeDestroy() 即将销毁data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作

销毁后：Destroyed() 已经销毁完毕

vue3

setup

url输入然后的全部过程

1.输入url，url地址解析，请求发送url请求

2.查看本地缓存，有的话渲染

3.没有建立tcp连接

4.发送请求

5.返回响应

6.渲染

详见html和css小知识

2023/01/13

一面 - 11.11

1.flex

弹性盒模型一般在移动端开发时配合rem ，vh，vw使用布局更好

把dispaly设置成felx

属性

主轴方向

flex-direction:row column(reverse)

换行

flex-wrap:nowarp:warp:warp-reverse

justify-content:flex-start | flex-end | center | space-between | space-around

align-items:flex-start | flex-end | center | baseline | stretch

align-content：flex-start | flex-end | center | space-between | space-around

⼦元素 flex:1

order：值越小越靠前

<' flex-grow '>⽤来指定扩展⽐率

<' flex-shrink '>：⽤来指定收缩⽐率

<' flex-basis '>：

元素基础长度

-如果主轴是横向的，则该值指定的就是元素的宽度

-如果主轴是纵向的，则该值指定的就是元素的高度

-默认值是auto,表示参考元素自身的高度或宽度

-如果传递了一个具体的数值，则以该值为准

2.css新特性

1.选择器

1.属性选择器

2.伪元素选择器

2.过度
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
3.变形

transform属性允许你旋转，缩放，倾斜或平移给定元素

transform-origin：转换元素的位置（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0)

使用方式：

transform: translate(120px, 50%)：位移
transform: scale(2, 0.5)：缩放
transform: rotate(0.5turn)：旋转
transform: skew(30deg, 20deg)：倾斜

4.动画

animation也有很多的属性

animation-name：动画名称
animation-duration：动画持续时间
animation-timing-function：动画时间函数
animation-delay：动画延迟时间
animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环
animation-direction：动画执行方向
animation-paly-state：动画播放状态
animation-fill-mode：动画填充模式
CSS3 动画 | 菜鸟教程 (runoob.com)

#七、渐变

5.弹性盒子

....

6.新样式

border-radius：创建圆角边框

box-shadow：为元素添加阴影

border-image：使用图片来绘制边框

新增了几个关于背景的属性，分别是background-clip、background-origin、background-size和background-break

边框阴影，文本阴影

背景排列方式尺寸等等

3.transition和animation的区别

过度和动画都是防止页面僵硬css3新增的属性，过度需要触发，而动画可以设置自动触发循环触发，动画需要定义一个@keyframes，然后绑定到选择器上，而过度选择个属性，设置时间，过渡方式，延迟时间，正向反向播放等

4.display：none和visibility：hidden的区别

前一个控制dom元素的生成和消失，第二个控制显示和隐藏，占位置

5.定位

定位设置position

绝对定位 absolute

最近定位父元素位置，脱离文本流

相对定位 relateve

本身位置，脱离文本流

固定定位 fixed

脱离文本流

粘滞定位 sticky

6.bfc

bfc叫块级格式化作用域就好像是独立的一块区域，

触发条件可以是display inlin block

overflow hidend

浮动

定位absolute或fixed

可以解决浮动塌陷

外边距重叠

7.title

作用

写在标签内，不是样式里
title可以给任何标签使用
可对元素增加一个提示作用即原被作用元素生效后鼠标移入到元素生效的区域不动会提示增加的提示内容
比如 p打印出字体后加入title属性则当鼠标移入对应的字体后会显示提示内容

8.css实现三角形

1.用boder的充满加上透明来实现

2.带边框内测定位放一个大的三角形，可以用伪类来实现

9.水平居中

css实现水平居中的几种方式【冬之乐园】

10.清除浮动

最后加一个元素clear both

overflow 触发bfc

伪元素

count ‘’

display block

clear both

11.js基本数据类型

number string undefined Boolean symble

12.typeof和instaceof

1，基本判断

2.a是对象b 是函数判断a的原型上是否有b的prototype

13.es6新特性

let const

rest也就是...

argument

解构赋值

promise

箭头函数

14.event loop

同步任务，异步任务

宏任务和微任务，宏任务开始，宏任务比如说script标签定时器

微任务 promise的.then方法之后，或者是封装之后的async和await 之间

宏任务开始之后遇到同步任务放入执行栈执行，遇到异步任务，放到时间表格，执行完成后，宏任务微任务放入分别的队列，然后执行完成后，执行微任务，然后再进入宏任务队列取下一个宏任务

15.深拷贝、浅拷贝

对于引用数据对象他们的本体存在于堆中栈中只是存了一个指针，赋值才会造成浅拷贝，

实现深拷贝的方法

1.自己写

2.json.parse(json.stringty())

3.lodash的_.clonedeep方法

安装npm i lodash

var _ = require('lodash');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = _.cloneDeep(obj1);
console.log(obj1 === obj2);// false

16.call、apply、bind的区别

改变数组指向，前两个只是传入参数的区别，第二个是数组

bind需要调用一下

17.闭包

闭包就是函数内部可以访问父级的变量，

18.浏览器从输入url到页面渲染的过程

输入url首先查看缓存，有的话直接用，没有或者改变发送http请求建立连接发送请求，接收响应，然后根据乡音渲染页面

19.get和post请求的区别

1.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据）；
post请求一般是去提交数据。

2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，
不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内；
post请求是没有的长度限制，请求数据是放在body中；

3.get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求。

4.get请求可以被缓存，post请求不会被缓存。

5.get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，但post不能。它的参数不在url中。

6.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）。

20.项目对ajax的封装

21.跨域

1.jsonp运用的是动态申请script标签中的src属性，因为src标签不受同源策略限制，只能发送get

2.服务器代理也就是proxy在packgeconfigjs配置

3.cors跨域资源共享

22.v-model原理

当其作用于表单元素时，vue会根据作用的表单元素类型而生成合适的属性和事件。例如，作用于普通文本框的时候，它会生成value属性和input事件；

而当其作用于单选框或多选框时，它会生成checked属性和change事件。

v-model也可作用于自定义组件，当其作用于自定义组件时，默认情况下，它会生成一个value属性和input事件。

底层原理 get set

23.vue生命周期

24.vuex

25.vue中key的作用

26.$router和$route的区别

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path,
name, params, query 等属性。

this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个
子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何
页面也都可以调用其 push(), replace(), go() 等方法。

27.项目难点

28.将嵌套路由扁平化只让说了大致思路就结束了

二面 - 11.14
说说实现聊天功能的逻辑
用了keep-alive 说说原理
说说diff算法原理
data为什么是个函数
浏览器输入url到呈现页面经历了什么
css的解析会阻塞dom的解析吗会阻塞dom的渲染吗
js的解析会阻塞css吗
说说大顶堆小顶堆这样的数据结构如何实现
写个算法题：力扣的版本号比较

css剧中问题

对父元素设置text-align: center;子元素即可居中。但子元素是有限制的，只对图片，文字等行内元素有效。
　　如果子元素有一定宽度,可以设置子元素display:inline-block;

元素本身设置 margin: 0 auto; 这种方法对能设置宽度的元素起作用（块级元素）.

文字垂直居中

line-heigth = heigth

未知宽高两种基本

响应式常常

1.%

2.vh，vw

3.rem

4.flex

web前端性能优化

页面优化

1.减少http请求

2.避免页面跳转

3.减少dom元素

css

css文件合并压缩

尽量避免表达式

js

封装去除合并文件

图片

可以使用精灵图

懒加载

cookie

少往cookie里面写

垃圾回收机制

垃圾是指没有引用的对象或变量

作用防止内存泄露，同时释放空间

常用标记清除

【JavaScript面试题】垃圾回收机制_纵有千堆雪与长街的博客-CSDN博客

symbol

symbol表示独一无二的值，最大的用途就是确定对象的唯一属性

作为对象属性名时访问不能用.运算符号，要用方括号，.运算符会返回undefined

const a = symbol()

console.log(Symbol() === Symbol());
// expected output: false
console.log(Symbol('foo') === Symbol('foo'));
// expected output: false

z-index

1.作用于待定位属性的

2.z-index:可以设置元素的叠加顺序，但依赖定位属性。
z-index大的元素会覆盖z-index小的元素

数值越大越靠前
3.z-index为负值，元素被普通流中的元素覆盖

4.父元素层级高也会是子元素前面

5.不生效可能

1.没有定位

2.子元素后来居上盖上了，把子元素z-index设置负值

sass

sass是css预处理器让css变成js那种可以有逻辑的，比less强，可读性维护性

变量
$color:white
$bgcoloer:blue


body{
    color:$color
    background-color:$bgcolor
}
可以设置默认值后面加！default；

变量可以是数子，字符，布尔，颜色，空

嵌套

数字运算

河马河马大河马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
二组！！！

2022/11/8//1 1. 浏览器缓存原理 2. js的基础数据类型和复杂数据类型 - 栈和队列的区别 3. 深浅拷贝 - 常用深拷贝方式 - JSON.parse(JSON.stringify(obj))的缺点 ***循环 - 如果再当前的宏任务里继续添加微任务会怎么执行 5. 事件委托 6. js的作用域 7. 跨域问题 - webpack如何实现跨域在怎么配置 8. 如果有（1,2，3）三个接口按顺序触发，怎么按顺序获得他的结果 9. 什么是虚拟DOM？
复制链接

扫一扫