一些零碎的面试题

一、浏览器和网络问题：

输入网址到页面显示的过程是什么？

        用户输入ulr，按下enter之后，会发送到DNS获取对应域名的ip地址，然后客户端与服务器进行TCP连接，客户端对对应ip的服务器进行相应的http或者https请求，
        服务器响应数据，返回指定的url数据或者错误信息，客户端下载数据，解析html源文件，实现网页的排版布局，最后分析超链接，显示在当前页面上。

js的运行机制是什么？

        js是单线程语言，就是说是排队一个一个进行的，然后又拥有定时器这样的，这样就分为同步和异步，在异步又分为宏任务和微任务，
        js的运行机制就是：先运行同步任务，在运行微任务，在进行宏任务。

TCP3次握手

        第一次：客户端发送一个消息给服务器，告诉服务器我拥有发送的能力。
        第二次：服务器返回一个消息给客户端，告诉客户端我拥有接收和发送的能力。
        第三次：客户端发生一个数据给服务器，告诉服务器我拥有接收的能力。

TCP4次挥手

        第一次：客户端发生消息给服务器说：我要来接收数据了。
        第二次：服务器对客户端说：我要准备发数据了，准备接收。
        第三次：服务器发送数据给客户端，并说，数据发送过来了。
        第四次：客户端给服务器说：接收到数据啦，服务器可以关闭了。

http的原理

        一个基于TCP传输协议的一个明文超文本传输。

web安全：常见攻击以及防御

        （1）、CSRF攻击（跨站请求伪造）
            1️⃣攻击流程：
                ①用户访问a.com，并保留登录凭证（cookie）
                ②攻击装引诱用户访问b.com
                ③b.com向a.com发生一个请求，浏览器会默认携带a.com的cookie
                ④a.com接收到数据的之后，对请求进行验证，并确认是受害者的凭证，误以为受害者自己发送过来的
                ⑤a.com以受害者的名义，执行了b.com发送的请求
                ⑥完成攻击
            2️⃣攻击类型
                ①Get类型：只需要一个简单的HTTP请求
                ②POST类型：使用一个自动提交的表单
                ③链接类型
            3️⃣CSRF特点
                ①CSRF通常发生在第三方域名
                ②CSRF不能获取到cookie，只是使用
            4️⃣防护策略
                ①阻止不明外域的访问
                    同源检测
                    Samesite cookie
                ②提交时要求附加本域才能获得信息
                    CSRF Token
                    双重Cookie验证
            5️⃣各个策略介绍
                ①同源检测
                    使用Origin Header来确定域名
                    使用Refeerer Header来确定域名
                ②Samesite Cookie：在set-cookie中新增Samesite属性
                    Samesite = Strict：表明这个Cookie任何情况下都不可能作为第三方Cookie
                    Samesite = Lax:宽松模式：假如这个请求是这种请求（改变了当前页面或者打开了新页面）且同时是个get请求，则这个Cookie可以作为第三方Cookie
                ③CSRF Tooken：用户打开页面时，服务器给这个用户生产了一个Token
                    将Token存放在服务器的Session中，之后每次页面加载时，使用js遍历整个DOM树，对于DOM中生成的所有a和from标签加入Token
                    页面提交的请求都要携带这个Token
                    服务器验证这个Token是否正确
                ④双重Token
                    用户访问网站时，想请求域名注入一个Cookie,内容为随机字符串
                    在前端想后端发起请求时，取出Cookie，并添加在url的参数中
                    后端接口验证Cookie中的字段与url参数中的字段是否一致，不一致则拒绝
        （2）、XSS攻击（跨站脚本攻击）
            1️⃣攻击方式
                XSS，攻击者通过在目标网站注入恶意脚本，使之在用户的浏览器上运行，利用这些恶意脚本，攻击者可以获取用户的敏感信息，如：Cookie，SessionID等。注入方式有：
                    在HTML内嵌的文本中，恶意内容以script标签形成注入
                    在变迁的href src等属性中，包含javascript：等可执行代码
                    在onload、onerror、onclick等事件中注入不受控制的代码等待
            2️⃣XSS分类
                ①存储型XSS
                    存储区：（恶意代码存放的位置）后端数据库
                    插入点：（由谁取得恶意代码，并插入到网页上）HTML
                ②反射型XSS
                    存储区：URL
                    插入点：HTML
                ③DOM型XSS
                    存储区：后端数据库/前端存储/URl
                    插入点：前端javascript
            3️⃣攻击步骤
                ①存储型XSS
                    攻击者将恶意代码提交到目标网站的数据库中
                    用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在HTML中返回给浏览器
                    用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
                    恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
                ②反射型XSS
                    攻击者构造出特殊的URl，其中包含了恶意代码
                    用户打开带有恶意代码的URl时，网站服务器将恶意代码从URL中取出，拼接在HTML中返回给浏览器
                    用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行
                    恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
                ③DOM型XSS
                    攻击者构造出特殊的URL，其中包含恶意代码
                    用户打开带有恶意代码的URl
                    用户浏览器接收到响应的数据后解析执行，前端javascript取出URL的恶意代码并执行
                    恶意代码窃取用户数据并发送到攻击者网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作
                三者区别：DOM型XSS攻击，取出和执行恶意代码由浏览器端完成，属于前端js自身安全的漏洞，其他两种XSS都属于服务端自身安漏洞
            4️⃣防御策略
                ①防止HTML中出现注入
                ②防止javascript执行时，执行恶意代码
            5️⃣防御步骤
                ①预防存储型和反射型XSS
                    改为纯前端渲染，把代码个数据分隔开
                        1、浏览器先加载一个静态的HTML，此HTML中不包含任何跟业务相关的数据
                        2、然后浏览器执行HTML中的javascript
                        3、javascript通过ajxs加载业务数据，调用DOM API更新到页面上
                    对HTML做充分转义
                ②预防DOM型XSS
                    在使用 .innerHTML、.outerHTML、document.write() 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 .textContent、.setAttribute() 等

                    如果用 Vue/React 技术栈，并且不使用 v-html/dangerouslySetInnerHTML 功能，就在前端 render 阶段避免 innerHTML、outerHTML 的 XSS 隐患

                    DOM 中的内联事件监听器，如 location、onclick、onerror、onload、onmouseover 等， 标签的 href 属性，JavaScript 的 eval()、setTimeout()、setInterval() 等，
                    都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，如果项目中有用到这些的话，一定要避免在字符串中拼接不可信数据。

       
       ## HTTP和HTTPS的区别
            1️⃣ HTTPS协议需要到CA申请证书，一般免费的证书比较少，因而需要一定的费用
            2️⃣ HTTP是超文本传输协议，信息是明文传输。HTTPS则是具有安全性的SSL/TLS加密传输协议
            3️⃣ HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样，HTTP是80，HTTPS是443
            4️⃣ HTTP的连接很简单，是无状态的，HTTPS协议是由SSL/TSL+HTTP协议构建的可进行加密传输，身份认证的网络协议，比HTTP协议安全
    二、HTML
        语义化

