- 博客(85)
- 收藏
- 关注
RSS订阅转载 Web 性能优化：控制请求的优先级
前言ByteDance Web Infra 团队里面有两个方向专门关注前端性能，分别从代码和监控对性能优化有很深入的研究。性能优化有很多角度，其中一个关键是控制关键请求的优先级，从而达到性能优化的效果。本文以一种相对系统的方式来进行该方法的探讨。也欢迎有兴趣的读者关注我们，和我们进行交流。构建一个网站服务看似简单：发送 HTML，浏览器识别出接下来需要加载什么资源。然后，我们耐心的等待页面就绪。你不知道的是，这背后发生了很多事情。你有没有想过，浏览器是如何判断哪些资产需要以什么顺序被...
2022-05-06 15:44:03
767
转载 三次握手与四次挥手超详解
三次握手当面试官问你为什么需要有三次握手、三次握手的作用、讲讲三次三次握手的时候，我想很多人会这样回答：首先很多人会先讲下握手的过程：1、第一次握手：客户端给服务器发送一个 SYN 报文。2、第二次握手：服务器收到 SYN 报文之后，会应答一个 SYN+ACK 报文。3、第三次握手：客户端收到 SYN+ACK 报文之后，会回应一个 ACK 报文。4、服务器收到 ACK 报文之后，三次握手建立完成。作用是为了确认双方的接收与发送能力是否正常。这里我顺便解释一下为啥只有
2022-04-29 16:30:31
300
转载 git rebase（变基）详解
一、提交节点图解首先通过简单的提交节点图解感受一下rebase在干什么两个分支master和feature，其中feature是在提交点B处从master上拉出的分支master上有一个新提交M，feature上有两个新提交C和D此时切换到feature分支上，执行如下命令，相当于是想要把master分支合并到feature分支（这一步的场景就可以类比为我们在自己的分支feature上开发了一段时间了，准备从主干master上拉一下最新改动）git checkout featur.
2022-04-29 13:53:09
7202
原创 Vue中VNode的属性
示例：this.$createElement('img', { style: 'width: 100%',attrs: {src: 'https://scpic.chinaz.net/files/pic/pic9/201910/zzpic20739.jpg'}}){ // 和`v-bind:class`一样的 API // 接收一个字符串、对象或字符串和对象组成的数组 'class': { foo: true, bar: false }, /...
2022-02-18 14:53:30
1313
原创 Vue常用修饰符
1.lazy顾名思义，lazy修饰符作用是，改变输入框的值时绑定的lazyValue不会改变，当光标离开输入框时，v-model绑定的值lazyValue才会改变。<!--html--><input type="text" v-model.lazy="lazyValue"><div>{{lazyValue}}</div><!--data-->data() { return { lazyValue...
2022-01-24 17:37:41
2720
转载 JavaScript中的文档碎片
JavaScript中，文档碎片独立于DOM树之外，存在于内存中，在创建之初为一个空白的文档片段，我们可以使用createDocumentFragment来创建let fragment = document.createDocumentFragment();对文档碎片的操作，包括插入节点，删除节点的API都和其他DOM元素相同，但是也存在一些不同将DOM树中的元素插入到文档碎片中的时候，DOM树中的元素会删除<body> <div id="t1">t.
2021-10-29 16:34:17
1122
转载 JS中类方法、对象方法、原型方法的区别
1、对象方法：包括构造函数中的方法以及构造函数原型上面的方法；2、类方法：其实这里的类就是一个函数。在js中由于函数也是一个对象，所以可以为函数添加属性以及方法，这种方法在node中用的比较多；3、原型方法：一般用于对象实例共享，在原型上面添加该方法，就能实现共享。这样就不用每一次初始化一个实例的时候，为其分配相应的内存了。Javascript中的function作为构造函数时，就是一个类，搭配上new操作符，可以返回一个对象。function People(name){ this.n
2021-08-31 15:31:45
1131
转载 vue由浅入深的50个知识点
荣耀黄金1. Vue的优点？Vue的缺点？优点：渐进式，组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开缺点：单页面不利于seo，不支持IE8以下，首屏加载时间长2. 为什么说Vue是一个渐进式框架？渐进式：通俗点讲就是，你想用啥你就用啥，咱也不强求你。你想用component就用，不用也行，你想用vuex就用，不用也可以3. Vue跟React的异同点？相同点：1.都使用了虚拟dom 2.组件化开发 3.都是单向数据流(父子组件之间，不建议子修改父传下
2021-07-14 11:23:51
700
转载 HTTP和HTTPS的区别以及加密方式
目录基本区别Http协议运行在TCP之上，明文传输，客户端与服务器端都无法验证对方的身份；Https是身披SSL(Secure Socket Layer)外壳的Http，运行于SSL上，SSL运行于TCP之上，是添加了加密和认证机制的HTTP。二者之间存在如下不同：端口不同：Http与Https使用不同的连接方式，用的端口也不一样，前者是80，后者是443；资源消耗：和HTTP通信相比，Https通信会由于加解密处理消耗更多的CPU和内存资源；开销：Https通信需要证书，而证书
2021-07-14 11:17:09
712
原创 Vue中的Provide/Inject 实现响应式数据
介绍：provide/inject 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。缺点：祖先组件不需要知道哪些后代组件使用它提供的属性。 后代组件不需要知道被注入的属性来自哪里。 会将应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。 所提供的属性是非响应式的。最近在使用这个进行深层嵌套传值的时候，发现只能传固定值，传递不了响应式的数据，查官网提示得：provide 和 inject..
2021-07-01 17:14:55
588
原创 解决cnpm : 无法加载文件 C:\Users\---\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microso
打开PowerShell，以管理员身份运行然后输入set-ExecutionPolicy RemoteSigned最后输入A
2021-06-21 15:50:24
116
原创 http1.0和http1.1以及http2.0的区别
HTTP的基本优化影响一个 HTTP 网络请求的因素主要有两个：带宽和延迟。 带宽：如果说我们还停留在拨号上网的阶段，带宽可能会成为一个比较严重影响请求的问题，但是现在网络基础建设已经使得带宽得到极大的提升，我们不再会担心由带宽而影响网速，那么就只剩下延迟了。 延迟： 浏览器阻塞（HOL blocking）：浏览器会因为一些原因阻塞请求。浏览器对于同一个域名，同时只能有 4 个连接（这个根据浏览器内核不同可能会有所差异），超过浏览器最大连接数限制，后续请求就会被阻塞。
2021-05-28 11:00:16
155
转载 排查内存泄漏导致的页面卡顿以及优化
???? 内存泄漏的定义那什么是内存泄漏呢？借助别的大佬给出的定义，内存泄漏就是指由于疏忽或者程序的某些错误造成未能释放已经不再使用的内存的情况。简单来讲就是假设某个变量占用100M的内存，而你又用不到这个变量，但是这个变量没有被手动的回收或自动回收，即仍然占用100M的内存空间，这就是一种内存的浪费，即内存泄漏???? JS的数据存储JavaScript的内存空间分为栈内存和堆内存，前者用来存放一些简单变量，后者用来存放复杂对象简单变量指的是JS的基本数据类型，例如：String、Numb
2021-04-14 16:54:18
734
1
原创 git分支操作（查看，新建，合并，删除）
一、clone Repositoryclone Github 上的Repository，如下：git clone git@github.com:xxxxxx.git二、分支查看A、查看本地分支使用 git branch命令，如下：$ git branch* masterB、查看远程分支命令如下：git branch -rC、查看所有分支命令如下：git branch -a三、分支操作A、本地创建新的分支命令如下：git bran..
2021-04-12 10:21:11
288
转载 Vue中key的作用
Vue中key属性的作用在列表渲染时使用key属性 使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候，如果不使用key属性，Vue会产生警告，那么在这个时候key属性的作用是什么呢？官方文档中说：当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索.
2021-03-23 11:06:44
257
原创 vue中keep-alive
Keeplive组件介绍 ⑴．为什么要使用keep-alive在vue中，我们使用component内置组件或者vue-router切换视图的时候，由于vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如：搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等。⑵．keep-alive的作用Keep-alive是一个vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁...
2021-02-28 23:02:27
618
原创 localStorage/sessionStorage/Cookies不同页面值共享情况
1、不同浏览器无法共享localStorage和sessionStorage的值。2、相同浏览器下，并且是同源窗口（协议、域名、端口一致），不同页面可以共享localStorage，Cookies值，通过跳转的页面可以共享sessionStorage值。3、关于sessionStorage，通常说sessionStorage关闭页面即消失，但是通过跳转的页面可以共享sessionStorage值，跳转有多种方式： (1)<a href="同源页面" target="_self"&...
2021-01-25 15:46:28
8571
转载 JavaScript 执行机制
javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：let a = '1';console.log(a);let b = '2';console.log(b);复制代码然而实际上js是这样的：setTimeout(function(){ console.log('定时器开始啦')});new Promise(function(resolv
2020-11-11 11:31:21
131
转载 JS中如何跳出循环/结束遍历方法
序号 方法 break continue return return true return false 结论 1 for循环 成功 跳出本次循环 不合法 不合法 不合法 √ 2 Array.forEach() 不合法 不合法 跳出本次循环 跳出本次循环 跳出本次循环 × 3 for...in 成功 跳出本次循环 不合法 不合法 不合法
2020-10-14 11:28:59
3754
转载 cookie、localStorage、sessionStorage、session
简介在以前经常用到的cookie、session，但在H5中新引入了新的浏览器本地缓存方案。因为大家使用的不太规范用来作为本地储存工具，在下次请求时会默认带上cookie中的数据导致浪费性能和流量。下面就从开始介绍为什么产生的cookie，它的出现是为了解决什么问题，它有什么问题；后面localStorage是为什么产生，它又解决了那部分的问题。最后是cookie、session、localStorage、sessionStorage之间的对比。cookie首先了解为什么会产生cookie?
2020-08-15 17:02:09
389
原创 ECharts参数设置（含注释）
// 默认色板color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700', '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],// 图表标题t...
2020-08-04 10:32:42
701
原创 缓存机制(浏览器、DNS、CDN)
DNS 缓存什么是DNS全称 Domain Name System ,即域名系统。万维网上作为域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。DNS协议运行在UDP协议之上，使用端口号53。DNS解析简单的说,通过域名,最终得到该域名对应的IP地址的过程叫做域名解析（或主机名解析）。www.zuofc.com (域名) - DNS解析 -> 111.222.33.444 (IP地址)复制代码DNS缓
2020-07-31 16:57:53
2334
1
转载 vue实战技巧
1. 内部监听生命周期函数今天产品经理又给我甩过来一个需求，需要开发一个图表，拿到需求，瞄了一眼，然后我就去echarts官网复制示例代码了，复制完改了改差不多了，改完代码长这样<template> <div class="echarts"></div></template><script>export default { mounted() { this.chart = echarts.init(this.$el)
2020-07-03 13:55:50
297
原创 exports、module.exports和export、export default
exports、module.exports和export、export default
2020-06-30 17:51:55
154
原创 前端导出二进制流文件以及类型对应表
谈起文件流处理，一般大家都不会太在意前端的文件类型数据处理，今天我们来谈一谈前端如何处理文件类型数据。在这里不得不提前相关文件流的操作对象及接口。 内置文件流接口：Blob（文件流接口定义） 内置文件流对象 ：File（单文件，继承于接口Blob，故可使用Blod的方法级）和 FileList（多文件集合） 内置文件流读取对象 ：FileReader（单文件读取） //处理流文件handleFile(data){constblo...
2020-05-29 17:17:02
1848
原创 怎么优化if else语句
最近在写代码的时候，用了不少if else,当然不影响功能，但是后期维护感觉更加麻烦了，有点难理解，就像是回调地狱一样，看了让人害怕，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，这我也记录下，简单优化下臃肿的代码，起码看起来整洁一些。一：switch case 我相信这也是大家平时常用优化if else的一种方法，写法看起来比较易懂，性能并没有提高。举例： if (number === 0) { } else if (number =...
2020-05-18 16:58:29
747
原创 style加上scoped后，如何加自定义样式(样式穿透)
1.什么是scoped 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化2.scoped的实际应用<style scoped>.example { color: red;}</style><template> <div..
2020-05-15 18:01:29
1758
转载 数组中遍历方法以及跳出循环方法
先看下面这段代码：在for循环中想要调出整个循环是break；但是在forEach中使用break不仅不能调出整个循环，还会报错，使用return也不行；其实这个问题是由一道编程题引发的，使用循环判断数组中是否包含某个值；当我想用forEach来循环时，发现在找到该值之后没法提前调出循环，就会造成时间复杂度的浪费，增加冗余计算，除了用for循环语句来代替forEach，还有什么解决方法呢，forEach究竟怎么跳出循环。1、使用try...catch来调出循环当判断条件满足时，抛
2020-05-15 11:23:29
4976
5
原创 js中的隐式类型转换与包装类
先说一下js中的数据类型：基本类型Boolean 布尔值 Null 空 Undefined 未定义 Number 数字 String 字符串 Symbol es6新增的一种基本数据类型一种类似于标记的一个数据类型我是这么理解的， 这个接触不多，应该没有人会用这个去做类型转换的吧。。。引用类型（Object）Object 类型 Array 类型 Date 类型 Reg...
2020-04-28 11:01:45
188
原创 Vue中的 computed 和 watch
computedcomputed看上去是方法，但是实际上是计算属性，它会根据你所依赖的数据动态显示新的计算结果。计算结果会被缓存，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算watcherwatcher 更像是一个 data 的数据监听回调，当依赖的 data 的数据变化，执行回调...
2020-02-25 17:11:55
234
原创 前端性能优化-重绘与重排
重排和重绘网页生成过程：HTML被HTML解析器解析成DOM 树 css则被css解析器解析成CSSOM 树 结合DOM树和CSSOM树，生成一棵渲染树(Render Tree) 生成布局（flow），即将所有渲染树的所有节点进行平面合成 将布局绘制（paint）在屏幕上第四步和第五步是最耗时的部分，这两步合起来，就是我们通常所说的渲染。（之前有博客详细解释了）网页生成的...
2020-01-15 15:29:02
806
原创 堆叠上下文顺序
一：什么是“层叠上下文”层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。如果一个元素含有层叠上下文，(也就是说...
2019-12-24 16:15:30
239
原创 web前端安全以及防范措施
以下简单介绍这几种常见的 web 安全问题：XSS CSRF SQL注入 点击劫持除了这个还有同源策略，下面先简单说下这个什么是同源策略？同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。不受同源策略限制的：1、页面中的链接，重定向以及表单提交是不会受到...
2019-11-24 16:54:55
2103
原创 ES6—解构赋值及用法
概述解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。 ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。我的理解是解析对象的解构，然后取出值的过程。es6中对变量的赋值遵循一个规则，只要左右两边的模式相同，就可以进行合法赋值。...
2019-11-06 16:48:19
683
原创 Grid网格布局用法
一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能...
2019-10-12 14:18:20
702
原创 JavaScript 字符串常用方法总结
字符串常用方法主要有以下这些：toUpperCase()：把一个字符串全部变为大写toLowerCase()：把一个字符串全部变为小写indexOf(substr, [start])：会搜索制定字符串出现的位置，有返回索引，没有返回-1lastIndexOf(substr, [start])：查询子字符串，对大小写敏感，返回字符串中子串第一处出现的索引（从右到左）。如果没有匹配项，...
2019-09-18 09:59:25
215
转载 在浏览器输入 URL 回车之后发生了什么
前言这个问题已经是老生常谈了，更是经常被作为面试的压轴题出现，网上也有很多文章，但最近闲的无聊，然后就自己做了一篇笔记，感觉比之前理解更透彻了。这篇笔记是我这两天看了数十篇文章总结出来的，所以相对全面一点，但由于我是做前端的，所以会比较重点分析浏览器渲染页面那一部分，至于其他部分我会罗列出关键词，感兴趣的可以自行查阅，注意：本文的步骤是建立在，请求的是一个简单的 HTTP 请求，没有 ...
2019-09-03 20:22:46
189
原创 js实现斐波那契数列以及优化
首先解释下什么是斐波那契数列： 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, ... 在种子数字 0 和 1 之后，后续的每一个数字都是前面两个数字之和。解法1：function fibonacci(n) { if(n==0 || n == 1) return n...
2019-08-29 20:45:11
1466
原创 js中的this指向理解
1：为什么要使用this？this提供了一种更优雅的方法来隐式'传递'一个对象的引用，因此可以将API设计得更加简洁并且易于复用。 需要注意大家一般会有的两个误解：（1）this指向函数自身（2）this指向函数的作用域作用域无法通过JavaScript代码访问，它存在于JavaScript引擎内部。每当把this和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的！...
2019-08-21 14:16:58
270
原创 js中的垃圾回收机制
1. 作用JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。2.JS垃圾回收方式方式一：标记清除（最常用的垃圾收集方式） javascript中最常用的垃圾收集方式就是标记清除。当变量进入环境时，会标记为"进入环境"，而当变量离开环境时，会标...
2019-07-23 20:47:41
1267
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人