- 博客(96)
- 收藏
- 关注
RSS订阅原创 ES6 Fetch API的基础使用
所有的功能全部几乎在同一个对象上，容易书写出混乱不易维护的代码采用传统的事件驱动模式，无法适配的 Promise Api并非取代 AJAX,而是对 AJAX 传统 API 的改进精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景使用 Promise Api，更利于异步代码的书写Fetch Api 并非 ES6 的内容，属于 HTML5 新增的 Web Api需要掌握网络通信的知识。
2024-03-17 19:47:14
567
原创 ES6新增特性？20分钟了解....
使用 es6 的一种语法规则，将一个对象或数组的某个属性提取到某个变量中。解构不会影响原始对象XMLHttpRequest 的问题所有的功能全部几乎在同一个对象上，容易书写出混乱不易维护的代码采用传统的事件驱动模式，无法适配的 Promise ApiFetch Api 的特点并非取代 AJAX,而是对 AJAX 传统 API 的改进精细的功能分割:头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的 AJAX 场景使用 Promise Api，更利于异步代码的书写。
2023-09-26 14:49:22
433
原创 React核心概念
所谓生命周期，指的是组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React 在组件的生命周期提供了一系列的钩子函数(类似于事件)，可以让开发者在函数中注入代码，这些代码会在适当的时候运行。**生命周期钩子函数是属于类组件所独有的东西。**但是从 React16.8 推出了 Hooks 以来，整体已经开始以函数组件为主，因此这里我们仅介绍一些常用的生命周期钩子函数。Hook 是 React16.8 的新增特性。
2023-09-21 14:28:00
519
原创 Linux基本命令，基础知识
shell 就是命令的集合例如，要将文件 b.txt 改名为 c.txt，并将 c.txt 复制到 test 路径可以把这两个命令写到一个 shell 里面，(文件以.sh结尾)最后只需要执行 shell 文件即可完成操作。vi doit.shchmod 777 doit.sh 赋权./doit.sh 回车。
2023-09-21 14:23:36
2449
原创 git 常用命令
注意，不管是根目录下的 /fd1/ 目录，还是某个子目录 /child/fd1/ 目录，都会被忽略；此外，git 对于 .ignore 配置文件是按行从上到下进行规则匹配的，意味着如果前面的规则匹配的范围更大，则后面的规则将不会生效；说明：忽略全部内容，但是不忽略 .gitignore 文件、根目录下的 /fw/bin/ 和 /fw/sf/ 目录；重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致。重置暂存区的指定文件，与上一次commit保持一致，但工作区不变。
2023-08-20 17:01:31
1198
原创 HTML 与 XHTML 二者有什么区别
HTML 与 XHTML 二者有什么区别，你觉得应该使用哪一个并说出理由。HTML 与 XHTML 之间的差别，主要分为功能上的差别和书写习惯的差别两方面。关于功能上的差别，主要是 XHTML 可兼容各大浏览器、手机以及 PDA，并且浏览器也能快速正确地编译网页。由于 XHTML 的语法较为严谨，所以如果你是习惯松散结构的 HTML 编写者，那需要注意 XHTML 的规则。下面列出了几条容易犯的错误，供理解。所有标签都必须小写在 XHTML 中，所有的标签都必须小写，不能大小写穿插其中，也
2023-08-11 19:58:47
1007
原创 什么是可替换元素，什么是非可替换元素，它们各自有什么特点？
元素也是一个典型的可替换元素，它在页面上呈现的是用户操作系统上的下拉列表样式，因此，它的展现效果是由操作系统决定的。元素就是一个可替换元素，它在页面中显示出的效果主要取决于你连接的是什么图片，图片是什么它就展示什么，非可替换元素就是指的普通元素，它具体在页面上呈现什么，完全由。可替换元素是指这样一种元素，它在页面中的大部分展现效果不由。虽然可以控制图片的尺寸位置，但永远无法控制图片本身。元素，放到不同操作系统的电脑上会呈现不同的外观。、大部分表单元素都属于可替换元素。
2023-08-11 19:55:59
262
原创 title和h1、b与strong、i和em的区别
title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？title 与 h1：h1 标签写在网页的 body 中，title 标签写在网页的 head 中，h1 标签控制一段文字的大小（从 h1~h6），title 是网页标题的意思，如 <title>这是网页标题</title>。b 与 strong 的区别：b 是以前的加粗元素，而新出来的 strong 元素虽然在表现上看上去也是加粗，但是却拥有语义，表示强调某段文字的信息。i 与 em 的区别：
2023-08-07 16:04:21
993
1
原创 优化网络性能方法
利用 CDN 可以大幅缩减静态资源的访问时间，特别是对于公共库的访问，可以使用知名的 CDN 资源，这样可以实现跨越站点的缓存。现代浏览器普遍支持压缩格式，因此服务端的各种文件可以压缩后再响应给客户端，只要解压时间小于优化的传输时间，压缩就是可行的。利用一些打包插件，针对不同的浏览器打包出不同的兼容性版本，这样一来，每个版本中的兼容性代码就会大大减少，从而减少包体积。对于不使用 HTTP2 的场景，将相对独立的静态资源分到多个域中保存，可以让浏览器同时开启多个 TCP 连接，并行下载。
2023-08-06 16:58:02
275
原创 cookie/sessionStorage/localStorage 的区别
与此同时，也正是因为浏览器的默认行为，给了恶意攻击者可乘之机，CSRF 攻击就是一个典型的利用 cookie 的攻击方式。虽然 cookie 不断的改进，但前端仍然需要另一种更加安全的保存数据的方式。浏览器针对它们没有任何默认行为，这样一来，就把保存数据、读取数据的工作交给了前端开发者，这就让恶意攻击者难以针对登录状态进行攻击。cookie 的大小是有限制的，一般浏览器会限制同一个域下的 cookie 总量为 4M，而 sessionStorage 和 localStorage 则没有限制。
2023-08-05 15:13:10
371
原创 HTTP 常用状态码 301 302 304 403
304 资源未修改，服务器通过该状态码告诉客户端，请求的资源和过去一样，并没有任何变化，建议自行使用过去的缓存。通常，304 状态码的响应中，服务器不会附带任何的响应体。302 临时重定向，浏览器会引导用户进入新地址，但不会缓存原始地址，下一次用户访问源地址时，浏览器仍然要请求原地址的服务器。服务器通过该状态码告诉客户端，这个资源目前不允许访问。这种状态码通常出现在权限不足的情况下。301 永久重定向，浏览器会把重定向后的地址缓存起来，将来用户再次访问原始地址时，直接引导用户访问新地址。
2023-08-05 15:11:26
2553
原创 怎样解决跨域问题？
在请求时，客户端使用一些特殊的请求头向服务器申请跨域访问，并通过这些请求头告诉服务器自己的行为。服务器根据自身的规则决定是否允许跨域，如果允许，则通过响应头告诉客户端可以发送跨域请求。JSONP 实现简单、兼容性好，但缺点也很明显，它只支持 get 请求，同时也有安全性问题，并且对服务器端代码侵入性比较强。跨域站点返回一段调用该函数的脚本，当客户端接收到脚本后就会运行事先准备的函数，从而实现跨域获取数据。cors 协议已被各种主流浏览器支持，它安全性高，同时也不会侵入服务器代码，是目前最主流的跨域方式。
2023-08-05 15:10:51
207
原创 webSocket 与传统的 http 有什么优势
websocket 的出现就是为了解决这个问题，它利用 http 协议完成握手之后，就可以与服务器建立持久的连接，服务器可以在任何需要的时候，主动推送消息给客户端，这样占用的资源最少，同时实时性也最高。无论是哪一种方式，都暴露了 http 协议的弱点，即响应必须在请求之后发生，服务器是被动的，无法主动推送消息。第二种是长轮询，发起一次请求询问服务器，服务器可以将该请求挂起，等到有新消息时再进行响应。第一种是短轮询，即客户端每隔一段时间就向服务器发送消息，询问有没有新的数据。
2023-08-05 15:10:10
2057
原创 webSocket 协议是什么
websocket 协议 HTML5 带来的新协议，相对于 http，它是一个持久连接的协议，它利用 http 协议完成握手，然后通过 TCP 连接通道发送消息，使用 websocket 协议可以实现服务器主动推送消息。首先，客户端若要发起 websocket 连接，首先必须向服务器发送 http 请求以完成握手，请求行中的 path 需要使用。然后，服务器收到请求后，发现这是一个 websocket 协议的握手请求，于是响应行中包含。webSocket 协议是什么，能简述一下吗？
2023-08-05 15:09:26
1340
原创 xss csrf 攻击
XSS 是指跨站脚本攻击。攻击者利用站点的漏洞，在表单提交时，在表单内容中加入一些恶意脚本，当其他正常用户浏览页面，而页面中刚好出现攻击者的恶意脚本时，脚本被执行，从而使得页面遭到破坏，或者用户信息被窃取。它首先引导用户访问一个危险网站，当用户访问网站后，网站会发送请求到被攻击的站点，这次请求会携带用户的cookie发送，因此就利用了用户的身份信息完成攻击。CSRF 是跨站请求伪造，是一种挟制用户在当前已登录的Web应用上执行非本意的操作的攻击方法。介绍 xss csrf 攻击。
2023-08-05 15:08:40
1030
原创 HTTP 劫持、DNS 劫持与 XSS
攻击者利用站点的漏洞，在表单提交时，在表单内容中加入一些恶意脚本，当其他正常用户浏览页面，而页面中刚好出现攻击者的恶意脚本时，脚本被执行，从而使得页面遭到破坏，或者用户信息被窃取。http 劫持是指攻击者在客户端和服务器之间同时建立了连接通道，通过某种方式，让客户端请求发送到自己的服务器，然后自己就拥有了控制响应内容的能力，从而给客户端展示错误的信息，比如在页面中加入一些广告内容。要防范 XSS 攻击，需要在服务器端过滤脚本代码，将一些危险的元素和属性去掉或对元素进行HTML实体编码。
2023-08-05 15:07:56
2099
原创 GET 和 POST 的区别
从 http 协议的角度来说，GET 和 POST 它们都只是请求行中的第一个单词，除了语义不同，其实没有本质的区别。之所以在实际开发中会产生各种区别，主要是因为浏览器的默认行为造成的。GET 和 POST 的区别（流利说）
2023-08-05 15:07:10
191
原创 网络的五层模型
从上到下分别为：应用层、传输层、网络层、数据链路层、物理层。应用层主要面向互联网中的应用场景，比如网页、邮件、文件中心等等，它的代表协议有 http、smtp、pop3、ftp、DNS 等等。传输层主要面向传输过程，比如 TCP 协议是为了保证可靠的传输，而 UDP 协议则是一种无连接的广播，它们提供了不同的传输方式。数据链路层的作用是将数据可靠的传输到目标，比如常见的以太网协议、P2P 协议。物理层是要规范网络两端使用的物理设备，比如蓝牙、wifi、光纤、网线接头等等。网络的五层模型（寺库）
2023-08-05 15:06:17
436
原创 单点登录（新东方）
SSO 一般都需要一个独立的认证中心（passport），子系统的登录均得通过 passport，子系统本身将不参与登录操作，当一个系统成功登录以后，passport 将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，为了减少频繁认证，各个子系统在被 passport 授权以后，会建立一个局部会话，在一定时间内可以无需再次向 passport 发起认证。
2023-08-05 15:04:41
235
原创 如何实现 token 加密
payload 标识主体信息，包含令牌过期时间、发布时间、发行者、主体内容等；signature 是使用特定的算法对前面两部分进行加密，得到的加密结果。token 有防篡改的特点，如果攻击者改动了前面两个部分，就会导致和第三部分对应不上，使得 token 失效。而攻击者不知道加密秘钥，因此又无法修改第三部分的值。token 分为三段，分别是 header、payload、signature。所以，在秘钥不被泄露的前提下，一个验证通过的 token 是值得被信任的。介绍下如何实现 token 加密。
2023-08-04 13:42:24
509
原创 TCP 连接的过程
第一次握手：建立连接时，客户端发送 syn 包到服务器，并进入 SYN_SENT 状态，等待服务器确认。第二次握手：服务器收到 syn 包，然后回应给客户端一个 SYN+ACK 包，此时服务器进入 SYN_RCVD 状态。此次握手的含义是服务端回应客户端，表示已收到并同意客户端的连接请求。第三次握手：客户端收到服务器的 SYN 包后，向服务器再次发送 ACK 包，并进入 ESTAB_LISHED 状态。最后，服务端收到客户端的 ACK 包，于是也进入 ESTAB_LISHED 状态，至此，连接建立完成。
2023-08-04 13:40:56
330
原创 如何兼容低版本浏览器
对于JS代码，低版本浏览器无法识别H5的API，因此缺少了一些新功能，比如localstorage、web worker等。但由于浏览器对于不能识别样式的处理方式是「直接丢弃、不影响后续渲染」，所以，我们可以保持这样的原则：尽量让其兼容，实在不行，至少不影响浏览。在前端工程化的今天，上面的几乎所有兼容性问题都可以依靠工程化完成，比如，css可以依托postcss平台完成兼容性处理，JS可以依托babel平台完成兼容性处理。
2023-08-04 13:39:21
801
原创 前端需要注意哪些 SEO
由于目前的搜索引擎对客户端渲染并不友好，因此使用服务端渲染仍然是 SEO 的重要手段。可以利用弹性盒布局中的 order 属性，将核心、重要的内容尽量放到文档的前面。利用 title、meta 元素，设置网页的标题、描述、关键字。多使用语义化标签，让正确的标签对应正确的内容。前端需要注意哪些 SEO。
2023-08-04 13:37:26
261
原创 怎样选择合适的缓存策略
设置一个很长的过期时间，比如十年，然后通过文件 hash 的处理更新。标记，让浏览器缓存资源，但每次都会发送请求询问资源是否更新。对于静态资源，比如 JS、CSS、图片等文件，使用强制缓存。对于频繁变动的资源，比如某些数据接口，使用协商缓存。对于一次性的资源，比如验证码图片，不进行缓存。
2023-08-04 13:36:11
193
原创 什么是浏览器同源策略
同源策略是指，当前页面和页面运行过程中发出的请求必须是同源的，即必须协议、主机、端口均相同，否则即被视为跨域请求。所谓同源，是指协议、主机、端口均相同的地址。
2023-08-04 13:28:43
146
原创 浏览器缓存读取规则
在 service worker 中，开发者可以根据需要将远程获取的资源缓存到 cache storage 中，之后对该资源的请求会直接从缓存中获取。浏览器会自动将请求过的资源自动加入到 memory cache，这主要是为了解决一个页面中有多次相同的请求，比如页面中链接了多张相同的图片。当需要获取一个资源时，浏览器会先检查缓存中是否存在，若命中缓存，则不会发送请求。请求的资源会被保存在磁盘中，在指定的期限内有效。memory cache 是浏览器自动完成的，它保存在内存中。当浏览器得到的响应头中包含。
2023-08-04 13:27:39
372
原创 浏览器和 Node 事件循环的区别
浏览器的事件循环比较简单，它把任务分为宏任务和微任务，当执行栈清空后，会优先调取微任务运行，当微任务队列清空后，才会调取宏任务运行。在进入任何一个阶段时，都将检查微队列中是否有任务需要执行，只有微队列清空后才能顺利进入下一个阶段。
2023-08-04 13:26:29
164
原创 重绘和重排（repaint & reflow），以及如何进行优化
重排是一项繁琐的工作，会降低效率，因此在开发中，应该尽量避免直接获取和设置元素的尺寸、位置，尽量使用变量来保存元素的布局信息。在实际开发中，获取和设置元素尺寸、位置均会导致重排和重绘，而仅设置元素的外观（比如背景颜色）则只会导致重绘，不会导致重排。整个页面可以看做是一幅画，这幅画是由浏览器绘制出来的，浏览器绘制这幅画的过程称之为渲染。重排一定会导致重绘，因此布局信息的变化一定会导致像素信息的变化。当元素的布局信息发生变化时，会导致重排。当元素的像素信息发生变化时，会导致重绘。
2023-08-04 13:24:40
187
原创 vue中相同逻辑如何进行抽离
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。说白了就是给每个生命周期，函数等等中间加入一些公共逻辑。当然这个时候可以将所有的代码重复去写来实现功能，但是我们并不不推荐使用这种方式，无论是工作量、工作效率和后期维护来说都是不建议的，这个时候。）提供了一种非常灵活的方式，来将。中相同的业务逻辑进行抽离。
2023-08-03 13:12:23
812
原创 vue3.0是如何变得更快的
其次，编译器积极地检测模板中的静态节点、子树甚至数据对象，并在生成的代码中将它们提升到渲染函数之外。这样可以避免在每次渲染时重新创建这些对象，从而大大提高内存使用率并减少垃圾回收的频率。例如，具有动态类绑定和许多静态属性的元素将收到一个标志，提示只需要进行类检查。编译器还根据需要执行的更新类型，为每个具有动态绑定的元素生成一个优化标志。树遍历和属性比较，因为这在更新期间往往会产生最大的性能开销。需要的模块才会打入到包里，优化后的。）的情况下，节点结构保持完全静态。的打包体积只有原来的一半（
2023-08-03 13:11:16
469
原创 vuex 是什么？怎么使用它？什么场景下我们会使用到 vuex
采用集中式存储管理应用的所有组件的状态。每一个 vuex 的核心就是一个 store。store 基本上就是一个容器，它包含着应用中大部分的状态 state。则需要使用类似于 vuex 这样的集中状态的状态机来管理所有组件的状态。只用来读取的状态集中放在 store 中，改变状态的方式是提交。如果是 vue 的小型应用则没有必要使用 vuex，这个时候使用 vuex 反而会带来负担，可以通过。vuex 是专为 vue 应用程序开发的一个。，这是个同步的事物，异步逻辑应该封装在。
2023-08-03 12:59:53
171
原创 hash 模式和 history 模式的实现原理
2.刷新页面时，hash 模式可以加载 hash 值对应的页面；history 模式下如果没有处理，则会返回 404，一般需要后端对所有页面配置重定向到首页路由。1.首先是 url 的展示上 hash 有#而 history 没有。3.hash 可以兼容低版本的浏览器以及 ie。
2023-08-03 12:58:34
1130
原创 Vue3 对比 Vue2 的变化
而 Vue3 采用 getCurrentInstance/userRoute,userRouter 的方式来获取 10.对 props 的使用：Vue2 通过 this 的方式使用；4.编译优化：Vue 通过标记静态根节点来优化 Diff，Vue 则标记和提升所有静态根节点，Diff 的时候只需要去对比动态节点的内容。11.父子组件传值：Vue3 中当子组件向父组件返回数据时，如果使用的是自定义名称，像 backData，则需要在 emits 定义一下。1.源码组织方式变化：使用 TS 重写。
2023-08-03 12:52:36
371
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人