- 博客(362)
- 收藏
- 关注
RSS订阅原创 h5离线存储manifest
h5离线存储manifestHtml5提出的一个新特性：离线存储。通过离线存储，我们可以吧需要离线存储在本地的文件夹列举在manifest配置文件中，这样即使在离线的情况下，用户也可以正常的看见网页在需要离线缓存的页面的html标签上加上manifest='cache.manifest'<html lang='en' manifest='cache.manifest'>...</html>在根目录创建新文件名称为cache.manifest的文件，并写上代码
2021-05-24 02:46:40
209
原创 js事件循环
事件循环异步：定时器、ajax、onclick、promise（new Promise立刻执行，then异步）宏任务：定时器（setTimeout、setInterval）、requestAnimationFrame、I/O微任务：process.nextTick、Promise、Object.observe、MutationObserver宏任务队列和微任务队列，执行主线程任务，宏任务放到宏任务队列，微任务放到微任务队列。只有在微任务队列中的微任务全部执行完成之后才会去执行下一个宏任务。注意：执
2021-05-24 01:57:36
141
原创 ES6装饰器的使用
ES6装饰器的使用装饰器：是一种与类相关的语法，用来注释和修改类和类相关的方法和属性。许多面向对象的语言都有这个功能。一般和类class 相关，普通的方法不要去使用装饰器是一种函数，写法是@函数名，它可以放在类和类的方法定义前。装饰器就是执行函数，给类或者类下面的属性方法加一些控制条件装饰器给类或者类属性驾驶一些其他代码可以代码复用@decoratorclass A(){ }//等同于class A(){ //decorator是一个函数，相当于调用它给A类可以加上一些
2021-05-23 04:24:20
911
原创 async、await使用与原理
async、await使用与原理异步情况：定时器、ajax、事件处理、nodejs、读取文件也有异步let p = new Promise((resolve,reject)=>{ resolve(1);})//这里的function就是promise中调用的resolve。那么上面掉哟哦那个resolve(1),data参数就是1 p.then(function(data){ console.log('success',data) //success 1})Pr
2021-05-23 03:26:02
166
原创 重绘、重排（回流）
重绘、重排（回流）先把dom节点生成dom树（解析dom）生成cssom（解析css）布局：构成渲染树render tree（从根节点递归，布局）绘制：绘制div等到页面上重绘（repaint）：一个元素外观的改变所触发的浏览器的行为，浏览器会根据元素的新属性重新绘制，使元素呈现新外观回流（重排、重构reflow）：当渲染树的一部分因为元素的尺寸、布局、隐藏等改变而需要重新构建称之为重排重绘和重排的关系：在重排的过程中，浏览器会使渲染树中收到影响的部分失效，并且重新去构造这部分渲染树，完成
2021-05-21 15:25:42
228
原创 Redux、Vuex状态管理机制
Redux状态管理机制基本理解：redux是一个独立的状态管理js库，不是react的插件库可以用在react、vue、angular等项目中，但是大多情况与react配合使用作用：集中管理react组件中共享数据的状态Redux 使用扩展react-redux简化编码redux-thunk实现redux的一步编程。以及redux-sagaredux-devtools实现chrome中redux的调试vuex状态管理机制...
2021-05-21 14:35:55
251
原创 React和Vue
相同点都是组件化开发虚拟dom都支持通过属性的方式去进行父子组件之间通信数据驱动：更新状态数据，界面会自动更新，不用直接操作dom支持服务器渲染支持原生应用方案：react native（react）、weex（vue）不同点数据绑定：vue中是双向数据绑定，也就是界面和内存的数据可以双向交流；而react只支持从内存到界面，不支持从界面到内存组件书写方式不一样：react采用JSX（JSX是js的扩展语法，react提出all in js）而vue使用的是模版（也就是在htm
2021-05-21 14:27:20
143
原创 宏任务和微任务
宏任务和微任务js是单线程的，所以我们可以称之为主线程，也就是我们的js代码都是在主线程上完成的。祝不过我们区分任务是同步还是异步，如果是异步的话，那么它会有一个回调函数。 回调函数：定时器的回调、ajax请求的回调、对应事件的回调（比如点击事件）。不同的任务又会交给不同的模块去处理，比如：定时器模块、网络请求模块、事件处理模块。js事件轮询机制，js是单线程的宏任务：setTimeout 、setInterval、requestAnimationFrame宏任务所处的队列就是宏任务队列第
2021-05-20 16:27:59
138
原创 一道有意思的闭包题
闭包函数嵌套内部函数使用外部函数的局部变量优点：延长外部函数局部变量的生命周期；缺点：内存泄漏合理使用闭包，及时销毁function fun(n,o){ console.log(o) //执行var a = fun(0)时候o没有定义，undefined return { fun:function(m){ return fun(m, n); //这个fun是window的fun也就是全局的fun } }}//a中存的是同一个返
2021-05-20 15:16:44
176
原创 作用域和值类型引用类型的传递
作用域和值类型引用类型的传递作用域var num1 = 11;var num2 = 22;function fn(num,num1){ //num,num1会计作用域中变量，分别传入时候只为11，22 num = 100; num1 = 100; num2 = 100; //没有用var声明，不是块作用域中变量，那么修改的就是全局的num2 console.log(num) //100 console.log(num1) //100 console.log(num2)
2021-05-19 15:16:16
198
原创 前端安全XSS和XSRF
安全问题：常见的web前端攻击方式有哪些XSS跨站请求攻击XSRF跨站请求伪造XSS跨站请求攻击博客前端界面嵌入script脚本脚本内容：获取cookie发送到服务器（服务器配合跨域）发布博客，有人查看，可以轻松获取查看人的cookie信息XSS预防替换特殊字符。例如：<变成&It；>变成>，那么script就不会作为脚本执行可以使用https://www.npmjs.com/package/xss的xss工具XSRF跨站请求伪造（类似于钓鱼
2021-05-19 14:27:57
343
原创 函数节流&防抖
防抖debounce场景：监听一个输入框的文字变化后触发change事件直接用keyup事件会频繁触发change事件防抖：知道用户输入结束或者暂停之后才会触发change事件function debounce(fn,delay=500){ //debounce是对函数的封装，最糊返回的是一个函数 var timer = null; return function(){ if (timer){clearTimeout(timer);} timer = setTimeou
2021-05-19 11:05:26
316
原创 前端性能优化
性能优化性能优化原则多使用内存、缓存或者其他方法减少CPU计算量、减少网络加载耗时（适用于所有编程性能优化、空间换时间）从哪些方面入手加载更快减少资源体积：压缩代码减少访问次数：合并代码（js、css、雪碧图）、ssr服务端渲染（数据一起给前端）、缓存使用更快的网络：CDN（根据地域做静态文件访问服务）渲染更快css放进head中，js放到body最下面尽早执行js，用DOMContentLoad去触发懒加载(图片懒加载、上滑加载更多)对dom查询进行缓存频繁do
2021-05-18 17:44:19
198
原创 页面加载和渲染过程
页面加载和渲染过程题目从输入url到渲染出页面的整个过程（见下：资源形式、加载过程、渲染过程）下载资源：各个资源类型、下载过程渲染页面：结合html、css、js图片等window.onload和DOMContentLoad的区别window.onload页面全部加载完成包括图片DOMContentLoad是dom渲染完成即可，此时图片视频可能还没有加载完document.addEventListener('load',()=>{ console.log('wind
2021-05-18 16:50:28
699
原创 存储localstorage、cookie、sessionstorage
存储题目描述cookie、localstorage、sessionStorage的区别容量API易用性是否跟随http 请求发出去知识点cookielocalstorage和sessionstoragecookie本身用于浏览器和server通信被"借用"来本地存储可用document.cookie=...来修改存储大小，最大4kbhttp请求时候需要发送到服务端，增加请求数据量只能用document.cookie=…来修改，太过简陋localstorage
2021-05-18 11:05:00
151
原创 前端基础Ajax
ajax题目手写一个简易的ajaxfunction ajax(url){ const p = new Promise((resolve,reject)=>{ const xhr = new XMLHttpRequest(); xhr.open('GET','data/test.json',true); //true的意思是异步请求 xhr.onreadystatechange = function(){ if(xhr.readystate === 4
2021-05-18 10:36:47
111
2
原创 前端基础之事件
事件题目：编写一个通用的事件监听函数描述事件冒泡的流程基于dom树形结构事件会顺着触发元素往上冒泡应用场景：事件代理无限下拉图片列表，如何监听每个图片的点击事件代理通过e.target来获取触发元素用matches来判断是否触发元素知识点事件绑定（addEventListener）const btn = document.getElementById('btn1')btn.addEventListener('click',event=>{ conso
2021-05-17 16:51:53
153
原创 BOM操作（Browser Object Model）
BOM操作（Browser Object Model）如何识别浏览器类型分析拆解url的各个部分知识点navigator：浏览器信息screen：屏幕信息location：地址信息history：前行后退信息navigator和screen//navigatorconst ua = navigator.userAgent; //获取当前浏览器的信息const isChrome = ua.indexOf('Chrome')console.log(isChrome)//sc
2021-05-17 10:41:39
147
原创 DOM操作（Document Object Model文档对象模型的集合）
DOM操作（Document Object Model文档对象模型的集合）题目DOM属于哪种数据结构基于树形结构DOM操作的常用APIattr（attribute）和property的区别property：修改对象的属性，不会体现在html结构中（不会对节点有什么影响）attr：直接修改html属性，会改变html的结构（改变标签结构）两者都可能引起dom重新渲染（尽量用property去进行操作，因为设置property一定会重新渲染，attribute不一定。重新dom
2021-05-17 10:19:42
175
原创 this运用场景
this作为普通函数使用call、bind、apply作为对象方法被调用在class方法中调用箭头函数this取什么值是在函数执行的时候决定的不是在函数定义的时候确定的function fn1(){ console.log(this)}fn1(); //windowfn1.call({x:100}) //{x:100}const fn2 = fn1.bind({x:200})fn2(); //{x:200}箭头函数没有this，其中this取上级作用域this//
2021-05-14 15:23:04
109
原创 作用域和闭包
作用域和闭包this的不同应用场景，如何取值手写bind函数实际开发中闭包的应用场景，并举例说明//创建10个<a/>标签，点击的时候弹出来对应的序号let i,a;for(i = 0;i<=10;i++){ a = document.createElement('a'); a.innerHTML = i+"<br/>"; a.addEventListener('click',function(e){ e.preventDefault();
2021-05-14 15:06:59
65
原创 原型和原型链
原型和原型链每个class都有显示原型prototype每个实例都有隐式原型__proto__实例的隐式原型__proto__都指向对应的class的原型prototype//隐式原型和显式原型（案例demo接上个题目的案例）console.log(smileyqp.__proto__) //隐式原型console.log(Student.prototype) //显式原型console.log(smileyqp.__proto__ === Student.prototype)
2021-05-14 14:28:24
76
原创 class和继承
class和继承class Student{ constructor(name,age){ this.name = name; this.age = age; } sayHi(){ console.log('hi'+this.name+this.age) }}let stu = new Student('smileyqp',100)继承extendssuper扩展或者重写方法class Person(){ constructor(name,
2021-05-14 11:35:39
118
原创 变量计算、类型转换
变量计算、类型转换字符串拼接const a = 100+10; //110const b = 100+'10'; //10010const c = true+'10'; //true10==100 == '100'; //true0 == ''; //true0 == false; //truefalse ==''; //truenull == undefined; //true除了==null之外其他的一律用===。并且，例如：a==null相当于a===
2021-05-13 18:31:35
103
原创 js值类型和引用类型
值类型&引用类型（变量类型）值类型let a = 100;let b = 1;a = 200;console.log(b) //100引用类型let a = {age:10};let b = a;b.age = 20;console.log(a.age) //20常见值类型undefinedstringnumberbooleansymbol常见引用类型objarraynull 特殊引用类型，指向的地址为空地址func
2021-05-13 17:40:07
131
原创 对象转数组
对象转数组let obj = {1:2323,4:3492,8:2673}要求得到[2323, null, null, 3492, null, null, null, 2673, null, null, null, null]方法一:直接new Array().fill(null)然后map使用index对比let obj = { 1:2323, 4:3492, 8:2673}let arr = new Array(12).fill(null).map((item
2021-05-13 16:10:34
176
原创 对象调用数组的push方法
let obj = { 2:3, 3:4, length:2, push:Array.prototype.push} obj.push(1) //=> obj[obj.length] = 1 => obj[2]=1 length原来基础上加一 obj[length] => 3obj.push(2) ////=》obj[obj.length] = 2 => obj[3]=2 length原来基础上加一 obj[length] => 4cons
2021-05-13 15:09:27
901
原创 a=?可以使得a==1&&a==2&&a==3为true
var a = ?使得a==1&&a==2&&a==3给对象添加一个私有的toString方法，重构私有方法方法一：使得a==1&&a==2&&a==3成立对象要先toString然后进行转化成数字var a = { n:0, toString:function(){ //所有的值调用toString都是先看自己私有有没有，没有再原型链上找 return ++ this.n; }}方法二/
2021-05-13 14:42:57
172
原创 ==和===
==&=====进行比较，如果左右两边的数据类型不相同的话那么先转换成相同的数据类型，然后再进行比较{}=={}两个对象进行比较时比较堆内存的地址null==undefined相等的，但是三个等号就不相等NaN == NaN不相等，NaN和谁都不相等[12]=="12"对象和字符串项比较，是把对象toString转换成字符串之后进行比较剩余所有的情况进行比较的时候都是转化成数字(对象转换成数字都是现toString转换成字符串,再转换成数字)（前提是类型不一样的时候）对象转化成数
2021-05-13 14:34:29
59
原创 匿名函数
匿名函数匿名函数如果设置了函数名，在外面是无法调用的，但是在函数里面可以调用执行并且这个名字相当于一个常量，这个名字存储的值不能修改（非严格模式下不会报错，但是不会有任何的效果，严格模式下直接报错。可以理解为const创建的常量 ）let fn = unction AAA(){ console.log(AAA) //当前函数}var b = 10;(function b(){ b = 20 console.log(b) //function b;b此时相当于一个常量，不能被改变
2021-05-12 20:24:44
101
原创 几行代码简单来看闭包
闭包for(var i = 0;i<10;i++){ setTimeut(()=>{ console.log(i) },10000)}//输出10次10，因为不是私有变量。setTimeout是异步的//将var改成let，let定义的局部块的变量，每次循环都会在当前块作用域中形成私有变量i，定时器执行的时候所使用的i是所属作用域的ifor(let i = 0;i<10;i++){ setTimeut(()=>{ console.log(i)
2021-05-12 18:18:22
137
原创 数组合并(排序+循环)
数组合并题一：let ary1 = ['A1','A2','B1','B2','C1','C2','D1','D2']let ary2 = ['A','B','C','D']//因为使用arr.sort((a,b)=>a.localeCompare(b))，时候没有Z,ABCD这些会在最前面ary2 = ary2.map(item=>item+'Z')let arr = ary1.concat(ary2)arr.sort((a,b)=>a.localeCompare(b
2021-05-12 17:30:30
274
原创 手写new
手写newfunction Dog(name){ this.name = name;}Dog.prototype.bark = function(){ console.log('bark')}Dog.prototype.sayName = function(){ console.log('my name is'+this.name)}要实现一个_new方法实现以下：let dog = _new(Dog,'dooooog')dog.sayName()dog.bark()
2021-05-12 16:29:55
60
原创 函数柯里化思想
函数柯里化思想函数柯里化：预先处理的思想（利用闭包的机制）let obj = { name:'OBJ'}function fn(...arg){ console.log(this,arg)}document.body.onclick = fn; //this=>BODYdocument.body.onclick = function(ev){//=>ev 事件对象：给元素的某个事件绑定方法，当事件触发会绑定这个方法，并且把当前事件的相关信息传递给这个函数事件对象
2021-05-12 11:12:03
160
原创 旋转数组
旋转数组给定一个数组，将数组中的元素向右移k个位置，其中k是非负数，例如：输入：[1,2,3,4,5,6]和k=3输出：[5,6,1,2,3,4]slice输入：[1,-100,78,90] k = 2输出：[90,1,-100,78]function rotate(key){ //参数处理，key>0 if(key<0||key === 0||key === this.length)return this; if(key>this.length){key
2021-05-11 20:02:20
66
原创 js实现获取数组交集
数组交集let nums1 = [1,2,3,2]let nums2 = [2,2,2]let arr = [];for(let i = 0;i<nums1.length;i++){ let item1 = nums1[i] for(let j=0;j<nums2.length;j++){ let item2 = nums2[j] if(item1===item2){ nums1[i] = null; nums2[j] = null;
2021-05-11 16:58:20
802
原创 图片懒加载
图片懒加载前端性能优化的重要方案，通过图片或者数据的延迟加载，可以加快页面加载速度，第一次加载的速度变快，并且只有滑动到图片部分才会进行加载处理方案将所有需要延迟加载的图片用一个盒子包起来，设置宽高和默认的占位图开始让所有的image的src为空，将图片真实地址放到image的自定义属性上，让img隐藏等到所有的其他资源加载完成之后我们才开始去加载图片对于有很多图片，当页面滚动的时候，当前图片完全显示出来后，再加载图片单张图片懒加载//html<!DOCTYPE ht
2021-05-11 12:02:45
114
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人