01 2021 档案

前端性能优化总结
摘要：说起性能优化我们要从用户输入url，按下回车到页面完整呈现所经历的过程入手 1、DNS 解析 2、TCP 连接 3、发送 HTTP 请求 4、服务器响应 5、浏览器解析渲染页面 在上面的五个步骤中都涉及到性能优化，我们今天主要看下从前端的角度能进行哪些优化 上面我们关心的主要是3/4/5这几个过程的 阅读全文
posted @ 2021-01-26 14:55 JS-Feng 阅读(234) 评论(0) 推荐(0)
js 从url输入到页面呈现
摘要：★ 从url输入到页面呈现的过程 1.DNS 解析 2.TCP 连接 3.发送 HTTP 请求 4.服务器响应 5.浏览器解析渲染页面 这里我们主要介绍下 浏览器解析渲染页面 如上图，浏览器的渲染过程为： 1.解析 HTML，生成 DOM 树 2.解析 CSS，生成 CSS 规则树（CSS Rule 阅读全文
posted @ 2021-01-25 17:14 JS-Feng 阅读(265) 评论(0) 推荐(0)
js Event Loop
摘要：什么是Event Loop? JavaScript 从 script 开始读取，然后不断循环，从 “任务队列” 中读取执行事件的过程，就是 事件循环（Event Loop）。 Event Loop的执行过程 1.一开始整个脚本 script 作为一个宏任务执行 2.执行过程中，同步代码 直接执行，宏 阅读全文
posted @ 2021-01-23 14:43 JS-Feng 阅读(98) 评论(0) 推荐(0)
js 深浅拷贝+call/apply/bind
摘要：一、传值与传址 基本类型的值存在栈内存中 引用类型的地址存在栈内存中，地址指向堆内存中存储的值 浅拷贝和深拷贝是针对引用类型的数据来说的。 二、浅拷贝 把一个对象中的所有的内容,复制一份给另一个对象,直接复制,或者说,就是把一个对象的地址给了另一个对象,他们指向相同,两个对象之间有共同的属性或者方法 阅读全文
posted @ 2021-01-22 18:00 JS-Feng 阅读(536) 评论(0) 推荐(0)
js继承的用法
摘要：继承 组合继承 组合继承实际就是构造函数继承+原型链继承 function Person(name,age,sex) { this.name=name; this.age=age; this.sex=sex; } Person.prototype.sayHi=function () { consol 阅读全文
posted @ 2021-01-16 17:37 JS-Feng 阅读(259) 评论(0) 推荐(0)
js闭包与柯里化
摘要：闭包 什么是闭包？ 引用《javaScript高级教程》中的概念，闭包是指有权访问另一个函数作用域中的变量的函数。 简单描述就是在函数A中，返回一个函数B，函数B可以直接访问函数A中的变量，那么函数B就称为函数A的闭包。 案例： function calculator(){ let i = 0 re 阅读全文
posted @ 2021-01-15 11:17 JS-Feng 阅读(504) 评论(0) 推荐(0)
js原型链原理
摘要：先附上原型链的图，能看懂的本文就没必要看了，看不懂的可以带着疑问看文章 一、构造函数 什么是构造函数：当一个普通函数创建一个类对象是，那么就程它为构造函数。 特点： 默认首字母大写 使用new关键字来调用，并返回一个实例对象 内部使用this来构造属性和方法 this指向返回的新对象 functio 阅读全文
posted @ 2021-01-14 16:13 JS-Feng 阅读(1162) 评论(0) 推荐(0)
利用setTimeout实现setInterval
摘要：这里采用构造函数的方式 function SetTime(){ this.hook =true } SetTime.prototype.setIntervals = function(fn,time){ if(this.hook){ setTimeout(()=>{ fn() this.setInt 阅读全文
posted @ 2021-01-12 16:56 JS-Feng 阅读(484) 评论(0) 推荐(0)
js拖拽实现方式
摘要：js拖拽 方式一：drag、drop <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi 阅读全文
posted @ 2021-01-12 14:56 JS-Feng 阅读(347) 评论(0) 推荐(0)
javaScript事件流
摘要：事件流：事件从发生到传播结束的过程。 事件流三个阶段：捕获阶段、目标阶段、冒泡阶段。 addEventListener： EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标 阅读全文
posted @ 2021-01-11 17:18 JS-Feng 阅读(370) 评论(0) 推荐(0)
Canvas 实现雪花效果
摘要：效果图： 思路分析： 1、画背景 2、循环画雪花（引入雪花图片） 3、添加随机（x,y）坐标 4、设置随机大小，添加旋转效果 5、添加动画向下移动（当y轴超出画布时，重新设置y轴坐标为0） 不BB直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta 阅读全文
posted @ 2021-01-08 16:06 JS-Feng 阅读(560) 评论(0) 推荐(0)
JavaScript基础知识梳理
摘要：一、简单数据类型 Number、String、Boolean、Undefined、Null 1、Number： 方法： toPrecision( ) 返回指定长度的数字（范围是1到100） toFixed( ) 用于小数点后面的位数四舍五入（默认为0，范围是0到100） toString( ) 转换 阅读全文
posted @ 2021-01-07 17:10 JS-Feng 阅读(139) 评论(0) 推荐(0)
canvas基本使用
摘要：一、绘制矩形 fillRect(x,y,width,height) 填充矩形 fillStyle = "rbg(x,x,x)" 填充矩形颜色 strokeRect(x,y.width,height) 绘制矩形边框 strokeRect = "rgb(x,x,x)" 绘制矩形边框颜色 clearRec 阅读全文
posted @ 2021-01-06 17:12 JS-Feng 阅读(212) 评论(0) 推荐(0)
CSS3总结
摘要：1、边框 border-image: 边框图片 border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */-o-border-i 阅读全文
posted @ 2021-01-04 14:41 JS-Feng 阅读(116) 评论(0) 推荐(0)
HTML5-video视频/audio音频
摘要：1、video 兼容性：Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素 controls 属性表示控件是否显示 play()方法表示播放 pause()方法表示暂停 load()方法表示停止 playbackR 阅读全文
posted @ 2021-01-04 10:37 JS-Feng 阅读(257) 评论(0) 推荐(0)