CSS3动画之旋转小魔方
利用CSS3动画特性的小例子
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> ...
DOM Ready时间如何获取?如何优化
DOM Ready时间如何获取?如何优化高级浏览器通过DOMContentLoaded事件获取。
低版本webkit内核浏览器可以通过轮询document.readyState来实现
ie中可以通过setTimeout不断调用documentElement的doScroll方法,直到其可用来实现
优化建议:
减少dom结构的复杂度,节点尽可能少,嵌套不要太深
优化关键呈现路径
Failed to Load Font https___img.yzcdn.cn_vant_vant-Icon-d3825a.woff2 net__ERR_CACHE_MISS
在微信开发者工具引入了vant weapp 库,但是在使用icon的时候,在开发者工具中无法显示icon,以及报错在github上找到了一些回答github
出现这个错误是开发者工具的问题,启用真机调试,看看真机上会不会有这个问题。如果真机上可以显示,那么就更新你的开发者工具(下载最新那版),之后再开发者工具里就可以看见图标了
HTTP常见状态码
网络中的状态码有五大类:1xx(临时响应),2xx(成功),3xx(重定向),4xx(请求错误),5xx(服务器错误)
1xx(临时响应)100 (继续) 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分,正在等待其余部分。
101 (切换协议) 请求者已要求服务器切换协议,服务器已确认并准备切换。
2xx(成功)200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
201 (已创建) 请求成功并且服务器创建了新的资源。
202 (已接受) 服务器已接受请求,但尚未处理。
203 (非授权信息) 服务器已成功处理了请求,但返回的信息可能来自另一来源。
204 (无内容) 服务器成功处理了请求,但没有返回任何内容。
205 (重置内容) 服务器成功处理了请求,但没有返回任何内容。
206 (部分内容) 服务器成功处理了部分 GET 请求。
3xx(重定向)300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
301 (永久移动) 请求的网页已永久移动 ...
JavaScript之instanceof底层原理
JavaScript之instanceof底层原理instanceof可以用来判断某个实例是否属于某个它的父类型,也可以判断某个引用是否属于某个构造函数
instanceof底层是怎么工作的12345678910111213function _instanceof(L,R){ let R_prototype = R.prototype; let L_proto = L.__proto__; while(true){ if(L_proto === null){ return false; } if(L_proto === R_prototype){ return true; } L_proto = L_proto.__proto__; }}
测试一下
12345678910111213141516171819202122232425262728293031323334function Person(name,age,sex) ...
JavaScript之原型和原型链
## JavaScript之原型和原型链
在JavaScript的学习过程中,原型链肯定是一个很重要的知识点,下面我们就来深入的去看一下原型链
原型首先看一个很简单的例子
12345678910111213141516function Person(name, age) { this.name = name; this.age = age; this.sayName = function () { console.log("i am "+this.name); } } Person.prototype.sayAge = function () { console.log("i am "+this.age); } var person1 = new Person("ljm", ...
JavaScript之执行上下文(EC)
## JavaScript之执行上下文(EC)
在JavaScript中,执行上下文是一个基本概念,在执行上下文中,包括了变量对象(VO,Variable Object),作用域链(Scope Chain),this指向等,在闭包,函数/变量提升息息相关
执行上下文执行上下文可以理解为执行环境,执行环境定义了变量或者函数有权访问其他数据,决定他们各自的行为,执行环境主要包括了全局上下文,函数上下文,eval执行上下文。主要理解的是全局上下文和函数上下文。
在JavaScript代码执行的过程中,首先进入的就是全局环境,每个函数都有自己的执行环境。所以我们分别叫他们全局上下文和函数上下文
如何执行执行上下文是以栈的方式被存放起来的,称这个栈为执行上下文栈。
在JavaScript代码开始执行时,将全局上下文创建并入栈,当调用函数时,会进入对应函数的环境,创建函数上下文并入栈,当栈顶的执行上下文代码执行完毕后,则将其出栈。
一个简单的例子
12345678function fn2() { console.log('fn2')}funct ...
JavaScript之模拟实现new
## JavaScript之模拟实现new
new是JavaScript的一个关键字,可以实例化构造函数
1234567891011function Person(name,age) { this.name = name; this.age = age;}Person.prototype.sayHi = function() { console.log("HI! i am " + this.name);}var person1 = new Person("ljm", 18);console.log(person1.age);//18person1.sayHi();//HI! i am ljmperson1.__proto__ === Person.prototype;//true
从这个例子可以看出
new可以实例化一个对象
这个对象可以访问构造函数的属性
这个对象可以访问构造函数原型上的属性
对象的__proto__指向构造函数的原型
我们来模拟一下new的方法
12345678910 ...
JavaScript之深浅拷贝
## JavaScript之深浅拷贝
了解一下JavaScript中的深浅拷贝,以及他们的手写版
数据类型首先肯定要知道的是JavaScript的数据类型,JavaScript的数据类型可以分为两大类基本数据类型,引用数据类。
基本数据类型
Number
Boolean
String
Null
Undefined
Symbol
Bigint
引用数据类型
Function
Object
Array
了解完JavaScript拥有的数据类型后,来看看深浅拷贝
浅拷贝简单的来说就是,基本数据类型完全拷贝他们的数据,引用数据类型就拷贝内存地址
实现
Object.assign()
12345678910111213141516var obj = { name: 'ljm', age: 18, like:{ first: "sleep" }}var obj1 = Object.assign({},obj)console.log(obj1.name)//ljmconsol ...
JavaScript之闭包理解
## JavaScript之闭包理解
闭包(Closure)是JavaScript学习过程中一个非常重要的问题
闭包和执行上下文和作用域链有着千丝万缕的关系。闭包是指有权访问另一个函数作用域的变量的函数(JavaScript高级程序设计(第三版)P178)
闭包是一个函数,对闭包的一个理解可以是所在的执行上下文已经出栈,但是仍然访问了其所在的执行上下文变量对象的函数
这里所指的所在的执行上下文指的是闭包函数对应的执行上下文,而不是闭包本省所对应的执行上下文
来一个简单的例子
12345678function A(){ var a = 2; function B(){ console.log(a); } return B;}A()();
那么他的执行上下文栈行为是这样的
12345678910111213/*伪代码*/// 代码执行时最先进入全局环境,全局上下文被创建并入栈ECStack.push(globalContext);// A 被调用,A 函数上下文被创建并入栈ECStack.push(<A> func ...