- 博客(61)
- 收藏
- 关注
RSS订阅原创 HTTP 请求流程：为什么很多站点第二次打开速度会很快
浏览器中的 HTTP 请求从发起到结束一共经历如下八个阶段：构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接； 构建请求。浏览器构建请求行，构建好后，准备发起网络请求； 查找缓存。在真正发起请求前浏览器会查询缓存中是否有请求资源副本，有则拦截请求，返回资源副本，否则进入网络请求； 准备 IP 地址和端口。HTTP 网络请求需要和服务器建立 TCP 连接，而建立 TCP 连接需要准备..
2021-12-02 20:47:17
1806
原创 TCP 协议：如何保证页面文件能被完整送达浏览器
IP 头是 IP 数据包开头的信息，包含 IP 版本、源 IP 地址、目标 IP 地址、生存时间等信息； UDP 头中除了目的端口，还有源端口号等信息； IP 负责把数据包送达目的主机； UDP 负责把数据包送达具体应用； 对于错误的数据包，UDP 不提供重发机制，只是丢弃当前的包，不能保证数据的可靠性，但是传输速度非常块； TCP 头除了包含了目标端口和本机端口号外，还提供了用于排序的序列号，保证了数据完整地传输，它的连接可分为三个阶段：建立连接、传输..
2021-12-02 20:46:44
1861
原创 Chrome 架构：仅仅打开了 1 个页面，为什么有 4 个进程
线程和进程区别：多线程可以并行处理任务，线程不能单独存在，它是由进程来启动和管理的。一个进程是一个程序的运行实例。线程和进程的关系：1、进程中任意一线程执行出错，都会导致整个进程的崩溃。2、线程之间共享进程中的数据。3、当一个进程关闭后，操作系统会回收进程所占用的内存。4、进程之间的内容相互隔离。单进程浏览器：1、不稳定。单进程中的插件、渲染线程崩溃导致整个浏览器崩溃。2、不流畅。脚本（死循环）或插件会使浏览器卡顿。3、不安全。插件和脚本可以获取到操作系统任意资源。多进程浏览器：1、解决不稳定。
2021-12-02 20:46:01
2175
原创 // 实现一个add方法，使计算结果能够满足如下预期：add(1)(2)(3) = 6；add(1, 2, 3)(4) = 10；add(1)(2)(3)(4)(5) = 15；
// 实现一个add方法，使计算结果能够满足如下预期：add(1)(2)(3) = 6;add(1, 2, 3)(4) = 10;add(1)(2)(3)(4)(5) = 15; function add() { // 第一次执行时，定义一个数组专门用来存储所有的参数 var _args = Array.prototype.slice.call(arguments); // 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值 v
2021-11-30 20:57:03
981
原创 [‘1‘,‘2‘,‘3‘].map(parseInt)详解
map函数map 方法 (Array) (JavaScript)对数组的每个元素调用定义的回调函数并返回包含结果的数组。array1.map(function(a,b,c){a 是数组中的每一项即‘1‘’2‘’3‘b 是数组的下标 即0 1 2c 是原数组 即 array1})如下例子var arr = ['1','2','3']; function fn(num,a,c){ console.log(num,a,c); //num a
2021-11-28 21:50:10
1299
原创 JS数据类型转换规则
1 如果只有一个值,判断这个值是真还是假,遵循只有0,NaN,'',null,undefined这五个是假的,其余的都是真 2 如果是两个值比较是否相等,遵循以下规则: ![]->false []==[]->false //val==val 两个值可能不是同一个数据类型的,如果是两个等于号比较的话,会默认的进行数据类型转换 规则: 1 对象==对象 永远不相等 2 对象==字符串 先将对象转换成字符串(调用toString的方法),然后再进行比较 []空数
2021-11-27 20:17:57
482
原创 JS中的Math方法
Math是数学函数，但又属于对象数据类型typeof Math=> ‘object’console.dir(Math)查看Math的所有函数方法。1，Math.abs()获取绝对值Math.abs(-12) = 122，Math.ceil() and Math.floor()向上取整和向下取整 console.log(Math.ceil(12.03));//13 console.log(Math.ceil(12.92));//13 console.log(Math...
2021-11-27 15:17:31
213
原创 前端优化（css,js,网络）
css CSS优化、提高性能的方法有哪些 多个css合并，尽量减少HTTP请求 将css文件放在页面最上面 移除空的css规则 避免使用CSS表达式 选择器优化嵌套，尽量避免层级过深 充分利用css继承属性，减少代码量 抽象提取公共样式，减少代码量 属性值为0时，不加单位 属性值为小于1的小数时，省略小数点前面的0 使用CSS Sprites将多张图片拼接成一张图片，通过CSS background 属
2021-11-26 20:22:50
558
原创 vue不同页面间传参的各种方式
一、使用router-link进行路由导航，传递参数=> 父组件中：使用<router-link to="/需要跳转的路由路径/需要传递的参数"></router-link>标签进行导航child是子页面路由路径，123是需要传递的参数=>子组件中：使用this.$route.params.num来接收路由参数此时，页面上渲染出路由传递过来的参数num，呈现123=>路由配置文件中：num用来为参数占位=>地址栏中...
2021-11-26 20:21:48
5612
原创 在浏览器地址栏输入url到页面显示出来，这之间发生了什么?
这之间的过程概括的来讲是以下六步：1，DNS解析2，TCP连接3，发送HTTP请求4，服务器处理请求并返回HTTP报文5，浏览器解析渲染界面6，连接结束那更加具体的说呢，是以下的步骤：输入URL后，首先找到这个URL域名服务器的ip,为了寻找这个IP,浏览器会首先查找缓存，查找缓存的顺序是 浏览器缓存=》系统缓存=》路由器缓存，如果缓存中没有，则查找系统的host文件，如果还是没有找到的话，就去DNS服务器上去请求服务；得到服务器的IP地址后,浏览器根据这个IP以及相应的
2021-11-26 20:21:25
284
原创 [] == (非)[]的为什么结果是true
==和===区别==， 两边值类型不同的时候，要先进行类型转换，再比较===，不做类型转换，类型不同的一定不等。==类型转换过程：如果类型不同，进行类型转换判断比较的是否是 null 或者是 undefined, 如果是, 返回 true .判断两者类型是否为 string 和 number, 如果是, 将字符串转换成 number判断其中一方是否为 boolean, 如果是, 将 boolean 转为 number 再进行判断判断其中一方是否为 object 且另一方为 string、.
2021-11-26 20:21:05
322
原创 浏览器缓存机制
浏览器缓存浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下 先根据这个资源的一些http header判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器； 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源； 强缓存和协商..
2021-11-26 20:17:06
109
原创 js的下载是阻塞的吗？
如果js脚本不加defer和async属性的话，确实是阻塞的，但是如果加上defer或者async属性的话，最起码下载时，js是并行下载的，而解析代码的时候，具体情况具体分析。引用js文件格式如下：<script type="text/javascript" defer="defer" async="true/false" src="js文档地址"></script>defer="defer":该属性用来通知浏览器，这段脚本代码将不会产生任何文档内容。例如JavaScr
2021-11-26 19:58:45
273
原创 DOM树和CSSOM树的构建和渲染
页面的渲染过程当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。会经历以下几个步骤：1、HTML 的加载页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析2、其他静态资源的下载HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如 CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停 下来，等 JS 文件
2021-11-26 19:35:41
2433
原创 Animation和Transition的区别
区别 transition animation 是否能自动执行 不能，需要事件触发，比如hover 能 能否重复发生 不能，除非在一次触发 能 能否包含多个状态 不能，只有开始和结束状态 能，比如从0% 到100%，任意指定过渡状态 能否暂停 不能，一次性 能，比如hover事件触发暂停 能否定义速度曲线 能 能 能否定义某个属性值过渡 能 能 ...
2021-11-26 18:57:27
260
原创 js 中的类
ES5 中定义一个类function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);ES6以后的语法（可以看做是ES5的语法糖）//定义类class Point { constructor(x, y) {
2021-11-23 21:27:28
83
原创 Event Loop以及宏任务和微任务的理解
首先给一段例子：js 是单线程执行的，js中的任务按顺序一个一个的执行，但是一个任务耗时太长；那么后面的任务就需要等待，为了解决这种情况，将任务分为了同步任务和异步任务；而异步任务又可以分为微任务和宏任务。代码示例：console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0);Promise.resolve().then(function() { console.l
2021-11-14 21:53:44
961
4
原创 Vue的计算属性和监听属性
1. 计算属性computed在使用时，一定要注意，函数里面的变量都会被监听，只要里面的某一个值变动，便会将整个函数执行一遍。 而 watch 只是监听某一个值，若是监听的值里面也有很多变量，也会全部监听 2. 计算后的属性可不在 data 中定义，如果定义会报错，因为对应的computed作为计算属性定义并返回对应的结果给这个变量,变量不可被重复定义和赋值。 而 watch 监听 data 中定义的变量变化computed特性1.是计算值，2.应用：就是简化tempalte里面{{.
2021-11-14 20:32:07
1032
原创 JS基本类型和引用类型的区别
1.基本类型基本的数据类型有：`undefined，boolean，number，string，null.基本类型的访问是按值访问的，就是说你可以操作保存在变量中的实际的值。 基本类型有以下几个特点：1.基本类型的值是不可变得：任何方法都无法改变一个基本类型的值，比如一个字符串：var name = 'jozo';name.toUpperCase(); // 输出 'JOZO'console.log(name); // 输出 'jozo'会发现原始的name并未发生改变，而是调
2021-11-05 16:15:16
910
原创 JS面试题
单选题JS基础js概念与类型检测 以下不属于 typeof 运算符返回值的是？ A."string"B."function"C."object"D."null"复制代码 执行以下代码，错误的输出结果是 A. 输入：typeof{"x":1}输出："object"B. 输入：typeof1输出："number"C. 输入：typeof[{x:1}]输出："array"D. 输入：typeofNaN输出："number"复制...
2021-11-05 16:14:21
1223
1
原创 双飞翼布局（css）
1. DOM结构 <div class="head"></div> <div class="container column"> <div class="center"></div> </div> <div class="left column"></div> <div class="right column"></div>
2021-10-27 21:46:42
2020
2
原创 圣杯布局(css)
圣杯布局1. DOM结构<div id="header"></div><div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div></div><d
2021-10-27 21:01:21
1229
原创 行内元素和块级元素如何居中
1.水平居中：（1）行内元素： 对该行内元素的父元素设置text-align:center（2）块级元素： 对该块级元素设置margin:0 auto（3）弹性盒子中的水平居中： 将某元素定义为弹性盒子：display:flex; 然后在水平方向居中盒子内的元素：justify-content:center;2.垂直居中：（1）行内元素： 方法一：对该行内元素的父元素设置line-heig...
2021-10-27 20:14:44
1078
原创 JavaScript原型链--浅析
构造函数创建对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // KevinPerson 就是一个构造函数，我们使用 new 创建了一个实例对象 personprototype每个函数都有一个 prototype 属性每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对
2021-10-26 19:28:01
159
原创 js中的数据类型判断的四种方式
众所周知，js有7种数据类型 1. null 2. undefined 3. boolean 4. number 5. string 6. 引用类型（object、array、function） 7. symbol判断类型有以下4种判读方法第一种方式:typeof typeof null ---> "object" typeof undefined ---> "undefined" typeof true...
2021-10-25 20:22:28
140
原创 JavaScript中的单引号和双引号的区别
JavaScript中的单引号和双引号其实没啥区别，看你自己习惯了。但若双引号中再使用双引号，我们可采取"外双内单"或者"外单内双"的格式；如果需要的是双引号本身，则只能是"外单内双"：console.log("这是'外双内单'的用法"); //这是'外双内单'的用法console.log('这是"外单内双"的用法');//这是"外单内双"的用法console.log("这是"单引号和双引号'的错误用法');//错误...
2021-10-19 19:19:32
1874
原创 Slice和Splice的区别
概括slice(start,end) 从哪到哪开始删 splice(strt,end,index1,index2) 从什么位置开始，删几个？删了后插入什么新元素？数组中的slice()方法---可以用来从数组中提取指定元素---该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回参数：1.截取开始的位置的索引，包含开始索引2.截取结束的位置的索引，不包含结束索引 -第二个参数可以忽略不写，此时会截取从开始索引往后的所有元素 -索引可以传递一个负值，如果传递一个负
2021-10-14 20:20:42
236
原创 vue项目安装vue cli
Node 版本要求Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。可以使用下列任一命令安装这个新的包：npm install -g @vue/cli# ORyarn global add @vue/cli安装之后，你就可以在命令行中访问vue命令。你可以通过简单运行vue，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。你...
2021-09-16 18:48:00
210
原创 在vue项目里如何定义全局变量和函数
如题，在项目中，经常有些函数和变量是需要复用，比如说网站服务器地址，从后台拿到的：用户的登录token,用户的地址信息等，这时候就需要设置一波全局变量和全局函数定义全局变量原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用export default 暴露出去，在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：Global.vue文件：<script>const s..
2021-09-16 18:45:57
214
原创 node卸载后彻底清除所有配置残留
当你把node卸载后，如果再次安装node出现上一次的配置信息，或者你之前安装node的时候跟随了网上在电脑里配置路径的方法，那么，接下来，你只需要在自己的电脑里面全局搜索 .npmrc，然后将其删除，重启电脑，再次重新安装node.即可...
2021-09-15 15:49:14
2162
原创 css去掉重叠部分边框的方法
这篇文章给大家分享的是有关css去掉重叠部分边框的方法的内容。个人觉得挺实用的，因此分享给大家做个参考。边框重叠可以分为两种情况，分别为：1、div，ul等元素盒子设置边框后的重叠问题2、table表格设置边框后的重叠问题下面我们就来介绍如何解决这些边框重叠问题的方法，用简单的代码示例来讲解1、div，ul等元素盒子设置边框后的重叠问题<!DOCTYPE html><html> <head> <meta charset="UT.
2021-08-16 20:30:59
5104
2
原创 jquery加载页面的方法(页面加载完成就执行)
1、$(function(){ $("#a").click(function(){ //adding your code here });});2、$(document).ready(function(){ $("#a").click(function(){ //adding your code here });});3、window.onload = function(){ $("#a").click(function(){ //adding you
2021-08-11 09:46:24
1762
原创 git push到远端后，如何撤回push
git push后，发现问题，需要撤回代码，可通过reset到指定commit，再push，完成回退，并且git log中无已撤回path信息，步骤如下：本地reset到无问题commitgit reset --hard <版本号>push到相应分支并覆盖git push origin <分支名> --force...
2021-08-10 10:28:17
3541
原创 git的fetch和full的区别
1、简单概括先用一张图来理一下git fetch和git pull的概念：可以简单的概括为：git fetch是将远程主机的最新内容拉到本地，用户在检查了以后决定是否合并到工作本机分支中。而git pull则是将远程主机的最新内容拉下来后直接合并，即：git pull = git fetch + git merge，这样可能会产生冲突，需要手动解决。下面我们来详细了解一下git fetch和git pull的用法。2、分支的概念在介绍两种方法之前，我们需要先了解一...
2021-08-06 10:21:06
612
原创 命令行控制git代码回退
一.查看git提交的历史信息git log命令显示从最近到最远的提交日志如果嫌输出信息太多，可以试试加上--pretty=oneline参数,代码如下：二.版本回退（回退到过去）第一种：根据head^来确定回退版本首先，Git必须知道当前版本是哪个版本，在Git中，用HEAD表示当前版本，上一个版本就是HEAD^，上上一个版本就是HEAD^^，当然往上100个版本写100个^比较容易数不过来，所以写成HEAD~100。参考实例：回退到上一个版本$ git reset --ha
2021-08-06 10:02:22
437
原创 git命令行基础操作（提交和拉取代码）
一、提交代码并合并分支：1、打开git bash命令窗口；2、使用git checkout 'branchName' 进入主分支下3、使用git pull命令从主分支拉最新的代码；4、pull完成之后，再使用git checkout branchName 进入自己的分支下，以免下次直接提交到master主分支5、提交代码的时候，使用git add . 命令提交全部文件（使用git status 查看要提交的内容）6、git add .完成之后，使用 git commit -m '注释'
2021-08-06 09:53:45
2566
原创 css设置元素在页面居中的的各种方式
方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!Doctypehtml> <html> <head> <metahttp-equiv="Content-Type"content="text...
2021-08-05 14:58:30
1106
原创 JavaScript的调试
为什么要调试？程序就是函数堆砌起来的，程序的运行就是函数的执行过程。而通过JS调试，我们可以更为直观的追踪到在程序运行中，函数的执行顺序，以及各个参数的变化。这样我们就可以快速的定位到问题所在。1.什么是JS调试？在程序运行中，我们总会遇到各种bug，而通过代码的追踪代码的运行顺序从而定位到问题的过程就叫做JS调试。首先我们需要知道如何进入调试的界面，此处我们以谷歌为例，通过F12和右键检查，找到Sources就可以进入调试界面。具体界面显示如下：红框所标示的就是我们调试常用的按键.
2021-07-26 17:18:29
1724
原创 vue的单向数据流和双向数据绑定
Vue 的数据流本质上是单向数据流，而我们平时说的双向数据绑定，只是Vue的一个语法糖，也就是说，Vue在数据流方面既可以实现单向数据流也可以实现双向数据绑定。 双向数据绑定实现原理： <input type="text" :value="content" @input="onInput"><script>export default{ data: { return: {content:"hello"} }, methods: { .
2021-07-23 20:58:59
1232
原创 动态生成的dom为什么绑定事件会失效，以及如何解决
之前做项目都是直接用jquery的bind绑定事件，不过当时都不是动态生成dom元素，而是已经页面中原本存在的dom元素进行事件绑定，最近在测试给动态生成的dom绑定事件的时候发现事件失效，于是就测试了一下：1. 事件失效的原因：（1）bind事件绑定只对dom中存在的元素有效，对于我们后来动态增加的元素是监测不到，所以绑定不了（2）同样，当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取不到的，因为网页
2021-07-23 14:51:47
1079
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人