HTML+CSS+JS

HTML基础

1. HTML 文件中的 DOCTYPE 是什么作用？

答：1.HTML是什么 2.是什么，作用 浏览器的解析器 以（）规范来解析页面；放在HTML之前。说一下它放的位置

2. HTML、XML、XHTML 之间有什么区别？

答：1.标记语言 2.是什么。作用
先实现后慢慢制定，导致XXX混乱松散，语法不够严谨 xml用于存储数据结构，语法严谨可扩展性强，json轻量高效 加强版HTML，为解决混乱而生，语法严谨 ;HTML5用于页面呈现

3. 前缀为 data- 开头的元素属性是什么？

答：1.自定义属性 2.标签直接说明这种属性 3.js操作元素属性 获取某个元素的属性 使用dateset对象 4.vue直接传值 写v-for
自定义属性作用：向html标签上存储一些数据【dom操作思想】

HTML5自定义属性对象Dataset简介 « 张鑫旭-鑫空间-鑫生活

4. 谈谈你对 HTML 语义化的理解？

答：1.seo 2.可阅读性高

5. HTML5 对比 HTML4 有哪些不同之处？

答：增加了新特性 1.统一标准 2.新增标签 【语义化、功能化】 3.表单属性 4.全域属性 5.api

6. meta 标签有哪些常用用法？

答：1.关键词 2.视图大小 3.网页内容类型

7.img 标签的 srcset 的作用是什么？

答：处理响应式图片的方式；1.仅仅dpr进行响应式处理，针对不同dpr的设备使用不同图片显示。1x 2x 3x 4x 2.希望在不同的尺寸下显示不同的图片 sizes使用 响应式配置img的宽度

8. 响应式图片处理优化: Picture 标签

答：如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找img标签

9.在 script 标签上使用 defer 和 async 的区别是什么？

答： 可以用于提升网页性能
1.defer和async在网络加载过程是一致的，都是异步执行的；(放在页面顶部, 也不会阻塞页面的加载, 与页面加 载同时进行) 2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载) 所以, js脚本加上 async 或 defer, 放在头部可以减少网页的下载加载时间, 如果不考虑兼容性, 可以用于优化页面加载 的性能

10.前端做本地数据存储的方式有哪些？

答：1. Cookies 2. localStorage 3. sessionStorage 4. Web SQL 5. IndexedDB

11.前端存储的区别是什么

答：cookies浏览器api比较原始需要自行封装 2.localStorage除非手动删除永久存储 3.关闭消失4.indexDb存储大量数据元素。

CSS

1. CSS选择器的优先级是怎么样的？

答：内、id、类、标签
优先级

2.CSS 的哪些方式可以实现隐藏页面上的元素？

透明度设置为0;visibility：hidden;display:none；z-index:-9999;transform:scale(0,0)

3. px、em、rem之间有什么区别？

答：绝对、相对单位 父元素字体大小; HTML元素字体大小基准 移动端适配

4.让元素水平居中的方式

方法一：转成行内块，给父盒子设置 text-align: center;

方法二：块级元素：使用margin：0 auto

普通文档流：如果DIv不设置宽度，默认占一行；只设置高度，块级元素是可以显示的，但没有居中效果。

方法三：浮动：定位布局 脱离普通文档流

实现垂直居中 普通流 上面那个是脱离普通文档流

方法四：flex布局

博客总结可以i看看

5.在css中的定位方式

答：1.static默认 2.固定fixed 3.absolute 4 relative 5.sticky粘性定位【吸顶效果】

6.如何理解 z-index？

答：父元素有定位且有z-index ，优先父元素进行比较层级

7.如何清除浮动 ？

答：1.定高法 2.添加一个子盒子 clear:both 3.父盒子overflow: hidden 4.定义clearfix样式类

8.谈谈你对 BFC 的理解？

块级格式化上下文，是一块独立渲染的区域。将处于bfc区域外和区域内元素进行隔离。
答：块级元素上下margin合并的问题【转成行内块】 3.清除浮动【第一个元素没有高度overflow：hidden 3.实现自适应布局 overflow：hidden

9.什么是CSS Sprites以及它的好处？

答：它可以减少请求多张小图片带来的网络消耗（因为发起的HTTP请求数变少 了），并实现提前加载资源的效果。

10.媒体查询的理解

答：响应式适配, 根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式) @media screen and (max-width: 767px) {}

11.盒子模型的理解

答：内边距 边框 外边距 内容

12.标准盒模型和怪异盒模型有哪些区别？

答：content-box 标准盒模型 border-box 怪异盒模型

