FieeSingle的博客

Vite 的特点：和 Webpack相比，Vite 具有以下特点：快速的冷启动，不需要等待打包即时的热模块更新真正的按需编译，不用等待整个项目编译完成由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。Vite 优点 Vite 缺点Vite 优点Vite 缺点开发服务器比 Webpack 快 10-100 倍只能针对现代浏览器（ES2015+）将 code-splitting 作为优先事项与 CommonJS 模

前端安全问题XSS: 跨站脚本攻击在用户可以输入的地方，并且将作为代码编译时，攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信，对用户输入内容进行转义，如 < 使用转义字符串 < 代替。CSRF: 跨站伪装请求攻击在用户已登录的情况下，伪装用户的身份发起请求，进行相关攻击。解决方式，确认用户的身份。比较好理解的解决方式是: 二次确认，通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志，通过该请求

观察者模式观察者模式：定义对象之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式、模型-视图模式、源-监听器模式或从属者模式。观察者模式是一种对象行为型模式。适配器模式适配器模式 ：将一个接口转换成客户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式的别名是包装器模式，是一种结构型设计模式。装饰器装饰器：指在不改变现有对象结构的情况下，动态地给该对象增加一些职责（即增加其额外功能）

拦截器分为请求拦截和响应拦截(前提是你的请求头已经完成了)请求拦截 首先我这边这个请求头我用const给他定义一下就叫Service吧 其次给他绑定interceptors.request.use()这个方法 接着因为这个方法有个箭头函数作为参数 再给其一个config做形参将vuex当中定义好的方法拿过来 使用Store.dispatch调用定义好的方法 返回config响应拦截 以相同的道理给Service绑定一个interceptors.response.use()方法 这时候他

前端工程化有哪些模块化模块化只是在文件层面上，对代码或资源的拆分；组件化而组件化是在设计层面上，对UI（用户界面）的拆分。规范化目录结构的制定编码规范前后端接口规范文档规范组件管理Git分支管理Commit描述规范定期CodeReview视觉图标规范自动化自动化测试持续集成自动化构建自动化部署...

vue2.6插槽更新v-slot用法v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容.作用域插槽（slot-scope）在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。在组件使用时，通过slot-scope=“scope”,接收组件中slot

1.sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。style-loader将创建一个style标签将css文件嵌入到html中。css-loader则处理其中的@import和url()。2.vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言3.file-loader、url-loader等可以处理资源，file-loader可以复制和

单页面（SPA）优点：加载速度快,内容的改变不需要重新加载整个页面,前后端分离,视觉效果好缺点：页面初次加载比较慢多页面：优点:对SEO友好缺点：页面切换速度慢,每次切换页面需要选择性的重新加载公共资源...

本地存储和离线缓存离线缓存:在没有网的情况下可以进行访问离线缓存是针对整个应用，浏览器缓存是单个文件离线缓存断网了还是可以打开页面，浏览器缓存不行离线缓存可以主动通知浏览器更新资源相同：本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。不同：本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。...

DNS解析TCP连接发送HTTP请求服务器处理请求并返回HTTP报文浏览器解析渲染页面连接结束

1、节流、防抖2、重绘、回流3、对代码进行压缩，删除不必要的空格4、图片的懒加载5、js是阻塞的 合理的使用defer和async6、减少对http的请求7、减少 DOM 元素数量8、css代码放在上面，js放在下面...

git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看本地所有分支git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git

commit常用类型**feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。docs:: 只是更改文档。style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。refactor:: 代码重构，既不修复错误也不添加功能。perf:: 改进性能的代码更改。test:: 添加确实测试或更正现有的测试。build:: 影响

中文名：自执行函数(function(形参){ alert(‘哈哈’) })(实参)作用？1、隐藏实现2、不会污染外部（全局）命名空间3、用它来编写js模块

vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？hash 模式：#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。history 模式：history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，

/H51.新增了语义化标签,比如 header头部标签,nav导航标签,footer底部标签,section盒子容器等等2.新增了视频和音频标签 video 和 audio3.新增了本地存储 localstorage(永久性的存储,页面关闭了都还在) sessionstorage(临时性存储,浏览器关闭就没了)4.新增了canvas画布5.新增了表单属性, 比如time, date等/C3颜色: rgba()过渡: transition动画: @keyframes,animation2D

迭代模型（Stagewise-Model）（迭代增量式开发/迭代进化式开发）在迭代式开发方法中，整个开发工作被组织为一系列的短小的、固定长度（如3周）的小项目，被称为一系列的迭代。每一次迭代都包括了需求分析、设计、实现与测试。采用这种方法，开发工作可以在需求被完整地确定之前启动，并在一次迭代中完成系统的一部分功能或业务逻辑的开发工作。再通过客户的反馈来细化需求，并开始新一轮的迭代。迭代和版本的区别，可理解如下：迭代一般指某版本的生产过程，包括从需求分析到测试完成；版本一般指某阶段软件开发的结果，一个可交

标记清除标记清除主要是js的常用垃圾回收方式当变量进入环境（例如函数中申明一个变量）时，将这个变量标记为“进入变量”。从逻辑上讲，永远不能释放进入环境所占的内存，因为我们在这个环境中可能随时会用到它们。当变量离开环境时，则其标记为“离开环境”；引用计数该方法的原理就是跟踪记录每个值被引用的次数，如果被引用的次数为0时，就代表被清除。内存管理内存生命周期（1）得到小内存生命空间，得到他的使用权，（2）存储数据，可以反复进行操作（3）释放小内存空间释放内存（1）局部变量：函数执行完自动释放

react中解决this指向问题的四种方法一.行间定义事件后面使用bind绑定this run(){ alert("第一种方法！") } <button onClick={this.run.bind(this)}>第一种</button>二.在构造函数内部声明this指向 constructor(props) { super(props); this.state={ //定义数据 } this.run = this.run

react生命周期：componentWillMount 在渲染前调用。componentDidMount 在第一次渲染后调用。componentWillReceiveProps 在组件接收到一个新的props时被调用。这个方法在第一次渲染时不会被调用。shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWillUpda

前端性能优化内容方面：减少 HTTP 请求 (Make Fewer HTTP Requests)减少 DOM 元素数量 (Reduce the Number of DOM Elements)使得 Ajax 可缓存 (Make Ajax Cacheable)针对CSS：把 CSS 放到代码页上端 (Put Stylesheets at the Top)从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)精简 JavaScri

前端面试题全面整理-带解析前言上期整理了一些vue面试题，本期整理总结这些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上：css相关万能居中1.margin: 0 auto;水平2.text-align: center;水平3.行高，垂直4.表格，center,middle；水平垂直5.display:table-cell；模拟表格，all6.绝对定位，50%减自身宽高7.绝对定位，上下左右全0，