![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
海海呐
这个作者很懒,什么都没留下…
展开
-
前端面试题之对this的理解
this 是一个在运行时才进行绑定的引用,在不同的情况下它可能会被绑定不同的对象。默认绑定 (指向window的情况) (函数调用模式 fn() )默认情况下,this 会被绑定到全局对象上,比如在浏览器环境中就为window对象,在node.js环境下为global对象。message = "Hello";function test () { console.log(this.message);}test() // "Hello"隐式绑定 (谁调用, this指向...原创 2021-09-29 20:38:35 · 224 阅读 · 0 评论 -
前端面试题HTTP状态码
部分引用官方文档成功(2XX)状态码 原因短语 说明 200 OK 表示从客户端发来的请求在服务器端被正确处理 201 Created 请求已经被实现,⽽且有⼀个新的资源已经依据请求的需要⽽建⽴ 通常是在POST请求,或是某些PUT请求之后创建了内容, 进行的返回的响应 202 Accepted 请求服务器已接受,但是尚未处理,不保证完成请求 适合异步任务或者说需要处理时间比较长的请求,避免HTTP连接一直占用 204 No co原创 2021-09-28 22:52:40 · 239 阅读 · 0 评论 -
前端面试题get方法和post方法的区别
默认的http请求的内容, 在网络中传输, 明文的形式传递的 (https 对内容加密) GET方法 POST方法 数据传输⽅式 通过URL传输数据 (地址栏拼接参数) 通过请求体传输 数据安全 数据暴露在URL中,可通过浏览历史记录、缓存等很容易查到数据信息 数据因为在请求主体内, 所以有⼀定的安全性保证 数据类型 只允许 ASCII 字符 ⽆限制 GET⽆害 刷新、后退等浏览器操作是⽆害的 可能会引起重复提交表单 功能特原创 2021-09-27 23:16:01 · 195 阅读 · 0 评论 -
前端面试题重绘(repaint)和重排(回流reflow)
重排重排是指部分或整个渲染树需要重新分析,并且节点的尺⼨需要重新计算。表现为 重新⽣成布局,重新排列元素。重绘重绘是由于节点的⼏何属性发⽣改变,或由于样式发⽣改变(例如:改变元素背景⾊)。表现为某些元素的外观被改变。或者重排后, 进行重新绘制!两者的关系重绘不⼀定会出现重排,重排必定会触发重绘。每个页面至少需要一次回流+重绘。(初始化渲染)重排和重绘的代价都很⾼昂,频繁重排重绘, 会破坏⽤户体验、让界面显示变迟缓。我们需要尽可能避免频繁触发重排和重绘, 尤其是重排原创 2021-09-26 23:01:12 · 369 阅读 · 0 评论 -
前端面试题之变量提升
变量提升(hoisting),是负责解析执行代码的 JavaScript 引擎的工作方式产生的一个特性。JS引擎在运行一份代码的时候,会按照下面的步骤进行工作: 首先,对代码进行预解析,并获取声明的所有变量 然后,将这些变量的声明语句统一放到代码的最前面 最后,开始一行一行运行代码 console.log(a)var a = 1function b() { console.log(a)}b() // 1变量的这一转换过程,就被称为变...原创 2021-09-25 20:43:39 · 267 阅读 · 0 评论 -
前端面试题对于HTML 语义化的理解?
语义化的好处 (利于SEO, 可阅读性更好)语义化前:在语义化之前,你可能会使用各种各样的标签去实现同样的功能,比如: 使用 span、div、p、a 等做文字, 做按钮 使用 div 做一切 从功能方面来说,这确实是不存在什么问题的,完全可以达到功能效果。但这不符合直觉,非常不友好: 对人不友好:阅读代码的人不能一眼看出代码的功能 对机器不友好:解析代码的程序不能很好的对这些元素进行分类处理 语义化后: HTML5 规范提倡语义化标签,即使⽤恰当语义的.原创 2021-09-24 21:28:57 · 135 阅读 · 0 评论 -
前端面试题对于媒体查询的理解
响应式适配 根据不同的屏幕尺寸, 显示不同的效果 (设置盒子的样式)媒体查询是自 CSS3 开始加入的一个功能。它可以进行响应式适配展示。媒体查询由两部分组成: 一个可选的媒体类型(如 screen、print 等) 零个或多个媒体功能限定表达式(如 max-width: 500px、orientation: landscape 等) 这两部分最终都会被解析为 true 或 false 值,然后整个媒体查询值为 true,则和该媒体查询关联的样式就生效,否则就不生效。代码部分原创 2021-09-23 21:01:15 · 669 阅读 · 0 评论 -
前端面试题Vue 项目如何进行 SEO 优化
本文部分内容参考官方文档Vue SPA单页面应用对SEO不太友好,当然也有相应的解决方案,下面列出几种SEO方案 SSR服务器渲染 服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构 关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境。 优势: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 缺点: 服务器nodejs环境的要求, 且对原代码的改造成本高! nuxt原创 2021-09-22 20:45:52 · 428 阅读 · 0 评论 -
如何理解Vue的响应式系统
部分内容参考官方文档MVVMM: model数据模型, V:view视图模型, VM: viewModel视图数据模型双向: 视图变化了, 数据自动更新 => 监听原生的事件即可, 输入框变了, 监听输入框input事件 数据变化了, 视图要自动更新 => vue2 和 vue3 基本原理vue2.0 数据劫持: Object.defineProperty (es5)vue3.0 数据劫持: Proxy (es6)分析 :Vue的 MVVM 原理...原创 2021-09-21 19:41:37 · 148 阅读 · 0 评论 -
前端面试题Vue双向绑定原理
基本认知在 Vue 2.x 中,利⽤的是 Object.defineProperty 去劫持对象的访问器(Getter、Setter),当对象属性值发⽣变化时可获取变化,然后根据变化来作后续响应;(一个一个的劫持)在 Vue 3.0 中,则是通过 Proxy 代理对象进⾏类似的操作。劫持的是整个对象, 只要对象中的属性变化了, 都能劫持到Object.defineProperty和Proxy的优缺点?Proxy 可以直接监听整个对象,⽽⾮是对象的某个属性 可以直接监听数组原创 2021-09-20 19:00:07 · 340 阅读 · 0 评论 -
前端面试题( TCP 三次握手和四次挥手的理解)
TCP是一个端到端的 可靠 面相连接的协议,HTTP基于传输层TCP协议不用担心数据传输的各种问题(当发生错误时,可以重传)根据这个IP,找到对应的服务器,发起TCP的三次握手 (tcp 三次握手四次挥手 )关闭TCP连接四次挥手的理解 (客气挽留)关闭连接(四次挥手)不能直接一次性断开连接(双方知晓), 万一还有什么数据没有传完, 造成数据的丢失!完整的一次 http 请求流程才算结束 致读者:由于服务器正在搭建中, ajax暂时停止更新, 等服务器搭建完...原创 2021-09-19 20:06:33 · 437 阅读 · 0 评论 -
打工人必备摸鱼神器Hurry home(下班回家)保姆式使用教程
效果图下载地址githubhttps://github.com/sbjim/go-home克隆下来之后是这样打开谷歌浏览器找到更多工具里面的扩展程序点击加载已解压的扩展程序将克隆的文件 go-home上传上去然后可以点击扩展程序可以设置自己想要设置的快捷键就完成啦最后如果还是不可以可以看一下自己是否开启了开发者模式哦...原创 2021-09-03 17:30:22 · 5754 阅读 · 0 评论 -
前端面试题 同步异步的理解
同步异步的理解原创 2021-07-15 21:07:30 · 490 阅读 · 3 评论 -
前端面试题 v-if和v-for为什么不能同时使用?
因为v-for的优先级比v-if高会先循环渲染出数据后才会进行条件渲染判断 造成性能浪费如果要在同一元素上使用可以使用计算属性computed原创 2021-07-24 21:25:41 · 174 阅读 · 0 评论 -
setTimeout、Promise、 Async/Await 的区别
事件循环中分为宏任务队列和微任务队列setTimeout延时器:setTimeout(回调函数,间隔时间):以毫秒为单位间隔指定时间后调用回调函数(仅1次)setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行PromiseECMAscript 6 原生提供了 promise 对象。promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 reso.原创 2021-07-23 22:02:51 · 345 阅读 · 1 评论 -
怎么理解JavaScript中的内存泄露
什么是内存泄露?程序不需要的内存,由于某些原因其不会返回到操作系统或者可用内存池中。内存泄露会导致(运行缓慢,高延迟,崩溃)的问题常见导致内存泄露的原因1,意外的全局变量2,被遗忘的计时器或回调函数3,脱离文档的DOM的引用4,闭包...原创 2021-07-22 21:23:37 · 814 阅读 · 2 评论 -
深入理解css浮动带来的问题及解决方法(清除浮动)
为什么需要浮动有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式浮动及其工作原理。 浮动的元素可以向左或向右移动,直到它的外边 缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动 ,必须为元素设置一个宽度( width)。虽然浮动元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现得就像浮动元素不存在一样,下面的元素会填补原来的位置。有些元...原创 2021-07-21 21:42:48 · 449 阅读 · 0 评论 -
前端面试题 v-if和v-show的区别
v-show:v-show指令是通过CSS属性修改元素的display 的让其显示或者隐藏当条件为false时, v-show只是给我们的元素添加一个行内样式: display:nonev-if:v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果只有在为true的时候才会显示数据应用场景:当频繁切换的时候推荐使用v-show 切换次数较少的时候推荐使用v-if...原创 2021-07-20 21:50:18 · 300 阅读 · 0 评论 -
防抖与节流的原理和封装
防抖- debounce防止抖动 防止事件在短时间内频繁被触发,用户停止输入后,延迟超过500ms时,才去搜索此时的String,这就是防抖。*原理:将若干个函数调用合成为一次,并在给定时间过去之后仅被调用一次。封装调用节流- throttle我们不想用户一味的输入,而是给用户-些搜索提示,在一定的时间内只触发一次 ,所以在当中限制每过500ms就查询一次此时的String,这就是节流。原理:节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事..原创 2021-07-19 22:13:47 · 384 阅读 · 1 评论 -
join()与split()函数的区别
join()将数组转换成字符串,是关于数组的方法。对数组执行join()函数,然后通过参数分隔符字符串将它们连接起来,从而返回一个字符串。使用分隔符来分隔数组中的元素split()将字符串切割成数组,是关于字符串的方法;对字符串执行split()函数,然后在参数分隔符处将其断开,从而返回一个数组。可以通过空格进行分割简单地说,split()把一个字符串(根据某个分隔符字符串)切割成若干个字符串并存放在一个数组里。而join()把数组中的字符串连成一...原创 2021-07-17 21:05:52 · 3716 阅读 · 0 评论 -
前端面试题 Vue路由跳转的四种方式
1. router-link2. this.$router.push( (函数里面调用)3. this.Srouter.replace() (用法同push)4. this.$router.go(n).区别:router-link 跳转前提是在router.js 中配置了要跳转到目的的to是要跳转要地方this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面this.$router.replac...原创 2021-07-16 22:48:37 · 461 阅读 · 2 评论 -
css中rem em vh px各自代表的含义
css中rem em vh px各自代表的含义remrem是css3新增的一个相对单位,rem是相对于HTML根元素的字体大小来进行计算 如果没有设置HTML的字体大小,就会以浏览器默认字体大小,一般是16px。rem除了IE8及更早版本以外,所有浏览器均支持emem子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话是相对于该元素的font-size。如果父元素的字体尺寸未设置,则相对于浏览器默认字体大小vw/vhvw/vh原创 2021-07-14 22:00:33 · 740 阅读 · 0 评论