- 博客(13)
- 收藏
- 关注
原创 Router的hash模式与browser模式区别
为了增强用户体验,让用户更快更流畅的访问网站,亦为了追求平等,单页应用出现了。单页应用就是整个项目只有一个html文件,用户首次访问网站,服务器返回一个html文件以及打包好的js文件和css文件,如果你不刷新,这将是唯一一次给你返回html文件。当你切换页面时,只会请求接口返回JSON数据,渲染页面。(如果使用了路由按需加载,每次切换页面时会加载对应的组件。)这时候点击详情页或者个人主页时浏...
2020-03-19 14:39:59
1169
原创 对于一个未知宽高的盒子,如何让它水平垂直居中于父元素?
1. tabledisplay: table;使父元素的作用像table元素一样,display: table-cell;使子元素的作用像td一样。给此时的子元素用vertical-align和text-align设置水平垂直居中,子元素其中的未知宽高的元素当然就相对子元素水平垂直居中了。<!DOCTYPE html><html> <head>...
2020-03-19 14:27:47
750
1
原创 左边宽度固定,右边自适应
HTML结构<div class="outer"> <div class="left">固定宽度</div> <div class="right">自适应宽度</div></div>方法1:左侧div设置成浮动:float: left,右侧div宽度会自拉升适应.outer { wi...
2020-03-10 14:13:00
429
原创 重绘和回流(重排)是什么,如何避免?
DOM的变化影响到了元素的几何属性(宽高),浏览器重新计算元素的几何属性,其他元素的几何属性和位置也会受到影响,浏览器需要重新构造渲染树,这个过程称为重排,浏览器将受到影响的部分重新绘制到屏幕上的过程称为重绘。引起重排的原因有 1.添加或者删除可见的DOM元素, 2.元素位置、尺寸、内容改变, 3.浏览器页面初始化, 4.浏览器窗尺寸改变,重排一定...
2020-03-10 14:02:05
1228
1
原创 从浏览器地址栏输url到页面显示的步骤
1. 在浏览器地址栏输入URL2. 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤2.1. 如果资源为缓存,发起新请求2.2.如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。2.3.检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control:HTTP1.0提供E...
2020-03-10 13:48:05
270
原创 JS Promise用法总结
一、什么是PromisePromise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。二、特点(1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行...
2020-02-04 00:43:35
17315
2
原创 JS宏任务与微任务
最近发现关于JS运行机制的宏任务与微任务有的小伙伴还不是特别清楚,今天我们就好好讲一下,希望大家可以彻底理解,废话少说,先看东西如果有人问你什么是宏任务什么是微任务,这样告诉他,多说一个字都是多余宏任务:包括整段代码script,setTimeout,setInterval微任务:Promise,process.nextTick不同类型的任务会进入不同的事件队列,就是我们所说的宏任...
2020-01-20 09:36:47
209
原创 ES6新增数组方法
js中数组方法虽然很多很杂,看起来不好记,但是如果你用心总结一下的话还是比较好记的,而且熟记这些方法也一定会对你的工作起到非常积极的作用,下面我们来总结一下1.forEach()let arr = [1,2,3,'aaa','bbb'];arr.forEach((item,index)=>{ console.log(item,index)})//输出结果//1 0...
2020-01-16 18:20:22
317
原创 函数防抖与函数节流
函数防抖:就是将多次执行变为一次执行。举个例子,当我们在滚动窗口的时候执行一段代码,如果滚动一次执行一次的话,我们滚动的可能会很快,这样显然是很不合理的。所以我们可以当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。下面我们来实现一个防抖函数function debounce(fn,wait){ var ...
2020-01-16 00:19:40
126
原创 JS中this指向问题
JS中的this指向一直扰乱着我们,很多时候觉得自己写的东西没有bug但是执行后的结构总是跟自己预想的不一样,这个时候我们就该想想是不是我们的对象的this出现了问题。接下来我们一步一步地分析一下this的问题。1.非箭头函数中this在函数定义的时候是确定不了的,只有在函数执行的时候才能确定this到底指向谁,this指向最终调用它的对象在js中this主要分为以下几种情况在全局作用...
2020-01-07 00:22:14
114
转载 git、GitLab和GitHub的区别
在讲区别以及联系之前先简要的介绍一下,这三者都是什么(本篇文章适合刚入门的新手,大佬请出门左转)1.什么是 Git?Git 是一个版本控制系统。版本控制是一种用于记录一个或多个文件内容变化,方便我们查阅特定版本修订情况的系统。以前在没有使用版本控制的时候,我们通常在我们的项目根目录下这样命名项目:project_v1、project_v1.1、project_v2等等,通过这种...
2019-10-07 21:10:20
183
原创 彻底理解闭包
1.什么是闭包 变量重用,又保护变量不被污染的一种机制2.什么时候使用闭包 希望一个变量重复使用,又不会被污染的时候3.闭包的特点 1.外层函数包裹受保护的变量和操作变量的内层函数 2.外层函数返回内层函数对象 3.调用外层函数获得内层函数对象举例function outer(){//outer为外层函数 var i =...
2019-10-03 13:07:44
113
原创 前端 Web Workers 到底是什么?
以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力 - Web Workers API,我们一起来看一看 Web Worker 是什么,怎么去使用它,在实际生产中如何去用它来进行产出。1. 概述Web Workers...
2019-10-02 10:13:52
202
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人