Loader和Plugin的区别
1. Loader只用于打包文件使用，由于webpack打包时只会打包js文件，所以需要引入对应的loader来对css、文件等内容进行打包
2. Plugin是webpack的拓展，作用于webpack本身，功能不局限于打包使用,如打包优化和压缩，重新定义环境变量等等很多功能
浏览器的存储cookie
1. cookie的以键值对的形式存储
2. cookie的由服务器生成，之后的每次请求都会带上cookie
3. cookie的存储大小为4kb以内
4. cookie的生命周期默认为关闭当前浏览器就会过期。但服务端可手动设置cookie的过期时间（负数为默认，正整数为指定过期时间，0为立即删除），当设置了过期时间后，即使浏览器关闭也不会过期
5. 主要用于自动登录、保存浏览历史、身份验证等
浏览器本地存储WebStorage
1. 存储形式同样为键值对
2. 存储大小为5m
3. 保存在本地，请求默认不会携带到服务器
4. 分为SessionStorage和LocalStorage，SessionStorage生命周期为当前浏览器关闭时过期；LocalStorage生命周期为长期有效，即使浏览器关闭也不清除，除非设置手动清除
5. 可通过浏览器window访问到
vue-router的原理
1. hash模式
- '#'（锚点）本来是加在URL中只是网页中的位置，可跳转网页的指定位置而不做页面的刷新
- 每次改变hash都会在浏览器的访问记录中增加一个历史记录
- 可通过hashchange来监听hash的改变
2. history模式
- 使用window.onpopstate对浏览器地址进行监听
- 对浏览器history api中的pushState、replaceState进行封装，方法调用时，对浏览器历史栈进行修改
部分请求中为什么使用encodeURIComponent进行转码
1. 该方法可把字符串作为URI组件进行编码，不会对ASCII字母和数字进行编码，也不会对ASCII标点符号进行编码
2. 可对其他字符（如：;/?&=+$,#等 ），将其用一个或多个十六进制的转义序列替换
3. url当作当做参数传递时，当参数出现空格这样的特殊字段，后台只可以读取到空格前的内容，后面的内容会丢失，造成数据读取失败，但是如果用encodeURIComponent()对这些特殊字符进行转义，后台便能获取到
css中link和@import的区别
1. link是html提供，不仅可用于加载css，还可以定义rss、ref连接属性；@import是css提供的语法规则，只能用来导入样式
2. link的加载时异步的，@import的加载是同步的，在页面加载完再加载
3. link不存在兼容问题；@import仅支持ie5+
4. 可以通过js操作DOM，插入link标签来改变样式
vue常见的loader
1. label-loader，将es6转成es5
2. css-loader，将css添加到内联样式标签style里
3. style-loader，允许将css文件通过require的方式引入，并返回css代码
4. file-loader，分发文件到output目录并返回相对路径
5. url-loader，功能与file-loader类似，可设置limit，当文件大小小于limit时，会将文件以base64的方式注入到代码中
6. image-loader，加载并压缩图片文件
7. sass-loader，处理sass
8. less-loader，处理less
computed与methods的区别
1. 调用方式不同。computed与data中的数据一样，直接使用；methods中的方法时函数，需要带（）调用
2. 缓存不同
- computed具有缓存功能，调用一次后，后续调用不需要加载。（在后续调用中，会观察计算属性的每一个变量是否发生改变，若无变化就不再执行计算，直接将第一次的结果fan）
- methods不具有缓存，每次调用都会加载
3. computed是具有响应式，不是异步；methods不具有响应式，是异步的
webpack中的source map是什么？
1. source map是指编译打包压缩后的代码映射回源代码的过程。其中存储着位置信息，也就是转换前后代码的对应位置。这样打包后代码执行报错时，会显示源代码的错误位置，而不是打包后的位置
2. 生产环境的source map默认是关闭的，目的是为了防止代码泄露
3. 如果需要在线上环境使用
- hidden-source-map：借助第三方错误监控平台Sentry使用
- nosources-source-map：只显示具体行数以及查看源代码的错误栈。安全性比source map高
- source：通过nginx设置将.map文件只对白名单开放（公司内网）
关于浏览器的强缓存和协商缓存
1. 强缓存
- 强缓存中分为内存缓存（from memory cache，一般存储经常读取的文件，如js文件、图片文件等）和磁盘缓存（from disk cache，一般存储不怎么读取的非脚本文件，如css，只需要加载一次）
- http1.0中，Response Headers中可携带的expire会指定一个过期时间，本地时间超过这个时间，就会使用服务器的资源文件，否则使用本地缓存的文件资源。但是存在本地时间和服务端时间不一致时，会有导出缓存混乱的问题
- http1.1中，新增一个cache-control属性，他的属性值可包含：max-age=数字（指定过期时间，即过去多长时间后过期）、max-age=no-cache(不使用强缓存，使用协商缓存)、max-age=no-store(不使用缓存)、max-age=public(可以被所有用户缓存，包括浏览器终端用户和CDN等中间代理服务器)、max-age=private（只能被浏览器终端用户缓存，不允许CDN等中间代理服务器对其缓存）
- 当强缓存过期后，使用协商缓存
2. 协商缓存
- 即需要和服务端进行协商，服务端允许使用本地缓存时才可以使用本地缓存
- 第一次请求某文件时会在Response Header中获得一个Last-Modified，属性值为一个时间，当下次请求文件时，Request Header中会携带一个If-Modified-Since，带上该时间，服务器会对两个时间进行对比，相同则说明文件没有被修改，不会返回任何文件，可以使用本地缓存（缺点是时间时间是以s记，当1s内改变多次文件是无法被检测到的）
- 为解决s级的文件修改，引入ETag，相当于文件的唯一标识，操作流程与modified类似，两者可同时使用。第一次请求时，获取ETag和Last-Modified，后续请求带上对应的If-None-Match和If-Modified-Since，进行对比后根据对比结果是否使用本地缓存
基本数据类型与引用数据类型
1. 数据类型
- 基本数据类型：Number、String、boolean、symbol、null、undefined、bigint（谷歌67版本新增）
- 引用数据类型：object（array、function、date等等）
2. 区别
1. 空间占用
- 基本类型占用空间固定，保存在栈中。当一个方法执行时，每个方法都会建立自己的内存栈，在这个方法内定义的变量将会逐个放入这块栈内存里，随着方法的执行结束，这个方法的内存栈自然销毁。因此所有在方法中定义的变量都是放在栈内存中的，栈中存储的是基础变量以及一些对象的引用变量，基础变量的值是存储在栈中，而引用变量存储在栈中的是指向堆中的数组或对象的地址，所以修改引用类型会影响到其他指向这个地址的引用变量。
- 引用类型占用空间不固定，保存在堆中。当我们在程序中创建一个对象时，这个对象将被保存到堆内存中，以便反复利用。堆内存中的对象不会随方法的结束而销毁，即便方法结束后，这个对象还可能被另一个引用变量所引用，则这个对象依然不会被销毁，只有当一个对象没有任何引用变量引用他时，系统的垃圾回收机制才会回收他。
2. 基本数据类型保存与复制的是值本身，引用数据类型保存与复制得是指向对象得一个指针。
3. 基本数据类型可以使用typeof检测数据的类型，引用类型使用typeof检查全是object,可以使用instanceof检测数据类型
4. 基本数据类型是值类型, 使用new()方法构造出的对象是引用型
重绘与回流
1. 重绘
- 节点的几何属性发生改变或样式发生改变但对页面布局没有影响，如color、background-color、outline等属性的变化（即改变样式）
2. 回流（重排）
- 布局改变或几何属性发生改变影响到布局，如display、float、position、overflow等
- 大部分的回流会导致页面的重新加载。
- 一个元素的回流可能导致其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流
回流不一定重绘，回流一定回流
ps：outline,边框轮廓，类似border，与border不同的是不占据空间、无法设置单边、会根据内部形状而定不一定是矩形
语义化标签
1. 提高代码的可阅读性
2. 方便SEO，让搜索引擎更好的建立沟通
3. 即使css失效，也具备基础的样式
常见语义化标签：footer、header、nav、article、aside、section、main、mark等
伪类与伪元素
伪元素产生新对象，在DOM树中看不到，但是可以操作；伪类不产生新的对象，仅是DOM中一个元素的不同状态；
1. 伪类用于当已有元素处在某种状态，为其添加样式，这个状态根据用户行为变化是动态变化的
2. 伪元素用于创建一些不在文档树中的元素，并为其添加样式。
- ::before ::after 可在元素前后添加content内容和样式
- ::first-letter ::first-line 可为元素的第一个字符和第一行添加样式
- ::selection 选择指定元素中被用户选中的内容
Vuex与localStorage的区别
1. Vuex是专门为Vue.js应用程序开发的状态管理模式，用于在组件间传值。存储在内存中，并且页面刷新后存储的值会丢失
2. localStorage是浏览器本地存储，一般用于跨页面传递数据。存储在本地，页面刷新也不会丢失
关于localStorage能否替代Vuex？
如果是固定不变的数据，使用localStorage替代Vuex没有问题，但是当两个组件公用一个数据源时，如果一个组件改变了该数据源，希望另一个组件响应该变化，Vuex才是首选；此外，localStorage只能存储字符串类型的数据，无法像Vuex存储多种数据类型的数据
事件循环机制
- js是单线程，即一个任务执行完成后才会执行后面的任务
- 但js中存在同步和异步，同步即代码按顺序执行，前面执行完才执行后面的；异步即代码可同时执行，前面没执行完的代码不会影响后面的代码
- js中的异步主要包含：回调函数、事件、定时器、AJAX、发布/订阅（设计模式）、Promise（ES6）、Generator（ES6）、async函数（es7）
- 宏任务包括：script（最外层同步代码）、setTimeout/setInterval（定时器）、DOM操作、网络任务（ajax）、用户交互（事件）、history traversal任务（h5中的历史操作）
- 微任务包括： Promise.then、process.nextTick、MutationObserver(监听DOM节点变化)
js代码在执行时，任务的执行在stack中，一旦任务是同步任务，立马放入stack中开始执行，执行完毕就删除，当碰见宏任务，会放入宏任务队列中，碰见微任务，放入微任务队列中。在stack中的方法执行完成后（即第一次事件循环快结束时），会按顺序执行微任务队列中的任务，最后微任务中没有任务了，便会找宏队列任务中的任务，宏任务的执行便是下一次事件循环（宏任务中的同步任务会立即执行，异步任务中，宏任务放入新的宏任务队列中，微任务放入微任务队列中,接着循环这样的流程）
网友评论