13.伪类和伪元素的区别？

答：伪类匹配元素的特殊状态；伪元素创建不在dom树上的元素，是虚拟的，无法注册事件，不要通过js控制

14.谈谈flex 的理解？

答：1.flex-direction ，2.justify-content 2.align-items 3.flex-wrap 4.align-content多行flex容器的排列方式

二、JavaScript基础

1. 解释下什么是变量声明提升？

var声明的变量会导致变量声明提升

2.JS 的参数是以什么方式进行传递的？

JS只有值传递，没有引用传递
答：基本类型 值传递；复杂数据类型：地址传递
js函数中参数的传递 - open_wang - 博客园

3.JavaScript垃圾回收是怎么做的？

所谓垃圾回收, 核心思想就是如何判断内存是否已经不再会被使用了, 如果是, 就视为垃圾, 释放掉.
方法：1.引用计数 2.标记清除算法
看一个对象是否有引用。
但它却存在一个致命的问题：循环引用。
如果两个对象相互引用，尽管他们已不再使用，垃圾回收器不会进行回收，导致内存泄露。

方法 将不再使用的对象标记为无法达到的对象。
从js根部出发，能够访问到的变量、函数、对象都是需要使用的不会被释放，无法访问的【无法触及到的】到被视为垃圾需要被回收。

4.作用域链

简而言之: 函数内部 可以访问到 函数外部作用域的变量, 而外部函数还可以访问到全局作用域的变量,
这样的变量作用域访问的链式结构, 被称之为作用域链

5.闭包

内层函数 引用外层函数的变量 可以形成闭包
作用：变量私有 实现数据私有
注意点：外部函数中 一般需要return引用 可能会造成内存泄漏，需要设置inner函数结果=null 相当于释放内存 对应的变量会被释放掉

早期闭包解决for循环中定时打印的问题

// new:
// 1. 创建一个新的对象
// 2. 让构造函数的this指向这个新对象
// 3. 执行构造函数
// 4. 返回实例

6.JavaScript中数据类型的隐式转换规则(了解)

7. 谈谈你对原型链的理解？

原型对象 构造函数 实例对象

原型对象
在 JavaScript 中，除去一部分内建函数，绝大多数的函数都会包含有一个叫做 prototype 的属性，指向原型对象，
基于构造函数创建出来的实例, 都可以共享访问原型对象的属性。

原型链
在 JavaScript 中，每个对象中都有一个 __proto__ 属性，这个属性指向了当前对象的构造函数的原型。
对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来，
而因为它的原型对象也有 __proto__，因此这样就串联形成一个链式结构，也就是我们称为的原型链。

原型对象
原型对象实际就是一个构造函数的实例对象，与普通的实例对象没有什么本质上的区别，js中每一个对象都有一个原型对象。不过他比较特殊，该对象所包含的所有属性和方法能够供构造函数的所有实例共享.

原型链
实例访问属性和方法时，优先访问自己的，自己的没找到往原型上找，如果还没有找到会继续找到 原型的原型，直到找到顶端object.prototype如果还没有找到就报错。

1.函数和对象的关系
函数就是对象，对象都是函数创建的
函数与对象并不是简单的包含与被包含的关系

prototype：原型
_proto_：原型链 链接点

从属关系
 prototype 是函数的一个属性：对象{}
_proto_是对象object的一个属性：对象：{}
对象的_proto_保存着该对象构造函数的prototype

8. 谈谈对于继承的理解

继承, 可以让多个构造函数之间建立关联, 便于管理和复用

1.原型继承: 通过改造原型链, 利用原型链的语法, 实现继承方法!

语法: 子构造函数.prototype = new 父构造函数()

2.组合继承有时候也叫伪经典继承，指的是将原型链 和 借用构造函数 call 技术组合到一块，
从而发挥二者之长的一种继承模式，其背后的思路: 是使用原型链实现对原型属性和方法的继承 (主要是方法)，
等等

9.谈谈你对this的理解？

this 是一个在运行时才进行绑定的引用，在不同的情况下它可能会被绑定不同的对象。
[1]默认绑定 (指向window的情况) (函数调用模式 fn() )
默认情况下， this 会被绑定到全局对象上，比如在浏览器环境中就为 window 对象，在node.js环境下为 global 对象。
函数独立调用，函数内部的this指向Window

console.log(this);
    function fn() {
      console.log(this);
    }
    fn()
    //函数独立调用 函数内部this也指向了window
    window.fn()

