听花海的双鱼男-优快云博客

原创浏览器底层渲染机制

浏览器底层渲染机制浏览器底层渲染机制：我们从服务器获取代码后，浏览器是如何把代码渲染为页面及相关效果的CRP(关键渲染路径)性能优化法则：了解浏览器底层处理的具体步骤，针对每一个步骤进行优化JS中的同步和异步编程 +同步编程：上一件事情没有处理完，下一件事情无法处理 +异步编程：上一件事情即便没有处理完，也无需等待，可以继续处理后续事情进程和线程：一个进程中可能包含多个线程 +进程：一般代表一个程序（或者浏览器打开一个页面就开辟一个进程） ...

2022-04-22 20:09:28 344

原创 JS懒加载

懒加载思路：+最开始加载页面，img的src不赋值，不会加载图片,把真实图片的地址赋值给img的自定义属性，方便后期想加载真实图片的时候获取+如果src不赋值或者加载图片是错误的，会显示碎图，所以我们最开始让img是隐藏的【可以设置display，也可以设置透明度为0（透明度改变可以设置过度效果）】+给图片所在的盒子设置背景占位图（或者背景颜色），在真实图片没有加载之前，用其占位【盒子宽高要事先设置好】---------------------------------------------

2022-04-22 20:04:47 885

原创正则，捕获

正则：一种专门用来处理字符串的规则处理：匹配，捕获有一段正则和一个字符串，匹配的意思是看看这个字符串是否符合这个正则定义的规则，有一段正则和一个字符串，捕获的意思是把这个字符串中符合这个规则的部分获取到特殊元字符：\d 代表数字\D 代表除了数字以外的其他字符\w 代表数字或字母或下划线\W 代表数字字母下划线以外的字符^ 代表以什么开头在正则的最前面$ 代表以什么结尾在正则的最后面[a,b] // a或b /^[xy]$/:要不是以x开头结尾，要不就是以y开头.

2022-04-22 19:53:14 129

原创 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 353

原创 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 440

原创 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 526

原创实现call，Tab，Apply，Create，Class

实现callfunction 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 ---> fnlet fn = this; // 把fn执行，然后把其中的this 换成targetlet a = Sy

2022-04-20 20:27:48 129

原创手写new，instanceof

手写newfunction Person(name, age, sex) {this.name = namethis.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 99

原创 review，constructor，instanceof，in

review// 单例模式命名空间let zhangsan = {name:" "}// 高级单例用一个函数返回一个对象let lisi = (function () {let count = 100return {add() {console.log(count++)}}})()let home = (function () {})()// 工厂模式function factory(name, age, flag = false) {

2022-04-20 20:11:15 103

原创 git，面向对象，原型

gitgit 就是一个代码的管理工具（github gitee码云 gitlab 代码的远程存储仓库）svn 代码集中管理git config --global user.name "张三"git config --global user.email "164xxxxxxx@qq.com"// 这两行是用来告诉本机的git工具你是谁/*原型prototype 是一个函数的固有属性，只有当使用new去执行这个函数的时候，原型才能体现它的价值这个原型中的属性是当前函数的所有实例的

2022-04-20 20:05:34 141

原创 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 84

原创选项卡闭包，带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&gt

2022-04-20 20:00:52 163

原创底层运行机制，作用域，变量提升

底层运行机制抽奖<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 124

原创插入排序，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 682

原创 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 95

原创 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 106

原创 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 75

原创 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 154

原创 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 102

原创 JS--1.4

或与非<script>var key = 2;if (key == 2 || key ==3){//key等于2或等于3的时候成立console.log('key是2或者3');}// 1<key<10if (key >1 && key <10){//key 大于1 并且小于10的时候成立console.log('key');}//语句：声明的 if的 for的 switch的//表达式：三元，函数执

2022-04-15 19:46:24 214

原创 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 68

原创 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 140

原创 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 120

原创 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 643

LYL000305的博客