- 博客(24)
- 收藏
- 关注
RSS订阅原创 浏览器底层渲染机制
浏览器底层渲染机制 浏览器底层渲染机制：我们从服务器获取代码后，浏览器是如何把代码渲染为页面及相关效果的 CRP(关键渲染路径)性能优化法则：了解浏览器底层处理的具体步骤，针对每一个步骤进行优化 JS中的同步和异步编程 +同步编程：上一件事情没有处理完，下一件事情无法处理 +异步编程：上一件事情即便没有处理完，也无需等待，可以继续处理后续事情 进程和线程：一个进程中可能包含多个线程 +进程：一般代表一个程序（或者浏览器打开一个页面就开辟一个进程） ...
2022-04-22 20:09:28
357
原创 JS懒加载
懒加载思路： +最开始加载页面，img的src不赋值，不会加载图片,把真实图片的地址赋值给img的自定义属性，方便后期想加载真实图片的时候获取 +如果src不赋值或者加载图片是错误的，会显示碎图，所以我们最开始让img是隐藏的【可以设置display，也可以设置透明度为0（透明度改变可以设置过度效果）】 +给图片所在的盒子设置背景占位图（或者背景颜色），在真实图片没有加载之前，用其占位【盒子宽高要事先设置好】 ---------------------------------------------
2022-04-22 20:04:47
897
原创 正则，捕获
正则：一种专门用来处理字符串的规则 处理：匹配，捕获 有一段正则和一个字符串，匹配的意思是看看这个字符串是否符合这个正则定义的规则，有一段正则和一个字符串，捕获的意思是把这个字符串中符合这个规则的部分获取到 特殊元字符： \d 代表数字 \D 代表除了数字以外的其他字符 \w 代表数字或字母或下划线 \W 代表数字字母下划线以外的字符 ^ 代表以什么开头 在正则的最前面 $ 代表以什么结尾 在正则的最后面 [a,b] // a或b /^[xy]$/:要不是以x开头结尾，要不就是以y开头.
2022-04-22 19:53:14
136
原创 JS商城排序怎么写
HTML部分 <body> <div class="container"id="productBox"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand"href="javascript:;"id='reset'>商城排序</a> <div class="collapse navbar-collapse show..
2022-04-22 19:40:08
366
原创 JS购物车计算器怎么写
第一种 HTML部分： <body> <div class="box"id="computedBox"> <div class="top"> <!-- <div class="hang"> <i class="minus"></i> <span class="pronum">2</span> <i class="add"></i> <span class="i
2022-04-22 19:32:38
451
原创 js数据排序
<body> <button id='btn'>年龄升序</button> <ul id='ul'> <h2>556756757575</h2> </ul> </body> </html> <script> // ul.innerHTML = `<li>姓名小红；年龄10岁</li> // <li>姓名小红2；年龄120岁</li
2022-04-22 19:21:50
537
原创 实现call，Tab，Apply，Create，Class
实现call function fn(q, w, e) { console.log(this) console.log(q, w, e) return 888 } var obj = { name:"珠峰", fn:888 } Function.prototype.myCall = function (target, ...arg) { // this ---> fn let fn = this; // 把fn执行，然后把其中的this 换成target let a = Sy
2022-04-20 20:27:48
137
原创 手写new，instanceof
手写new function Person(name, age, sex) { this.name = name this.age = age; this.sex = sex; } let p1 = new Person("小康", 12, 1) let p2 = myNew(Person, "小康", 12, 1) function myNew(C, ...args) { let obj = {}; obj.__proto__ = C.prototype; let res = C.c
2022-04-20 20:22:22
110
原创 review，constructor，instanceof，in
review // 单例模式 命名空间 let zhangsan = { name:" " } // 高级单例 用一个函数返回一个对象 let lisi = (function () { let count = 100 return { add() { console.log(count++) } } })() let home = (function () { })() // 工厂模式 function factory(name, age, flag = false) {
2022-04-20 20:11:15
107
原创 git，面向对象，原型
git git 就是一个代码的管理工具（github gitee码云 gitlab 代码的远程存储仓库） svn 代码集中管理 git config --global user.name "张三" git config --global user.email "[email protected]" // 这两行是用来告诉本机的git工具你是谁 /* 原型prototype 是一个函数的固有属性，只有当使用new去执行这个函数的时候，原型才能体现它的价值 这个原型中的属性是当前函数的所有实例的
2022-04-20 20:05:34
146
原创 this，练习
this // btn.onclick=function(){ // console.log(this); // } // this 执行主体：谁让这个函数执行了 // 特殊情况 全局下的this是window // 事件绑定中对应的函数的this是 绑定的那个元素 // 函数执行 里面的this是谁 就看执行前面有没有点，点前面是谁，this就是谁；没点就是window // 自执行函数中的this就是window，定时器中的this也是window // 箭头函数中没有this和a
2022-04-20 20:02:46
93
原创 选项卡闭包，带var和不带var的区别，暂时性死区，栈内存被释放的问题
选项卡闭包 <body> <div class="main"id="main"> <ul> <li class="current">音乐</li> <li>电视</li> <li>综艺</li> </ul> <div class="current">音乐内容</div> <div>电视内容</div> <div>
2022-04-20 20:00:52
173
原创 底层运行机制，作用域，变量提升
底层运行机制 抽奖 <style> #box{ width: 200px; height: 50px; border: 1px solid skyblue; } </style> </head> <body> <div class="box"id="box"></div> </body> </html> <script> function getCode(){
2022-04-20 19:56:25
132
原创 插入排序，DOM，Date
/* 思路：先取数组中的第一项，放到一个新的数组（是排好序的）中 然后屈埃格查看老数组中的后续项，取出某一个后续项之后，让它从后往前跟新数组中的元素比较找到比他小的那个元素之后，插入到这个元素之前 */ let ary=[2,6,3,89,56,15,4]; function sort(arr=[]){ for (let i=1;i<ary.length;i++){ // 索引i之前的那个 let temp = arr[i];// 这个代表的就是我们要插入的那个元素 // 用这个元素
2022-04-20 19:44:13
691
原创 JS--2.4
快速排序 let ary = [52,89,56,156,315,165,314,951,65]; /* 思路：先取数组的中间项，比这项大的放到一个数组，比这项小的放一个数组，然后合并；对于这两个数组 再去执行以上操作 */ function sort(arr){ if (arr.length<=1) return arr; let midIndex=Math.floor(arr.length/2); let mid = arr[midIndex]; let left=[],rig
2022-04-15 20:26:35
101
原创 JS--2.3
Math方法 <script> console.log(Math.abs(-1)); console.log(Math.abs(1)); // 向下取整，无论是正数还是负数 取得是小的 console.log(Math.floor(1.5)); console.log(Math.abs(-1.5)); // 无论是正数还是负数 取得是大的 console.log(Math.ceil (1.5)); console.log(Math.ceil(-1.5)); // 四舍五入
2022-04-15 20:22:19
109
原创 JS--2.2
去重 //第一种 var ary =[1,1,1,2,3,2,3]; for (var i=0;i<ary.length-1;i++){ //拿出的这一项 var currentItem = ary[i]; for (var j = i+1;j<ary.length;j++){ // 后面的每一项 var afterItem = ary[j]; if(currentItem == afterItem){ ary.splice(j,1); // 数组的下标塌陷问题 j--
2022-04-15 20:17:15
83
原创 JS--2.1
函数 // 自调用 (function fun (){ console.log(1111); })();// 记得加分号 // 匿名函数 (function (){ console.log(222); })() var a = function(){} // 箭头函数 ES2015新增的（ES6） // 1.如果形参只有一个 那小括号可以省略 // 2.如果{}里只有一条语句，大括号可以省略 var f = (a,b) =>{ console.log(a,b); } f
2022-04-15 20:13:50
162
原创 JS--1.5
函数1. // 函数 // 函数可以理解成一个能够实现特定功能的代码块 // var let const function class import /* function 函数名（就是变量名）(){ // 函数体 } 函数名（）//函数执行（调用） function 函数名（形参1，形参2，形参3....）{ // 对于这个函数体来说 形参就是变量 } 函数名（实参1，实参2，实参3....） 实参和形参是按照位置一一对应的,若没有实参和形参对应，那么形参对应的默认值就是 und
2022-04-15 20:06:48
108
原创 JS--1.4
或与非 <script> var key = 2; if (key == 2 || key ==3){ //key等于2或等于3的时候成立 console.log('key是2或者3'); } // 1<key<10 if (key >1 && key <10){ //key 大于1 并且 小于10的时候成立 console.log('key'); } //语句：声明的 if的 for的 switch的 //表达式：三元 ，函数执
2022-04-15 19:46:24
226
原创 JS--1.3
判断语句 // 单向分支 // 语法： if(条件){} // 满足条件才到里面，执行里面的代码 // 做一些事情... if (1>0);{ console.log("蹦个迪"); } // 双向分支 if (2>1){ console.log("吃板面"); }else { console.log("小学没过关"); } //多向分支 //只要满足一个条件,就停止往下比较,如果都不满足就到else里面 var zhangsan=100; if (zhangs
2022-04-15 19:45:28
73
原创 JS--1.2
普通对象 /* 对象/引用数据类型： +Object（普通对象） +都西昂通俗理解就是再这里面把多个信息整合在一起 +用大括号包裹，里面是成对出现，俗称键值对（key value），如果要多对就是都好隔开 {"属性名"："属性值""} +对象的属性名一般是字符串或者数字 */ var zhangsan = {"age":20,sex:1,hobby:"睡觉",100:100} var lisi = {age:20,sex:1,hobby:"睡觉",100:100} /* 对象的增删改
2022-04-15 19:44:46
150
原创 JS--1.1
1.命名规范 <script> // 命名规范: //小驼峰 myName //大驼峰 MyName //下划线 my_name //语义化 //不能是关键字和保留字 关键字，就是代表特殊含义和功能的名字， 比如 var、function、break、else、new、var、 case、 finally 、 return、 void 、 catch 、for 、switch 、 while 、 continue、this 、 with 、default
2022-04-15 19:43:22
126
原创 css基础知识整理
体验BAT/TMD面试的模式 @1 什么是标签语义化：合理的标签做合适的事情 @2 都有哪些标签：块，行内，行内块 @3 相互之间有啥区别 1.块级标签独占一行（默认不能同行排列，宽默认100%，高默认auto），可以手动设置宽高 2.行内标签：共占一行（宽默认auto，高默认auto），手动设置宽高无效，margin只能设置左右，无法设置上下 3.行内块：具备块和行内块的特点，共占一行，可以手动设置宽高 @4 如何相互转换 display：block（转换为块级标签） display：i
2022-04-15 19:37:53
649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人