如何让一个盒子快速居中
node，react，webpack，服务器部署，前端安全，浏览器，vite，数据结构
css
如何让一个盒子快速居中
1
2
3
4
5
6
7
8
9
10
11
12
13
| * {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
}
|
1
2
3
4
| <body>
<div class="box">
</div>
</body>
|
方法：给box加margin：auto，body加display：flex；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <style>
* {
margin: 0;
padding: 0;
}
body,html {
width: 100%;
height: 100%;
}
.box {
width: 200px;
height: 200px;
background-color: pink;
margin: auto;
}
body {
display: flex;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
|
margin和padding有何不同
作用对象不同，margin作用于外部对象，padding作用于自身
vw和百分比有何区别
百分比有继承关系，vw只和设备的宽度有关系
行内元素与块级元素的区别
行内元素的宽度由它的内容决定，而块级元素的宽度具有继承关系，默认继承父元素的宽度
块级width的默认值是父元素的100%,一般情况下不用设置就可以满足需求。height的默认值是里面内容的高度,也就是auto,一般写代码的时候也不需要给元素设置高度,如果设置了高度而且设置的高度不够的时候，就会出现元素重叠的情况。
如何让谷歌浏览器支持小字体
使用scale
1
2
3
4
| p {
font-size: 12px;
transform: scale(.51);
}
|
js
let与var&const
var的三个问题：
1.声明提升=>先上车后买票
2.没有局部作用域=>红杏出墙
1
2
3
4
5
6
7
| function func(){
for(var i=0;i<5;i++){
}
console.log(i)
}
func()
|
3.声明覆盖=>变量污染
1
2
3
| var name2='huahua'
var name2='lala'
console.log(name2);
|
const：
const 声明之后必须赋值，否则报错
const定义的值不能修改，否则报错
支持let的其他属性
解构相关
如何使用第三方变量交换a，b的值
1
2
3
4
5
| let a = 1;
let b = 2;
[a, b] = [b, a]
|
如何去重 arr=[12,43,23,12,43,55]?
1
| let item = [...new Set(arr)]
|
promise
请问以下代码输出顺序？
1
2
3
4
5
6
7
8
9
10
| const promise = new Promise((resolve, reject)=>{
console.log(1)
resolve()
console.log(2)
})
promise.then(()=>{
console.log(3)
})
console.log(4)
|
output 1 2 4 3
标杆：构造函数同步执行
.then()异步执行
深拷贝与浅拷贝
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
let arr = [1,2,3];
let newArr = arr;
newArr.push(4)
console.log(arr,newArr)
let arr = [[1,2,3],[4,5,6]]
let newArr=[...arr]
newArr[0].push(666)
console.log(arr,newArr)
let list = [
{id:1,name:'huahua',age:800},
{id:2,name:'xielian',age:817},
{id:3,name:'lala',age:800},
]
let newList = JSON.parse(JSON.stringify(list))
newList.push({id:6})
console.log(list,newList)
function deepClone(source){
const targetObj = source.constructor === Array ? []:{};
for (let keys in source) {
if(source.hasOwnProperty(keys)){
if(source[keys] && typeof source[keys]==='object'){
targetObj[keys]=deepClone(source[keys])
}else {
targetObj[keys]=source[keys]
}
}
}
return targetObj
}
let obj={
name:'huahua',
age:18,
a:{
id:1,
class:'203'
}
}
let newObj=deepClone(obj)
newObj.name="hh"
console.log(obj,newObj)
|
this指向问题
见我的另一篇博客
闭包
为什么要有闭包？
- 编码变量被污染
- 私有化
- 保存变量，常驻内存
防抖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
let telInput = document.querySelector('input')
telInput.addEventListener('input',antiShake(demo,2000))
function antiShake(fn,wait){
let timeOut=null
return args => {
if(timeOut) clearTimeout(timeOut)
timeOut = setTimeout(fn,wait)
}
}
function demo(){
console.log('发起请求');
}
|
节流
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
let box = document.querySelector(".box")
console.log(box)
box.addEventListener("touchmove",(e)=>{
console.log("发起请求");
})
function throttle(event, time){
let timer = null
return function() {
if(!timer){
timer=setTimeout(()=>{
event()
timer=null
},time)
}
}
}
|
null与undefined
- null表示无对象 0
- undefined 表示无的元素值 NaN
以下几种undefined情况：
- 已声明，未赋值
- 对象的某个属性不存在
- 函数调用，少了参数
- 函数的默认返回值
以下几种null的情况：
- let obj={};obj=null 手动释放内存
- 作为函数的参数（此参数不是对象）
- 原型链的顶端
filter
foreach
没有返回值，不能break
map
1.有返回值（数组）默认returnun defined
2.接受的参数时一个函数（key，value）
3.不能用break打断
js递归求和
求1~100的和
1
2
3
4
5
6
7
8
9
10
| function add(a,b){
let sum=a+b
if(sum+1>100){
ruturn sum
}else {
add(sum,b+1)
}
}
add(1,2)
|
原型与原型链
性能优化
在浏览器输入url之后浏览器做了什么？
https://www,baidu.com
url->统一资源定位符，俗称网址
url是ip的一个映射
https：传输协议（http和TCP之间加了一层TSL或者SSL安全层）
www：服务器
第一次访问：
- 解析url
- DNS域名系统匹配真实ip
- 拿到真实ip
- 建立连接（TCP三次握手）
- 拿数据，渲染页面
- 四次挥手
第二次访问：读取浏览器缓存在本地的ip
从哪些点做性能优化？
- 加载
- 减少http请求（精灵图，文件的合并）
- 减小文件大小（资源压缩，图片压缩，代码压缩）
- CDN（第三方库，大文件，大图）
- SSR服务端渲染，预渲染
- 懒加载
- 分包
- 减少dom操作，避免回流，文档碎片
[前端性能优化 —— reflow(回流)和repaint(重绘) - 潇洒-zhutao - 博客园 (cnblogs.com)](https://www.cnblogs.com/zhutao/p/6551216.html#:~:text=前端性能优化 —— reflow (回流)和repaint (重绘),简要： 整个在浏览器的渲染过程中（页面初始化，用户行为改变界面样式，动画改变界面样式等）reflow (回流)和repaint (重绘) 会大大影响web性能，尤其是手机页面。)。
性能优化之文档碎片 - 知乎 (zhihu.com)
性能分析
- 页面加载性能
- 动画与操作性能
- 内存占用
- 电量消耗
图片懒加载
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| let num = document.getElementsByTagName("img").length
let img = document.getElementsByTagName("img")
let n = 0
lazyload()
window.onscroll=lazyload
function lazyload(){
let seeHeight = document.documentElement.clientHeight;
let scrollTop = document.documentElement.scrollTo || document.body.scrollTo
for(let i=n; i<num;i++){
if(img[i].offsetTop<seeHeight+scrollTop){
if(img[i].getAttribute("src") == "./img2/timg.gif"){
img[i].src=img[i].getAttribute("data-src")
}
n=i+1
}
}
}
|
