前端知识点（css,html,js,http）自己整理

！长文慎入！！

行内元素

a ,b ,button ,i ,span ,img ,input ,textarea ,select…

块级元素

article ,dic ,form ,h1-h6 ,header ,hr ,ul ,li ,p ,table…

postion 值

relative, static, absolute, sticky

JS 数据类型

number, boolean, string, undefined, null, object, symbol

script标签的 async 参数和 defer 参数的差别

defer: 表示script文件可以先下载，但是延迟执行（顺序执行），但是会早于DOMContentLoaded执行。晚于页面解析渲染，早于全部结束。

async: 告诉外部的script文件下载后，直接执行，不会根据顺序执行，所以script文件间出现相互依赖会出现问题。

css 选择器

#id : id选择器

.class : class选择器

tag : 标签选择器

:link : 伪类选择器

缓存

1. 强缓存
   Cache-Control: max-age > Expires
2. 协商缓存
   Etag / If-None-Match > Last-Modified / If-Modified-Since

js事件循环

同步任务 > 微任务(Promise.then, MutaionObserver) > 宏任务(setInterval、setTimeout)

http 请求过程

0. 包装请求header
1. 找缓存
2. 本地HOST和DNS
3. 根DNS、域名DNS，找到服务器IP
4. TCP链接
5. 寻找80端口
6. 服务器转发
7. 发送http请求
8. 服务器响应，判断缓存，判断重定向
9. 服务器返回
10. 断开连接
11. 页面加载，渲染

https 请求过程

1. 向服务器发送协议、版本、客户端随机数
2. 返回协议、公钥、服务端随机数
3. 客户端验证服务端证书合法
4. 客户端用服务器发来的公钥加密随机数后发送
5. 服务器私钥解密后，用信息加密传输数据发送
6. 客户端解密

状态码

1xx 信息
2xx 成功
301 重定向
302 临时重定向
303 未修改
404 资源不存在
403 拒绝服务
408 请求超时
500 服务器错误
502 代理服务器错误
504 网关超时

数组去重

function  toSingeItem(arr){
   
    return Array.from(new Set(arr))
}

数组扁平化

// 第一种 递归
let res = [];
function flat(arr) {
   
    arr.forEach(item => {
   
        if (item instanceof Array) {
   
            flat(item)
        } else {
   
            res.push(item)
        }
    })
}
console.log(res);

// 第二种 方法
arr.toString().split(',').map(item=>{
   
	return Number(item)
})

大数相加

function add(num1, num2) {
   
    if (num1.length < num2.length) {
   
        [num1, num2] = [num2, num1]
    }
    num1 = num1.split('').reverse().join('');
    num2 = num2.split('').reverse().join('');
    let res = '';
    let f = 0;
    for (let i = 0; i < num1.length; i++) {
   
        let a = Number(num1[i]);
        let b = 0;
        if (num2.length > i) {
   
            b = Number(num2[i])
        }
        res += (parseInt((a + b + f) % 10)).toString();
        f = (parseInt((a + b) / 10))
    }
    if (f != 0 ) {
   
        res += f.toString()
    }
    return res.split('').reverse().join('');
}

> 相乘同理

隐式转换

[0] == 0        //true
[ ] == 0        //true
'' == 0         //true
'' === []       //true
1 == 2 == 3     //false
1 == 2 == 0     //true
...

webpack 优化

1. 减少编译体积 ContextReplacementPugin、IgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime。
2. 并行编译 happypack、thread-loader、uglifyjsWebpackPlugin开启并行
3. 缓存 cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin开启缓存、babel-loader开启缓存
4. 预编译 dllWebpackPlugin && DllReferencePlugin、auto-dll-webapck-plugin

性能优化

1. 减少编译体积 Tree-shaking、Scope Hositing。
2. hash缓存 webpack-md5-plugin
3. 拆包 splitChunksPlugin、import()、require.ensure

css 自适应正方形

1.padding撑开
.box{
   
    width: 50%;
    height: 0px;
    padding-bottom: 50%;
}
2. 新方法的属性
.box{
   
    width:50%;
    height:50vw;
    // 1vw = 1% viewport width; 1vh = 1% viewport height
}
3. 伪元素
.box{
   
    width:50%;
    overflow:hidden;
}
.box:before{
   
    content:'';
    display:block;
    margin-top:100%;
}

垂直居中

1.绝对定位
.outer{
   
    position: relative;
}
.inner{
   
    left: 50%;
    top: 50%;
    transform: transate(-50%,-50%)
}

2. flex布局
.outer{
   
    display: flex;
    align-items: center;
    justify-content: center;
}

节流函数

// 延迟执行
let debounce = function(fnc, wait){
   
    let timer = null;
    return function(){
   
        if(timer){
   
            clearTimeout(timer)
        }
        timer = setTimeout(fnc, wait) 
    }
}

// 立即执行
let debounce = function(fnc, wait){
   
    let timer = null;
    return function(){
   
        if(timer){
   
            clearTimeout(timer)
        }
        if(!timer){
   
            fn();
        }
        timer = setTimeout(()=>{
   
            timer = null;
        }