[2]隐式绑定 (谁调用, this指向谁) (方法调用模式 obj.fn()
[3]显式绑定 (又叫做硬绑定) (上下文调用模式, 想让this指向谁, this就指向谁)
硬绑定 => call apply bind
fn.call(this指向的内容，参数1，参数2…)
fn.apply(this指向的内容，【参数1，参数2，…】
const newFn=fn.bind(this指向的内容）

[4]new 绑定 (构造函数模式)
在使用 new 创建对象时也会进行 this 绑定,当使用 new 调用构造函数时，会创建一个新的对象并将该对象绑定到构造函数的 this 上

10.箭头函数中的this指向什么？

箭头函数不同于传统函数，它其实没有属于⾃⼰的 this ，
它所谓的 this 是, 捕获其外层 上下⽂的 this 值作为⾃⼰的 this 值。
并且由于箭头函数没有属于⾃⼰的 this ，它是不能被 new 调⽤的。

9. 宏任务 微任务 是什么

宏任务: 主线程代码, setTimeout 等属于宏任务, 上一个宏任务执行完, 才会考虑执行下一个宏任务
微任务: promise .then .catch的需要执行的内容, 属于微任务, 满足条件的微任务, 会被添加到当前宏任务的最后去执行

哪些任务会进入任务队列呢(异步任务有哪些)？
答：定时器，ajax异步请求，promise.then里的东西 等等

任务队列又分成两个，一个是宏任务队列，一个是微任务队列。微任务队列里的任务要优先于宏任务队列里的任务

HTTP协议

1. HTTP有哪些⽅法？

HTTP 1.0 标准中，定义了3种请求⽅法：GET、POST、HEAD
HTTP 1.1 标准中，新增了请求⽅法：PUT、PATCH、DELETE、OPTIONS、TRACE、CONNECT

2. 各个HTTP方法的具体作用是什么？

3. GET方法和POST方法有何区别？

4. HTTP请求报文是什么样的？

5. HTTP响应报文是什么样的？

6. 你了解的HTTP状态码有哪些？

7. HTTP的keep-alive是什么作用？

8. 为什么需要HTTPS？
   HTTPS 是安全版的 HTTP。
   HTTP 协议在传输数据时采用的是明⽂方式传递，因此，⼀些敏感信息的传输就变得很不安全。
   而 HTTPS 就是为了解决 HTTP 的不安全⽽产⽣的。

9. HTTPS是如何保证安全的？
   HTTPS 在传输数据的过程中会对数据进行加密处理，保证安全性。
   那HTTPS采用的什么样的加密方式呢？我们来了解下一些加密的基本概念。
   目前常见的加密算法可以分成三类，对称加密算法，非对称加密算法和Hash算法。
   可以看到，只有在发送秘钥阶段才使用非对称加密，而后续的通信都使用对称加密，这样解决了性能问题。
   HTTPS 目前所使用的 TLS或SSL协议, 就是目前采用的加密通道的规范协议
   它利用对称加密、(公私钥)非对称加密, 以及其密钥交换算法，可完成可信任的信息传输

HTTP简要总结
1.为什么使用https
答：http是明文传递信息的不安全，而https是会对内容进行加密的

2.https传输策略
先使用非对称加密，传递对称加密的密钥（保证了密钥的安全）
在使用对称加密，进行交流。保证传输数据的安全。

3.就算第一次是非对称加密，公钥也是在网络上传输的，如果保证公钥是可靠的？如何证明网站时可靠的？【CA机构认证，网站需要申请数字证书）
请求时，网站就会给到 浏览器，浏览器就会检测证书的可靠性。
①是否是权威机构颁发的 ②看证书记录的地址和当前访问的网站的地址，是否一致，只有一致才会可靠 ③看证书是否过期

4.如何保证证书不被篡改
看数字签名，可以根据证书内容生成一个唯一标识，一旦内容被修改了，再次生成唯一标识时，和之前生成的唯一标识不一样，检测是否被修改！

10. HTTP2和HTTP1.x比，有什么优势和特点？【了解】
    对用户来说是跨时代的 淘宝京东等 访问速度非常快
    HTTP/2 采⽤⼆进制格式来传输数据，⽽⾮ HTTP 1.x 的⽂本格式，⼆进制协议解析起来更⾼效
    HTTP/2 采用一些头部压缩技术，减少在请求和响应头中重复携带的数据，降低网络负担
    HTTP/2 采⽤服务器推送方式，主动向客户端推送资源，提高页面加载效率
    HTTP/2 采⽤多路复用机制，减少需要创建的连接数量，降低资源占用和性能消耗

11. http缓存控制
    HTTP缓存:优化加载的效率
    强缓存
    协商缓存