Dimuzero的博客

1.页面渲染过程解析HTML构建 DOM Tree解析CSS构建 CSSOM Tree构建渲染树（Render Tree）根据Render Tree渲染网页节点实现布局2.什么是回流和重绘2.1回流当渲染树render tree中的一部分因为元素的规模尺寸，布局，隐藏等，而需要重新构建。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘回流代价远大于重绘，回流必然发生重绘，而重绘不一定发生回流回

let query = `q=2333&order=asc`; const params = new URLSearchParams(query); console.log(params.get("q")); console.log(params.has("q")); console.log(params.toString()); params.set("q", "123"); params.append("nam...

闭包深入理解1.执行上下文（执行环境）全局环境，函数环境，Eval环境栈stack存储执行环境2.闭包运行机制把一个可以访问到main函数的作用域的函数返回出去<script> function main() { var a = 1; return (function () { return a })() } let a = main() console.log(a);for (var i =

1.数组的特点1.1 概念：数组是一组数据的集合，在内存中是一段连续的内存空间。1.2 定义数组let arr1 = [];let arr2 = new Array();1.3 特点：无需指定数组长度，存储数据类型不限2.数组常用API1.push：数组后端插入，返回数组长度2.pop：数组后端删除，返回删除项3.unshift：数组前端插入，返回数组长度4.shift：数组前端删除，返回删除项5.slice(i,j)：截取数组从i到j（不包括j）6.join：转字符串（

1.手写instanceof function myInstanceof(A, B) { a = A.__proto__; b = B.prototype; while (true) { if (a == b) { return true; } else { return false; } a = A.__proto__; } }2.手写

JS中的深浅拷贝1.浅拷贝和深拷贝区别浅拷贝就是两个对象经过拷贝后公用一个内存地址，修改其中一个另一个也会改变深拷贝是开辟新的内存空间，两个对象互不影响2.浅拷贝实现1.使用=号实现2.使用for in循环实现3.使用Object.assign()4.使用new Object()3.深拷贝实现1.使用JSON.parse(JSON.stringify())实现2.使用Object.create()3.使用遍历+forin循环//遍历+forin循环function deep

防抖：事件被调用后，在执行之前无论被调用多少次都会从头开始计时节流：不管事件被调用多少次，总是按规定时间间隔执行//防抖let title = document.getElementById('title')function move(){ console.log(1)}function demomove(fn,time){ var timer //闭包 return function(){ if(timer){ clearTimeout(timer) timer =

canvas常用api属性使用参数fillStyle（填充颜色）字符串颜色值（十六进制，rbg，rbga）strokeStyle（线条颜色）字符串颜色值（十六进制，rbg，rbga）lineCap（线条端点样式）字符串（buzz，round和square）lineJoin（两线条相交时的拐点样式）字符串（）lineWidth（线条的宽度）数值类型（如果是负数，NaN或者Infinity都会忽略）shadowColor（阴影的颜色）字符串（十六进

加密的时候必须转成字符串 使用toString。 解密的时候 必须使用utf8的格式1.base64加密btoa加密，atob解密 （字母数字）var num1 = '1234as'console.log(btoa(num1));console.log(atob('MTIzNGFz'))2.最简单的加密解密escape加密unescape解密 （中文）var num2 = escape('你好怕')console.log(num2);console.log(unescape('%u4

方法作用setItem（）创建缓存getItem（）获取缓存key（）通过键值获取缓存removeItem()移除缓存clear()清除所有缓存缓存方式解释sessionStorage会话缓存：在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁localStorage本地缓存：用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除1.创建缓存会话缓存：在同一个会话中的页面才能访问并且当会话结...

1.创建cookie创建格式 document.cookie = '名称=值；expires=时间（国际标准时间）；path=路径'简单创建document.cookie = 'user=maodou'我们可以在创建时指定其路径和事件document.cookie = "_key=num;expires=Sun Jan 28 2021 10:15:37 GMT+0800;path=/"2.读取cookie读取出来的cooike是字符串形式console.log(document.

1.工厂模式<script> function people(name, age, sex) { var obj = {} obj.name = name obj.age = age obj.sex = sex obj.sleep = function () { return this.name + '睡觉' } return obj } var p1 = people(

1.继承的概念通过某种方式让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承2.为什么要使用继承（节约内存）有些对象会有方法(动作、行为)，而这些方法都是函数，如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费3.继承的几种方法3.1 原型链继承让新实例的原型等于父类的实例。//动物对象 function Animal(name, age, sex) { this.name = name this.age = age t

1.构造函数创建对象//构造函数创建对象function Person() { this.name this.age }//实例化对象var people = new Person()console.log(people);2.对象中的属性2.1 prototype（原型对象）每个函数都有一个 prototype 属性函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 person1 和 pe

JS中的对象1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性__proto__，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。2.方法(Function)方法这个特殊的对象，除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个

var obj = { name: "张三", age: 18, mySay: function (fm, t) { console.log('我是' + this.name + '今年' + this.age + '来自' + fm + '去往' + t); } }var objOther = { name: '李四', age: 20 }obj.mySay()上述代码定义两个对象，当执行obj中的my

一.五步法1.创建对象 var http=new XMLHttpRequest();2.建立连接 http.open()3.发送请求 http.send()4.监听事件 5.渲染界面1.创建ajax对象var http=new XMLHttpRequest();2.建立连接2.1 格式http.open('get', url, true)http.send('post', data)2.2 参数解释2.3 参数理解2.3.1 get和post与 POST 相比，GET

RegExp 1.正则表达式var reg = / 正则规则 / var reg = new RegExp( **变量名 **/ 正则规则) 2.修饰符i （执行对大小写不敏感的匹配）g （执行全局匹配）m（执行多行匹配） 3.方法方法名作用reg.test()匹配返回true否则返回falsereg.exec()匹配返回一个数组obj.match()匹配并且返回符合的字符串 4.转义字符 \把

JS中的计时器 1.循环计时器setInterval（function，time，value）function函数名 time 多长时间执行一次value传入参数  1.1创建计时器可以不用变量接收方法一var timer = setInterval(function () { var time = new Date() console.log(time);

1.Json数据类型简单Json的使用后台给前端返回的数据格式 JSON解析json 进行数据绑定JSON 数据类型是 ： 数组 + 对象创建（name上的引号可以不加）var arr=[ {"name":"b1"}, {"name":"b2"}, {"name":"b3"}, {"name":"b4"} ];调用console.log(arr[1].name);2.分页算法<!DOCTYPE

BOM浏览器对象模型（BOM）1.Window对象所有浏览器都支持 window 对象。它表示浏览器窗口全局变量是 window 对象的属性，全局函数是 window 对象的方法。window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸2.Window尺寸2.1 innerwindow.innerHeight - 浏览器窗口的内部高度(包括滚动

1.利用index计数避免了函数的闭包问题<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>

DOM元素事件处理机制1.DOM元素事件（原生js事件全部带on）1.1 window事件onload在浏览器完成对象的装载后立即触发onresize事件会在窗口或框架被调整大小时发生onerror事件在视频/音频（audio/video）数据加载期间发生错误时触发onscroll事件在元素滚动条在滚动时触发1.2 鼠标事件onmouseenter鼠标进入onmouseleave鼠标离开(水平离开)onmouseout鼠标离开(垂直+水平离开)onmouseup鼠标左键按下onmou

DOM中的事件对象1.事件对象<button style="margin: 30px; width: 50px; height: 30px;">点击</button> <script> var btn = document.getElementsByTagName('button')[0] btn.onclick = function () { //event等价window.event

DOM修改样式通过修改html来实现修改元素样式的目的（间接修改）1. 修改行内样式通过修改html标签属性中的style来达到修改元素样式的目的Element.style.display = 'none'Element.style.backgroundColor = 'red'Element.style.transform = 'translate(' + number+ 'px)' 注意：a.backgroundColor关于背景的写法，去掉-并且后面的后缀描述首字母大写b.wid

DOM对元素属性的操作1.getAttribute获取元素属性值input.getAttribute('type')2.setAttribute给元素添加属性值（第一个参数是属性名，第二个参数是属性的值）必须两个参数input.setAttribute("yes", "ok") //yes=ok添加属性（一个值）input.attributes.setNamedItem(disabled)3.createAttribute创建属性（用变量接收）var NewAttribut

DOM 基本操作（ 增 删 改 插 ）  1.增（动态创建dom元素） document.creatElement();创建元素节点document.creatElementTextNode()；创建文本节点document.creatElementComment(); 创建注释节点document.creatElementDocumentFragment(); 创建文档节点  2.删（剪贴操作）parent.removeC

DOM获取元素 8种方案（两静态四动态两特殊）    1. 两个静态获取一下两种方法不具有 实时性（只能获取页面已经存在的元素）使用 css 选择器 进行选择（.类名）1.1 querySelectordocument.querySelector(‘选择器’)在指定上下文中通过选择器获取第一个元素（只能获取一个），获取不到就是null1.2 querySelectorAlldocument.querySelectorAll(‘选

DOMDom —> Document Object Model（文档对象模型）定义了标识和修改文档所需的方法，用来操作html和xml，dom是对html和xml的标准编程接口是关于如何获取、修改、添加或删除 HTML 元素的标准（改变不了css样式表，但是可以通过改变html中标签的行内样式间接修改css）1. DOM元素获取 (八种方法)在进行dom元素获取的时候要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在,根据页面的加载顺序来考虑）js里面dom元素操作不

JS中的内置对象Math,Date内置对象Array数组内置对象String字符串内置对象自定义对象学习自此网站1.创建简单自定义对象var stu = { age: 18, name: 'JAKE', sex: '男', sleep: function () { }, eat: function () { } } console.log(st

JavaScript中的闭包问题概念：把局部变量闭包成当前作用域的私有变量优点：把局部变量拿到作用域的外部使用。缺点：闭包的变量会存到内存里面 ，大量使用闭包会导致内存泄漏，所以这个时候就要用到垃圾回收机制（做开发时尽量避免闭包的使用）。垃圾回收机制指的是方法内部的局部变量在使用完成之后 自动回收，下次调用函数的时候会重置，如果通过闭包没有自动回收，要进行手动回收闭包例题1function Method() { var num = 1;//闭包变量 //闭包函

JavaScript中的函数1. 介绍函数函数的关键字： function如何声明函数：methon函数名，（）内填写函数的参数列表function method(){ /* * 代码区域 * */ }2.函数分类2.1 具名函数和不具名函数（匿名函数）2.1.1 具名函数a.声明函数function method (){ /* * 代码区域 * */}

JS中数组的遍历方法1. 方法一for循环直接遍历var a = [1, 2, 3, 4, 5]for (var i = 0; i < a.length; i++) { console.log(a[i]); }2. 方法二数组内置对象的方法forEachvar a = [1, 2, 3, 4, 5]a.forEach(function (value, index, array) { console.log(value); })3. 方法三数组内置对象的方法mapvar

JS中every和some，filter和find，map和forEach的区别1.every和some返回布尔类型值every：查看每一个元素，如果都符合条件则返回true（返回值为 true / false ）some：查看每一个元素，只要有符合条件的元素就返回true（返回值为 true / false ）var a = [23, 12, 45, 6, 36]function ageSort(age) { return age >= 18 }console.log(a.

JS中的数组 1.数组的声明赋值1.1 内置对象声明赋值var arr = new Array()arr = new Array(5, 3, 2, 1);console.log(arr);1.2 直接声明赋值var arr = []arr = [1, 2, 3, 4]console.log(arr);   2. 数组的追加和拼接 2.1数组的追加2.1.1 pusharr.push(num1,num2,num3……

JaveScript中的字符串操作一.字符串的查找 1.indexOf 和 lastIndexOf这两个方法都有两个参数：1.第一个参数是要找的字符 2.第二个参数是从那个位置开始找当只有第一个参数的时候，找的到返回字符所在的位置并且只找一次，找不到返回 -1 1.1 indexOf从字符串初始位置开始找 var str1 = 'asd12da' //从前面开始找 console.log(str1.indexOf('a'))

Date（日期对象）1.创建Date对象:​ new Date( )​ 设置固定时间（字符串）new Date（“2021-02-12 00:00:00”）2.Dated对象方法方法描述getDate()返回一个月中的某一天（1-31）getDay()返回一周中的某一天（0-6）getFullYear()从Date对象以四位数返回年份getHours()返回Date对象的小时（0-23）getMilliseconds()返回Date对象的

JavaScript中的运算符和结构语句1.Js中的运算符算数运算符+, - ,*, / , % , = , == , === , ++ , - -逻辑运算符&&两者都 , ll 两个满足其一, ! 取反面比较运算符> , < ,>= ,<=, !=1.1算数运算符a.++自增+1，–自减-1前置是先自增或自减在运算后置是先运算 再自增自减b.=, ==, ====:赋值== : 判断两边值相等 但不限定类型=

JavaScript中的节点(node)  1.节点类型  元素节点(页面中的标签) 属性节点 文本节点(内容、空格、回车(换行)) 注释节点 document(整个大文档(整个页面)) 1 2 3 8

JS中的数据和变量JS是一种专门为与网页交互而设计的脚本语言JS的组成部分：1.核心（ECMAScript）提供核心语言功能2.文档对象模型（DOM）提供访问和操作网页内容的方法和接口3.浏览器对象模型（BOM）提供与阅览器交互的方法和接口1. 如何在html中使用JS1.1 嵌套在html中a. 嵌入到head中<html> <head> <title>Demo</title> <script