为什么需要HTML5语义化

            （1）、易维护、易修改
            （2）、无障碍阅读支持
            （3）、搜索引擎友好，利于SEO
            （4）、面向未来的HTML，浏览器在未来可能提供更丰富的支持

HTML5新增的标签

            <header>头部标签
            <footer>尾部标签
            <nav>   导航标签
            <section>块级标签
            <video> 视频标签
            <audio> 音频标签
            ...等等
            说出几个就好了 不用全部说

有多少种盒子模型？分别是什么？有什么区别？

            2种，W3C盒子模型和 IE盒子模型
            区别：W3C盒子模型：宽度 = width+padding+border+margin   context-box（默认）
                 IE盒子模型： 宽度 = width + margin                 border-box

CSS选择器有哪些？优先级是怎样的？

            选择器：id选择器，类选择器，标签选择器，相邻选择器，子选择器，后代选择器，通配符选择器，属性选择器，伪类选择器
            优先级：!important>行内式>id选择器>类选择器>标签选择器>tag

如何让一个div水平垂直居中显示

            （1）、定位方法
                ①
                
                    div {
                       border: 1px solid black;
                       position: absolute;
                       width: 200px;
                       height: 100px;
                       left: 50%;
                       top: 50%;
                       transform: translate(-50%,-50%);
                    }
                ②
                    div {
                        border: 1px solid black;
                        position: absolute;
                        width: 200px;
                        height: 100px;
                        left: 50%;
                        top: 50%;
                        transform: translate(-100px, -50px);
                    }
                ③
                    div {
                        border: 1px solid black;
                        position: absolute;
                        width: 200px;
                        height: 100px;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                    }
                ④
                    div {
                        border: 1px solid black;
                        position: absolute;
                        width: 200px;
                        height: 100px;
                        top: 50%;
                        left: 50%;
                        margin: -50px 0 0 -100px;
                    }
            （2）、flex布局
                ①
                    .app {
                        width: 100vw;
                        height: 100vh;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                    .son{
                        border: 1px solid black;
                        width: 200px;
                        height: 100px;
                    }

        4、display有什么值，并且说出他的作用？
            none --隐藏
            block --块级显示
            inline-block --行内块显示
            inline --内联
            table --表格显示
            list-item --项目显示

用css画一个三角形

            div {
                width: 0px;
                height: 0px;
                border-top: 40px solid transparent;
                border-left: 40px solid transparent;
                border-right: 40px solid transparent;
                border-bottom: 40px solid skyblue;
            }

display:none,visibility:hidden,opacity:0 有什么区别？

            占据空间：
            display:none ：不占据额外空间，会引起回流和重绘
            visibility:hidden ：会占据额外空间，只会引起重绘
            opacity:0 ：会占据而外空间，只会引起重绘
            继承：
            display:none ：不会被子元素继承，但是其自身隐藏，所以子元素也会被隐藏
            visibility:hidden ：会被子元素继承，子元素可以通过设置 visibility:visible 重新显示
            opacity:0 ：会被子元素继承，但子元素无法显示
            事件绑定：
            display:none ：不会触发
            visibility:hidden ：不会触发
            opacity:0 ：会触发
            过渡动画：
            display:none ：trasition 对其无效
            visibility:hidden ：对其无效
            opacity:0 ：对其有效
            是否脱离文档流
            display:none ：使元素脱离文档流，不会占据原来的空间，会引起页面的重排
            visibility:hidden ：不会脱离文档流，元素不可视仍然占据原来的空间位置
            opacity:0 ：不会脱离文档流，元素不可视仍然会占据原来的位置空间

css提高性能的方法有哪些？

            1、避免过度约束
            2、避免使用后代选择符
            3、避免链式选择符
            4、使用紧凑的语法
            5、避免不必要的命名空间
            6、避免没有必要的重复
            7、最好使用表示语义的名字，一个好的类名是表述他是什么而不是他像什么
            8、避免 !important，可以选择其他选择器
            9、尽可能的精简规则，你可以合并不同类里的重复规则

浏览器怎么解析css选择器的？

            css选择器是从右向左解析css，如果是从左向右的话，发现不符合规则的话，就会进行回溯，这样就会损失很多的性能。

前端布局的方式有哪些？

            1、静态布局
            2、弹性布局（flexbox）
            3、自适应布局（bootstrap）
            4、流式布局
            5、响应式布局
            6、浮动布局
            7、定位布局

    四、js

js的数据类型有哪些？

            原始数据类型
            1、number
            2、string
            3、boolean
            4、underfined
            5、null
            引用数据类型
            1、object(对象)
            2、array(数组)
            3、function（函数）

js原型和原型链

            js中万物皆对象
            __proto__是每一个对象又有的属性，prototype是函数对象特有的属性。
            __proto__指向对象构造函数的protopyte，protopyte指向原型对象。
            
            原型链
            当访问一个对象的某个属性的时候，会先在这个对象的本身属性上找，如果没有找到，会去它的__proto__上找，即它的构造函数的prototype，
            如果还没找到，会在构造函数的prototype的__proto__上找。这样一层层向上查找就会形成一个链式结构，称为原型链。
 ## js继承
            1、原型链继承
            2、借用构造函数
            3、组合继承
            4、原型式继承
            5、寄生式继承
            6、寄生组合继承（最佳）
            7、ES6 extends（最佳）

什么是闭包，闭包的作用和应用场景

            闭包：闭包（closure）指有权访问另一个函数作用域中的变量的函数。
            https://blog.csdn.net/tinglis/article/details/108631406?spm=1001.2014.3001.5501

js的排序方式：

            1、冒泡排序
            2、选择排序
            3、插入排序
            4、合并排序
            5、快速排序
            6、原生排序

节流和防抖

            看我博客
            https://blog.csdn.net/tinglis/article/details/114133691?spm=1001.2014.3001.5501

    五、ES6
        ##、let和const
            let不会产生变量的提升，在一个作用域内只能定义一个变量一次，let的值可以被改变
            const不会产生变量的提升，只能被定义一次，const的值不可以被改变

map和set

            set数组去重，map对象去掉重复的键值，

weakset和weakmap

            weakset对象允许你将弱引用对象存储到一个集合中
            weakset和set的区别
            weakset只能储存对象引用，不能够放值，不会影响垃圾回收。而set对象都可以，会影响垃圾回收。
            weakset不能遍历，没有size, 没有forEach, 不是可迭代对象。

            weakmap对象是一组键值对的集合，其中就只有键是弱引用对象，而值可以是任意的。
            和map相似，weakmap不能够遍历，没有size，没有foreach，不是可迭代对象。它的键只能是对象。不会影响垃圾

promise是什么

            Promise 是异步编程的一种解决方案，有三种转态（等待，成功，失败），具体看下博客：
            https://blog.csdn.net/tinglis/article/details/113588894?spm=1001.2014.3001.5501

ES6中的数据类型有哪些？那些是基本数据类型？

            number,string,undefined,unll,boolean，symbol（基本数据类型）
            object（复杂数据类型）
            
    ## symbol的使用场景
    
            symbol是一个独一无二的值，可以保证不会与其他的属性值发出冲突。
            1：使用Symbol来作为对象属性名(key)
            2：使用Symbol来替代常量
            3：使用Symbol定义类的私有属性/方法
        
        7、