面试
文章平均质量分 75
笑道三千
我今年两岁半了,学编程还来不来得及????
展开
-
回流和重绘
回流在有些地方又被叫做重排通常来说,渲染引擎会解析HTML文档来构建DOM树,与此同时,渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来,DOM树和CSSOM树关联起来构成渲染树(RenderTree),这一过程称为Attachment。然后浏览器按照渲染树进行布局(Layout),最后一步通过绘制显示出整个页面。当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流,就是在页面第一次加载原创 2020-11-29 23:50:01 · 206 阅读 · 0 评论 -
js事件循环机制-宏任务微任务
一,js是基于V8引擎的单线程运行机制:也就是在主线程中,代码的执行是顺序执行的但是如果遇到了一些异步操作如:宏任务:setTimeout、setInterval, Ajax,DOM事件微任务:Promise async/await它们的执行需要一定的时间,如果还是单单使用主线程,就会因为这些耗时长的操作而堵住,程序无法接着执行,这就是平时所说的阻塞。为了达到非阻塞的目的,就有了异步非阻塞的概念,在js中,异步操作的处理都是异步非阻塞。举一个简单的例子:烧开水:你有一堆事abc情要做,还要原创 2020-11-29 23:08:47 · 1624 阅读 · 7 评论 -
函数节流和防抖
一,节流定义:事件触发后执行函数执行期间内事件再次触发,执行函数将不会执行,等规定时间之后事件触发,执行函数方可再次执行。也就是说,规定时间内,函数只能被执行一次,且执行的是最先调用的那一次。原理:对处理函数进行延时操作,若设定的延时到来之前,再次触发事件,则清除上一次的延时操作定时器,重新定时它与防抖最大的区别:无论事件触发多么频繁,都可以保证在规定时间内可以执行一次执行函数。使用场景滚动加载更多,搜索框的搜索联想功能,高频点击,表单重复提交……二,防抖原理:当持续触发事件时,一定时间段内原创 2020-11-28 19:55:53 · 114 阅读 · 1 评论 -
遇到问题的解决方法
针对每一个出现的问题,都会问自己以下几个问题:1,这真的是一个问题吗?2,这个问题需要解决吗?3,这个问题需要现在就解决吗?4,这个问题需要我解决吗?5,有没有更好的解决方案?第一步:就是先确认它是不是一个问题?如果它真的存在,但并非问题,就可以忽略它。如果它确实是一个问题,那么就进行下一步思考:第二步:这个问题需要解决吗?如果不良结果可以忍受并且增长缓慢,而解决这个问题需要付出的代价远甚于这个问题的容忍程度,那么就可以考虑不解决这个问题。换句话说,这个问题如果不解决,会发生啥?答案是没原创 2020-11-16 14:39:50 · 171 阅读 · 0 评论 -
vue-router的两种模式
第一种,是哈希模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: <div id="obj">我的颜色会随着哈希值的改变而改变哦</div> <script type="text/javascript"> window.onhashchange=function(event){ let hash=location.hash.slice(1) let obj=document.getElem原创 2020-11-13 10:47:19 · 209 阅读 · 2 评论 -
vue基础-25-vue的基础面试知识
一,v-show和v-if的区别1,元素节点的存在性v-if是创建和删除元素节点(false的时候不存在元素)v-show是显示和隐藏元素节点(false的时候元素存在,只是display:none)2,实现原理v-if是真正的条件渲染,因为它会确保在切换过程中,条件块内的事件监听器和子组件适当地被销毁和创建。同时他也是惰性的,如果一开始的条件为false,则什么也不做,直到第一次条件变成真时,才会开始渲染条件块。v-show就简单多了,不管初始条件是什么,元素都会被渲染,只是简单地改变dis原创 2020-11-04 01:11:57 · 368 阅读 · 0 评论 -
正则表达式验证邮箱及其解析
<input type="text"><strong></strong> <script type="text/javascript"> var input=document.getElementsByTagName('input')[0] input.oninput=function(){ var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ if(reg.test..原创 2020-10-12 22:27:36 · 670 阅读 · 2 评论 -
js基础-24-伪数组转化为真数组
一,[…arr] function fn(){ console.log(arguments) console.log([...arguments]) } fn(1,2,3,4,5,6,7)二,Array.from(arr) function fn(){ console.log(arguments) console.log([...arguments]) //[1, 2, 3, 4, 5, 6, 7] console.log(Array原创 2020-10-12 18:33:40 · 184 阅读 · 0 评论 -
Cookie、LocalStorage 与 SessionStorage的区别
一,cookiecookie是网站为了标识用户身份而存储在用户本地终端(ClientSide)上的数据(通常经过加密)cookie数据始终在同源的http请求中携带(即使不需要),即会在浏览器和服务器之间来回传递二,SessionStorage和LocalStorageSessionStorage和LocalStorage不会把数据发给服务器,只是保存在本地。...原创 2020-10-12 17:36:31 · 106 阅读 · 1 评论 -
js基础-23-websocket和ajax的区别
一,ajax采用的是轮询首先是ajax轮询, ajax轮询的原理非常简单, 让浏览器每隔几秒发送一次请求。轮询其实就是不断的建立HTTP链接, 然后等待服务器处理, 可以体现HTTP协议的另外一个特点,被动性(只能在这等, 谁请求服务器,才能给谁). 同时,http的每一次请求与响应结束后, 服务器将客户端信息全部丢弃, 下次请求,必须携带身份信息(cookie),无状态性。二, WebSocket协议是从HTML5开始提供的、基于TCP的、对传统HTTP协议(短连接)的升级版解决的问题:1.解原创 2020-10-12 17:05:07 · 182 阅读 · 0 评论 -
js基础-22-基本数据类型不是对象
一,基本数据类型不是对象所以用instanceof Object检查,都是返回false var b='这是一个字符串' //这是基本类型的字符串 var c=new String('这是一个字符串') //这是字符串类的实例对象:一个字符串对象 console.log(b instanceof Object) //false console.log(b instanceof String) //false console.log(c instanceof Obj原创 2020-10-12 15:55:32 · 760 阅读 · 0 评论 -
js基础-21-事件委托
JS中的事件委托和事件代理什么是事件委托?事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。我用取快递来解释这个现象: 有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台代为签收。现实当中,我们大都采用委托的方案。前台收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台也会在收到寄给新员工的快递后转载 2020-10-12 15:27:31 · 125 阅读 · 0 评论 -
js基础-20-js对象赋值时的key值问题
一,在定义时,对象的属性名可以是包含空字符串在内的任何字符串。二,当给对象添加属性时,属性名key也可以是其他数据类型1,当key是数组时:转化为逗号分割的字符串作为key: var a={} var arr1=[22,2,3] var arr2=[3,2,5] a[arr1]='123' a[arr2]='456' console.log(a)于是当一个是字符串,一个是数组时,会有这种情况发生: var a={} var str1='3,2,5' var arr2=原创 2020-10-11 21:54:14 · 3132 阅读 · 0 评论 -
js基础-19-判断图片加载完成的方法
一,load事件<!DOCTYPE HTML><html><head> <meta charset= "utf-8" > <title>img - load event</title></head><body> <img id= "img1" src= "http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg" &g原创 2020-10-11 18:57:30 · 449 阅读 · 0 评论 -
js基础-18-js中创建对象的几种方式
1、字面量方式创建,也就是我们所常说的基本创建方式但是这个方式有一个缺点,就是要创建多个对象的时候,需要每一个对象里面的属性都要重新声明一下,直接向中添加属性和方法,这样就造成了代码的冗余,而且这样创建对象的话,也必须先知道对象的属性和方法,否则无法创建;var object = new Object();object.name='lili';//向对象中添加属性和方法object.sayName =function(name){ this.name = name;}object.sayN转载 2020-10-11 18:31:36 · 142 阅读 · 0 评论 -
js基础-17-解析url的函数,字符串出现的次数最多,并统计它出现几次
var url='https://baijiahao.baidu.com/s?id=1680236497535209744&wfr=spider&for=pc'解析成对象形式: var url='https://baijiahao.baidu.com/s?id=1680236497535209744&wfr=spider&for=pc' // { // id:1680236497535209744, // wfr:spider, //原创 2020-10-11 17:56:37 · 147 阅读 · 0 评论 -
js基础-16-继承
一,原型链继承核心: 将父类的实例作为子类的原型将构造函数的原型设置为另一个构造函数的实例对象,这样就可以继承另一个原型对象的所有属性和方法,可以继续往上,最终形成原型链 // 定义一个动物类 function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!原创 2020-10-11 15:42:21 · 149 阅读 · 1 评论 -
js基础-15-new操作符,延迟加载,严格模式
一,new操作符到底干了什么?1,立刻创建一个新的对象2,obj.__proto__=Fun.prototype 方法或者属性,赋值3,将this指向这个新创建的对象4,顺序执行构造函数中的this5,将新创建的对象作为返回值二,js的延迟加载JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。JS延迟加载有助于提高页面加载速度。主要有以下几种方式:defer 属性async 属性动态创建DOM方式使用jQuery的getScript方法使用setTime原创 2020-10-11 10:27:32 · 149 阅读 · 0 评论 -
js基础-14-JS阻止事件冒泡和默认事件
什么是事件冒泡?当事件发生后,这个事件就要开始传播(从里到外,或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,或处理事件的函数并未绑定在该事件源上。们经常利用事件冒泡机制去减少给DOM添加过多的绑定事件即事件委托,但是有时候事件冒泡也会比较烦人,影响我们的事件正常处理机制,如下:<body><div id="info"> <div class="box-1" onclick="box1()"> 最外层 <div转载 2020-10-11 09:46:15 · 120 阅读 · 0 评论 -
js基础-13-常见DOM操作
一,查找节点document.getElementById :根据ID查找元素,大小写敏感,如果有多个结果,只返回第一个;document.getElementsByClassName :根据类名查找元素,多个类名用空格分隔,返回一个 HTMLCollection 。注意兼容性为IE9+(含)。另外,不仅仅是document,其它元素也支持 getElementsByClassName 方法;document.getElementsByTagName :根据标签查找元素, * 表示查询所有标签,返回一原创 2020-10-11 08:29:32 · 89 阅读 · 0 评论 -
常用的数组方法
一,数组的查询1,返回第一个满足条件的元素索引值:findIndexfindIndex() 方法传入一个测试条件(回调函数,参数是三个:value,index,arr:被查找的数组),返回符合条件的数组第一个元素位置(index),如果没有符合条件的元素返回 -1。例子:const list=[ { "id": 0, "info": "Racing car sprays burning fuel into crowd.", "done": false }, { "id": 1原创 2020-10-01 10:32:01 · 1541 阅读 · 2 评论 -
对Object.prototype.toString.call(obj)的理解
一,回顾原型链的知识1,Object也是个函数,而任何函数都是Function的实例对象。2,Function可以看作Function自身的实例,所以它的显示原型和隐式原型都指向Function.prototype。3,任何对象都是Object的instance,因为原型链的顶端都指向Object.prototype。二,Object.prototype.toString方法的理解在Object.prototype上有一个toString方法,返回的是值类型。也就是说它可以精准地判断输入值的数原创 2020-10-11 01:10:00 · 970 阅读 · 2 评论 -
js基础-12-判断数组和判断对象的方法
一,判断数组的方法首先需要明确的是typeof在判断[],{},null时返回的都是 object,所以是无法判断数组和对象的。1,常用的方法是:instanceof表达式:A instanceof B返回值:如果B函数的显示原型对象(prototype)在A对象的原型链(__proto__)上,返回true,否则falsevar arr=[1,2,3]var b={}console.log(arr instanceof Array) //trueconsole.log(b instan原创 2020-10-10 23:55:09 · 2222 阅读 · 1 评论 -
js基础-11-相等和全等的区别
一,相等在进行比较前,会先进行强制转换操作数1,有一个操作数是布尔值,则转化为数字,false变成0,true变成12,一个是数字,一个是字符串,则字符串转化为对应数字3,一个是对象,一个不是,则调用对象的valueof()方法,用得到的基本类型值比较值得注意的是:1,underfined和null不进行强制转化,并且underfined==null 返回true2,如果有一个操作数是NaN,无论和谁相等,都是false:NaN==NaN,和谁不等都是true:NaN!=NaN3,如果两个原创 2020-10-10 18:41:40 · 221 阅读 · 0 评论 -
js基础-10-url,src,href的理解
URL(Uniform Resource Locator)统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。src和href都是属于外部资源的引用,像一些图片,css文件,js文件,或者其他的web页面他们的之间的主要关系可以用这样的一句话来概括:src用于替换这个元素,而href用于建立这个标签与外部资源的关系于是:src (Source)源这个属性是原创 2020-10-10 16:55:57 · 633 阅读 · 0 评论 -
js基础-9-正则表达式
基础\d就是[0-9]。表示是一位数字。记忆方式:其英文是digit(数字)。\D就是[^0-9]。表示除数字外的任意字符。\w就是[0-9a-zA-Z_]。表示数字、大小写字母和下划线。记忆方式:w是word的简写,也称单词字符。\W是[^0-9a-zA-Z_]。非单词字符。\s是[ \t\v\n\r\f]。表示空白符,包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。记忆方式:s是space character的首字母。\S是[^ \t\v\n\r\f]。 非空白符。.原创 2020-10-10 15:15:20 · 1105 阅读 · 0 评论 -
js基础-8-浅拷贝和深拷贝
一,浅拷贝需要明确的一点是:只有引用数据类型才讨论深浅拷贝,基本数据类型本身存的是值,拷贝会直接开辟新的空间来存值,不存在相互影响。 var obj1={ name:'zhangsan', arr:[1,2,3,4] } function copy(val){ var obj2={} for (var stl in val){ obj2[stl]=val[stl] //将val对象中的属性,一一赋值给obj2 //因为对象的第二个属原创 2020-10-10 14:45:45 · 100 阅读 · 0 评论 -
js基础-7-数组去重的es5和es6写法、数组扁平化
一,用es5和es6封装一个数组去重的方法1,去除指定的数组元素var arr = [11,22,11,33,33,22,22,44,55];function delRepeat( arr, val ){ for( var i=arr.length-1; i>=0; i-- ){ if( arr[i] === val ){ arr.splice(i, 1); } }原创 2020-10-09 23:45:30 · 451 阅读 · 0 评论 -
js基础-6-作用域、执行流程、this指向
题目: function Foo(){ getName=function(){ alert(1) } return this } Foo.getName=function(){alert(2)} //把Foo作为一个函数对象!给它写方法getName Foo.prototype.getName=function(){alert(3)} //定义在Foo的原型对象上 var getName=function(){alert(原创 2020-10-09 21:35:21 · 162 阅读 · 0 评论 -
js基础-5-数据类型,作用域,优先级
一,数据类型及其判断基本(值)类型Number ----- 任意数值String ----- 任意字符串Boolean ---- true/falseundefined — undefinednull -------- null** 对象(引用)类型**Object ----- 任意对象Array ------ 数组(特别的对象)Function ----函数(特别的对象)二,数据类型的判断1>基本类型1,typeof (a);返回数据类型的字符串表达可以判断undefin原创 2020-10-09 15:28:08 · 325 阅读 · 0 评论 -
html+css基础-4-html标签、Doctype、iframe,table布局
一,html标签基本… 定义 HTML 文档… 文档的信息 HTML 文档的元信息… 文档的标题 文档与外部资源的关系 文档的样式信息… 可见的页面内容**文本**... 标题字大小(h1~h6)... 粗体字... 粗体字(强调) ... 斜体字 ...原创 2020-10-09 12:47:55 · 168 阅读 · 0 评论 -
html+css基础-3-flex,浏览器内核,HTML5新特性
一,flex1,概念flex布局最核心的两个概念就是容器和轴,容器包括父容器和子容器,轴包括主轴和副轴。设置了Flex布局后,子元素的float,clear,还有verticle-align属性都不起作用2,应用场景1),单行左右布局父容器设置为flex,子容器的div不再独占行,div1设置flex:1 占据div2剩下所有空间;2),圣杯布局3).等分场景:父级设置flex后,子级flex:1二,常见的浏览器内核1,浏览器IE浏览器。火狐(Firefox)浏览器。谷歌原创 2020-10-09 11:51:27 · 267 阅读 · 0 评论 -
html+css基础-2-盒子模型、选择器优先级、新增伪元素、display:none
一,块级元素和行内元素行内元素:a b span img input select strong块级元素:div ul li dl dt dd h1-h6 p空元素:br hr img input link二,盒子模型盒子模型分两种,一种是符合W3C规范的标准例子模型,另一种是IE的盒子模型,IE的盒子模型也被叫怪异盒子。和标准盒子模型不同的是:IE 盒子模型的宽,包含了 border 和 pading。content-box(标准)padding和border不被包含在width和he原创 2020-10-09 09:35:15 · 289 阅读 · 0 评论 -
html+css基础-1-屏幕居中、双飞翼布局、清除浮动
一,屏幕居中1,利用auto自动填充剩余空间<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background-color: red; position: abso原创 2020-10-02 11:42:00 · 164 阅读 · 0 评论