- 博客(57)
- 收藏
- 关注
RSS订阅原创 浅谈shadow dom
什么是shadow dom？有什么特点？有什么用？为什么需要 shadow-dom?怎么创建shadow dom？如何修改shadow dom的样式? shadow-dom 的未来
2022-07-04 20:19:44
2301
原创 在光标位置插入内容
const insertAtCursor =(myField, myValue) => {// myField：输入框元素, myValue: 要插入的值 if (document.selection) { // IE support myField.focus() const sel = document.selection.createRange() sel.text = myValue sel.select() } e
2022-03-31 15:47:51
1222
原创 【vue】mobile端上拉加载不流畅，出现回弹且滑动不流畅卡顿的情况
1、mobile端上拉加载不流畅，出现回弹且滑动不流畅卡顿的情况。问题原因：下拉将请求的数据追加到数组的后面，由于数据加载是异步的，在生成内容的时候Better-scroll会去自动计算一个高度，但是计算的时候可能还未加载完成数据，就会造成自动计算的高度与实际内容的高度不匹配的情况，就会出现无法滚动的问题。解决办法：在要展示的数据追加完成后，执行better-scroll实例的刷新方法refresh()；// this.scroll = new BScroll(this.$refs.wrapper,
2021-05-08 16:31:24
643
转载 【HTTP】HTTP发展史，HTTP/1和HTTP/2的区别
HTTP——浏览器和服务器之间的通信语言【HTTP/0.9】目的：用来传输体积很小的HTML文件。特点：只有请求行，没有请求头和请求体；没有返回头信息，只返回了数据；返回的文件内容是以ASCII字符流来传输的；【HTTP/1.0】核心诉求：支持多种类型文件的下载。引入请求头（期望返回的文件类型、采用什么类型压缩、提供什么语言的文件、文件的具体编码）和响应头（压缩类型、返回文件类型）为了减轻服务器的压力，HTTP1.0中提供了cache机制，用来缓存已经下载过的数据。服务器需要统计客户端
2021-01-19 17:10:37
502
转载 【学习总结】JS垃圾回收机制
垃圾数据：一些被使用之后就不需要的数据。垃圾数据回收分为手动回收（C/C++,何时分配内存、何时销毁内存都是由代码控制的）和自动回收。【栈垃圾回收】当函数执行结束，JS引擎通过向下移动ESP指针（记录调用栈当前执行状态的指针），来销毁该函数保存在栈中的执行上下文（变量环境、词法环境、this、outer）。【堆垃圾回收】一、代际假说第一个是大部分对象在内存中存在的时间很短，简单来说，就是很多对象一经分配内存，很快就变得不可访问；第二个是不死的对象，会活得更久。二、分类V8 中会把堆分为
2020-12-07 19:48:15
256
1
转载 【学习总结】JS内存机制
【JS是什么类型的语言】我们把在使用之前就需要确定其变量数据类型的称为静态语言。相反，我们把在运行过程中需要检查数据类型的语言称为动态语言。JS就是动态语言，因为声明变量之前不需要确定其数据类型。在赋值过程中，会存在数据类型转换的情况，我们把这种转换的操作称为隐式类型转换。而支持隐式类型转换的称为弱类型语言，不支持隐式类型转换的称为强类型语言。在这点上，C和JS都是弱类型语言。因此，JavaScript是一种弱类型的、动态的语言。弱类型，意味着你不需要告诉 JavaScript 引擎这个或那个变量
2020-12-07 19:16:08
294
转载 【学习总结】new一个对象的过程发生了什么，JS中this设计的缺陷以及应对方案
【new一个对象的过程发生了什么】function CreateObj(){ this.name = "极客时间"}var myObj = new CreateObj()在这段代码中，我们使用 new 创建了对象 myObj，那你知道此时的构造函数 CreateObj 中的 this 到底指向了谁吗？其实，当执行 new CreateObj() 的时候，JavaScript 引擎做了如下四件事：首先创建了一个空对象 tempObj；接着调用 CreateObj.call 方法，并将 t
2020-12-04 19:30:14
445
转载 【学习总结】作用域链和闭包
先看一段代码：function bar() { console.log(myName)}function foo() { var myName = "极客邦" bar()}var myName = "极客时间"foo()当这段代码执行到bar函数内部时，其调用栈的示意图如下所示。所以在执行到bar函数内部的时候，在bar函数的执行上下文中没有找到myName变量，不会说是顺着调用栈往下找myName变量，输出foo函数执行上下文中的myName的值"极客邦’，而是
2020-12-04 17:49:18
210
转载 【学习总结】块级作用域：var缺陷以及为什么要引入let和const？
正是由于 JavaScript 存在变量提升这种特性，从而导致了很多与直觉不符的代码，这也是 JavaScript 的一个重要设计缺陷。“探病因”——分析为什么在 JavaScript 中会存在变量提升，以及变量提升所带来的问题；“开药方”——介绍如何通过块级作用域并配合 let 和 const 关键字来修复这种缺陷在 ES6 之前，JS支持的作用域只有两种：全局作用域和函数作用域。相较而言，其他语言则都普遍支持块级作用域（代码块内部定义的变量在代码块外部是访问不到的，并且等该代码块中的代码执行完成之
2020-12-02 19:13:31
540
转载 【学习总结】调用栈
JS代码执行之前就进行编译并创建执行上下文，有以下几种情况：当 执行全局 JavaScript代码的时候，会编译全局代码并创建全局执行上下文，而且在整个页面的生存周期内，全局执行上下文只有一份。当调用一个函数的时候，函数体内的代码会被编译，并创建函数执行上下文，一般情况下，函数执行结束之后，创建的函数执行上下文会被销毁。当使用 eval 函数的时候，eval 的代码也会被编译，并创建执行上下文。在写JS代码的时候，有可能会遇到栈溢出的错误：出现这种错误是因为调用栈溢出，在执行JS代码的时候会
2020-12-02 15:39:50
448
转载 【学习总结】JS变量提升
JS的执行机制：先编译，再执行。JS变量提升：指在JS代码的编译阶段，JS引擎会把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后会给变量设置默认值undefined。编译完成后，再去执行代码。【编译阶段】从上图可以看出，输入一段代码，经过编译后，会生成两部分内容：执行上下文和可执行代码。执行上下文是 JavaScript 执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如 this、变量、对象以及函数等。在执行上下文中存
2020-12-02 15:00:57
347
原创 【vue】路由跳转以及参数获取
【路由跳转 query传参】this.$router.push({ path: '/home', query: { id: '111' }})【query传参 ，获取参数】const id = this.$route.query.id【路由跳转 params传参】this.$router.push({ name: 'home', params: { id: '111' }})【params传参 ，获取参数】const id = this.$ro
2020-12-01 16:40:48
2724
转载 【学习总结】浏览器的工作原理与实践——HTML、CSS、JavaScript是如何变成页面的？
从图中可以看出，左边输入的是 HTML、CSS、JavaScript 数据，这些数据经过中间渲染模块的处理，最终输出为屏幕上的像素。这中间的渲染模块就是我们要讨论的主题。渲染模块在执行过程中会被划分为很多子阶段，输入的 HTML 经过这些子阶段，最后输出像素。我们把这样的一个处理流程叫做渲染流水线。每个子阶段都有输入内容、处理过程、输出内容。1、⭐️构建DOM树因为浏览器无法直接理解和使用 HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树。要让DOM节点拥有正确的样式.
2020-11-17 19:46:22
443
1
转载 【学习总结】浏览器的工作原理与实践——从输入URL到页面展示的过程
从输入url到页面展示的完整流程示意图：从上图可以看出，这个过程可以大致描述为如下：首先，浏览器进程接收到用户输入的 URL 请求，浏览器进程便将该 URL 转发给网络进程。然后，在网络进程中发起真正的 URL请求。接着网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。浏览器进程接收到网络进程的响应头数据之后，发送“提交导航(CommitNavigation)”消息到渲染进程；渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML数据，接收数据的方式是直接和网络
2020-11-17 15:23:47
225
转载 【Vue3】新特性——虚拟DOM的底层原理
vue3对vdom进行了重写，使vue3突破了vdom的性能瓶颈，更快！推荐：vue3官方演示vdom的示例网站（https://vue-next-template-explorer.netlify.app）Vue3如何重写vdom⭐️入门当我们创建一个这样的静态 dom 元素的时候：vue3生成的vdom是这样的实际上 _createBlock 函数中才是我们创建的 dom，这是vdom最基础的形式，从这并不会感觉到vue2和vue3有什么不同。⭐️patch flag 优化静态树
2020-11-10 20:08:00
798
转载 【学习总结】浏览器的工作原理与实践——TCP协议
TCP协议：如何保证页面文件能被完整送达浏览器？在衡量 Web 页面性能的时候有一个重要的指标叫“FP（First Paint）”，是指从页面加载到首次开始绘制的时长。这个指标直接影响了用户的跳出率，更快的页面响应意味着更多的 PV、更高的参与度，以及更高的转化率。要想优化 Web 页面的加载速度，你需要对网络有充分的了解。而理解网络的关键是要对网络协议有深刻的认识，不管你是使用 HTTP，还是使用 WebSocket，它们都是基于 TCP/IP 的。因此，在这篇文章中，会重点介绍在 Web 世界中的
2020-11-06 18:52:04
289
转载 【学习总结】浏览器的工作原理与实践——chrome架构
李兵老师的浏览器的工作原理与实践，安排～第一次学习这门课，总结下重点，过段时间回过头来看可能会有不一样的思考，就像看自己以前写的代码一样……chrome架构：仅仅打开了1个页面，为什么会有四个进程？⭐️ 进程VS线程多线程可以并行处理任务，但是线程是不能单独存在的，它是由进程启动和管理的。那什么又是进程呢？一个进程就是一个程序的运行实例。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。从图中可以看
2020-11-06 14:44:51
1000
原创 【面经总结】——协议相关
http和https的区别；http1.0和http2.0的区别1、http和https的区别https的诞生是为了解决http的缺点。http的缺点：通信使用明文（不加密），内容可能会被窃听不验证通信方的身份，因此有可能遭遇伪装无法证明报文的完整性，所以有可能已遭篡改为了解决 HTTP 协议的以上缺点，由网景（NetScape）公司设计了 SSL 协议。所谓的 HTTPS...
2019-09-14 17:53:09
155
原创 【javascript】闭包
⭐️一、闭包闭包是指有权访问一个函数作用域内部变量的函数。闭包举例说明～function test(a,b){ return function (c,d) { var c=a; //看这里～ var d=b; //看这里～ if(c>d){ ...
2019-09-02 17:45:34
121
原创 【javascript】执行环境和作用域链，延长作用域链
要说清楚什么是作用域链，首先要清楚的是执行环境的概念。⭐️执行环境和作用域链执行环境定义了函数或变量有权访问的其他数据，每一个执行环境都有一个变量对象（环境中定义的所有变量和函数都都保存在这个对象中）全局执行环境是最外层的一个执行环境，在web浏览器中，全局执行环境被认为是window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码被执行完毕...
2019-09-01 11:17:58
375
转载 【es6】箭头函数this指向问题
大部分情况下，this总是指向调用该函数的对象。但对于箭头函数来说并不是这样，是根据外层（函数或者全局）作用域来决定this。对于箭头函数但this,总结如下：箭头函数不绑定this,箭头函数中的this相当于普通变量。箭头函数的this的寻值行为与普通变量相同，在作用域中逐级寻找。箭头函数的this无法通过bind,call,apply来直接修改（可以间接修改）。改变作用域中this...
2019-08-18 17:02:22
255
转载 【qs】qs.parse() qs.stringify() JSON.parse() JSON.stringify()
什么是qs 用一个例子来说明四个的区别
2019-08-12 19:13:32
557
原创 【react】react实现长按弹出删除按钮
效果图如下：长按之前：长按之后：若不想删除，在除删除按钮以外的地方单击即可。下面是在react中的实现//ThanksStyle.Item是要添加长按事件的对象<ThanksStyle.Item key={index} onTouchStart={() => this.onItemTouchStart(index)} onTouchEnd={this.onIte...
2019-08-09 13:26:26
3335
原创 【 react】react实现页面后退按钮（goBack（））
安装 historynpm install history --save-dev在state里面请求 history，并实例化this.state = { history: require("history").createHashHistory, };给图片（按钮）添加点击事件<div className="goback">...
2019-07-26 16:00:28
9627
原创 【web前端性能优化】结合服务端的优化 缓存 服务端性能优化
一、缓存浏览器与服务器之间通过http header传递缓存信息，通过设置http header配置缓存机制。cache-controlcache-control可以在http request header中存在也可以在http response header中存在其作用就是让浏览器与服务器相互知道各自那边的缓存策略情况。cache-control的属性max-age:指定缓存...
2019-06-16 17:58:34
401
原创 【web前端性能优化】文件加载与执行过程中的优化点、图片的懒加载和预加载、重绘与回流、浏览器存储
学习笔记：一、加载和执行过程中的优化点理解浏览器端HTML、CSS、JS的加载过程，学习掌握CSS、JS加载过程中的优化点。HTML渲染过程中的一些特点。顺序执行，并发加载是否阻塞依赖关系引入方式顺序执行，并发加载HTML加载是根据词法分析顺序执行的，遇到引入文件并发加载，但不同浏览器会有不同的并发上限。是否阻塞CSS阻塞：CSS阻塞页面的渲染CSS阻塞JS的执行...
2019-06-16 15:56:08
708
原创 【web前端性能优化】DNS解析优化、网络部分优化、资源的合并与压缩、图片相关的优化
学习笔记：性能黄金准则：只有10%~20%的最终用户响应时间花在了下载HTML文档上，其中的80% ~90%时间花在了下载页面中的所有组件上。网站加载的速度严重影响用户体验，也决定着这个网站的生死存亡。下面总结一下前端工程师如何来提高页面的加载速度。首先，我们要知道，浏览器从发送一个请求到返回都经历了什么？第一步：浏览器提出域名解析请求,并将该请求发送给本地的域名服务器（domain 与...
2019-06-14 21:17:21
718
转载 【CORS跨域】
JSONP跨域只能使用GET提交，而且传输数据量小，另一种跨域方案——CORS相对于JSONP，CORS支持POST提交，而且用起来非常简单，CORS跨域只需要在响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，就可以跨域操作了。CORS是W3C标准，全称是跨域资源共享（Cro...
2019-06-09 15:23:22
165
转载 DNS域名解析
DNS解析过程及原理：客户端提出域名解析请求，并将该请求发给本地的域名服务器。当本地的域名服务器收到请求后，就先查询本地的缓存，如果有该记录项，则本地的域名服务器就直接把查询的结果返回。如果本地的缓存中没有该项记录，则本地的域名服务器就直接把请求发给根域名服务器，然后根域名服务器再返回给本地域名服务器一个查询域（根的子域）的主域名服务器的地址。本地服务器再向上一步返回的域名服务器发送请求...
2019-06-08 19:58:36
100
转载 【JavaScript】defer/async 原型 进程和线程
script标签的两个属性defer和async有什么区别原型进程和线程1.defer和async的区别defer和async是script标签的两个属性，用于在不阻塞文档解析的前提下，控制脚本的下载和完成。在介绍他们之前，我们有必要先了解一下页面的加载和渲染过程：浏览器通过HTTP协议请求服务器，获取到HTML文档并开始从上到下解析，构建DOM；在构建DOM的过程中，若遇到外...
2019-06-08 17:06:36
222
转载 【网络协议】TCP连接断连问题
一个TCP连接在完成三次握手之后便建立完毕；此后，连接的两端即可进行信息的相互传递。TCP连接一旦建立，只要通信双方的中间节点（网卡、交换机、路由器等网络设备）工作正常，那么在通信双方中的任意一方主动关闭连接之前，TCP连接都将被一直保持下去。TCP连接的这种特性，使得一个长期不交换任何信息的空闲连接可以长期保持数小时、数天、甚至数月。中间路由器可以崩溃、重启，网线可以被拔掉再接通，只要两端的主...
2019-06-08 09:40:53
1679
转载 【JavaScript】为什么JavaScript是单线程的？
为什么JavaScript是单线程的？单线程：同一时间只能做一件事。JS是单线程语言，与他的用途有关。作为浏览器的脚本语言，JS的主要用途是与用户互以及操作DOM，这就决定了它只能是单线程语言。比如，JavaScript同时有两个线程，一个线程给某个节点上添加内容，一个线程要删除这个节点，那么浏览器应该以哪个线程为准？这就造成了DOM渲染的冲突。所以JS是单线程的原因就是为了避免DOM渲染的...
2019-06-08 08:50:48
540
转载 事件机制、缓存机制
腾讯一面 6月3号 1小时8分钟JS事件机制强缓存与协商缓存，各有哪些头，都有什么作用为什么JS是单线程的，那JS可以实现多线程吗？如果可以，怎么实现HTTP三次握手，为什么是三次？如果中间网断了连接还存在吗？要页面加载完之后再执行JS，有什么办法，defer async有什么区别事件循环讲一下原型假设IE低版本浏览器无forEach方法，要怎么实现（原型啊啊啊）输入URL...
2019-06-07 10:33:09
554
转载 【web攻击技术】
《图解HTTP》读书笔记：★web应用攻击技术对web应用的攻击模式分为主动攻击和被动攻击。1.以服务器为目标的主动攻击主动攻击是攻击者通过直接访问web应用，把攻击代码注入的攻击模式。由于该模式是直接针对服务器上的资源进行攻击，因此攻击者需要能够访问到那些资源。主动攻击模式里具有代表性的就是SQL注入攻击和OS命令注入攻击2.以服务器为目标的被动攻击被动攻击是指利用圈套策略执行攻击...
2019-06-03 10:43:52
715
1
转载 【腾讯】面经整理
★vue的生命周期vue实例有完整的生命周期，vue实例从创建到销毁的过程就是vue的生命周期。每一个组件或者实例都会经历一个完整的生命周期。总共分为三个阶段：初始化、运行中、销毁组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作。挂载数据，绑定...
2019-06-02 17:05:42
5295
原创 【virtual dom】虚拟DOM
vdom是什么，为何会存在vdomvdom如何应用，核心API是什么介绍一下diff算法（vdom80%依赖diff算法）★什么是vdom,为何会存在vdom设计一个需求场景：将data数据展示成一个表格，随便修改一个信息，表格也跟着修改<body><div id="container"></div><button id="change"...
2019-05-31 20:50:53
188
转载 【4399】面经总结
★HTTP 和 HTTPS的区别：超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息。HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此HTTP协议不适合传输一些敏感信息，比如信用卡号、密码等。为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS...
2019-05-27 23:22:28
779
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人