- 博客(17)
- 收藏
- 关注
RSS订阅原创 精灵图（雪碧图）
1、为什么用精灵图？首先，我们先来了解一下，页面在接受图片的过程。每张图片的显示是先由浏览器发送请求，然后服务器接受请求，返回请求内容。如果一个页面有上百张图片，哪怕是很小的图标，都需要经历一次这样的过程。那么，毋庸置疑，肯定会由于请求数量的增加让整个页面的加载速度降低。正应为如此，精灵图（sprite）应运而生，图片整合技术，将大量的小图标整合到一张图，从而减少服务器接收和发送请求的次数，提高页面的加载速度。2、精灵图的原理是什么？精灵图的实质其实就是利用背景图和背景图的位置去显示同一张图
2022-05-24 19:50:01
251
原创 ES6 迭代器与生成器
一·迭代器1.迭代器是什么：迭代器（iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署iterator接口，就可以完成遍历操作。2.迭代是什么：从一个数据集合中按照一定顺序，不断取出数据的过程我们叫做迭代3.迭代和遍历有什么区别：遍历必须知道数据集合的长度，而迭代不需要迭代强调的是依次取出，不能够确定到底能取出来多少，也不确定能不能把数据取完3.迭代器需要满足的条件：**迭代器必须有得到下一个数据的能力4.属性：symbol（sy
2022-05-24 19:47:14
201
原创 关于AJAX
ajax (Asynchronous Javascript And XML)其实就是异步的javaScript和XML。Ajax模块在处理网络请求的时候包括以下四个步骤1.通过XMLHttpRequest类创建xhr对象 2.为xhr对象添加属性与回调方法 3.令xhr对象执行open()方法，指明请求被发往某处 4.令xhr对象执行send()方法，发出请求。xhr 对象发送GET、POST请求//1.创建对象var xhr;if (window.XMLHttpRe
2022-04-14 18:55:41
151
原创 Every() Some() map() ForEach()的理解 及源码
1.some():返回一个Boolean，判断当前数组中是否有一个数据满足条件源码：MySome:function MySome(){ var fn = arguments[0]; for(var i = 0;i<this.length;i++){ // 只有有一项，满足就返回true if(fn(this[i],i)){ return true; }..
2022-03-12 10:41:34
139
原创 call() apply() bind() 的区别
call() apply() bind() 都是改变this指向call() 执行函数 函数中的this指向第一个参数，其他参数一一传递apply() 执行函数 函数中的this指向第一个参数，其他参数以数组的形式传递bind() 返回一个新函数，新函数中的this指向给定的参数下面是自己总结的call()apply() bind() 的源码...
2022-03-12 10:25:01
104
原创 关于事件对象
事件在触发的一瞬间，浏览器会帮你记录一些信息（鼠标事件 触发位置）通用的对象属性target&&srcElement(IE中使用) 获取到当前事件的目标currentTarget 等效于this 获取绑定事件的元素preventDefault()&returnValue 阻止默认行为stopPropagatii...
2022-02-21 20:59:41
131
原创 异步加载的三种方案
1.defer 异步加载，要等到dom文档全部解析完成之后才会执行2.async 异步加载，只要js文件加载完就执行，只能加载外部链接的js文件3.按需加载 <!-- 按需加载 --> <script type="text/javascript"> function asyncLoaded(url,callback){ var script = document.createElement("script");//
2022-02-21 20:40:24
3289
原创 原型和原型链
prototype函数上的一个属性,prototype称之为原型默认情况下，prototype是一个普通的object对象constructor默认情况下,prototype中有一个属性,constructor,它指向构造函数本身proto隐式原型,所有的对象上有一个属性，proto 被称之为隐式原型注意：对象的隐式原型，指向创建该对象的构造函数的原型当访问对象的属性时：1.看该对象自身有没有这个属性,如果有直接使用2.隐式原型中有没有...
2021-12-25 11:31:25
363
1
原创 关于BOM
浏览器对象模型 —— browser object model 处理浏览器窗口中所有的访问和操作 window对象1.document 文档对象模型2.history 历史记录3.navigator 浏览器的版本信息4.location 地址栏5.screen属性innerHeight 获取窗口可视区域高度innerWidth 获取窗口可视区域宽度pageXoffset 横向滚动条的偏移量pageYoffset 纵向滚动条的偏移量offsetTop 元素距离页面顶
2021-12-25 11:23:44
474
原创 Dom元素操作
元素事件：某个元素发生了一件事情(click点击、mouseenter移入、mouseout移出)注册事件：元素.onclick 事件处理函数：当事件触发后就执行一段代码操作标签的属性dom对象.属性名 = 值 细节： input的value默认为 "" div value name 布尔属性在dom对象中，得到值是boolean操作属性自定义属性dom对象.属性名 = 值selected 布尔属性 selectedIndex 选中项的下标值.checked 多选框的布尔属性
2021-12-25 11:15:51
492
原创 浏览器线程
同步：同一时间只能做一件事异步：同一时间做多件事情1.JS引擎线程js 内核，js引擎，负责处理执行JavaScript脚本代码，也是JS中的主线程js是单线处理代码，负责调配其他子线程来处理异步代码js单线程异步2.GUI渲染线程 负责渲染浏览器界面 解析HTML树 css树 构建DOM树 reader树3.事件监听线程用来处理事件的监听，click mouseover4.计时器线...
2021-12-22 20:01:09
248
原创 关于HTML css的简单的问答题又来了哦
一、CSS引入的方式有哪些? link和@import的区别是? link连接方式和import导入方式，两者区别如下：1）链接时，不用写<style></style>2）导入时，一定要写<style></style>3）一般而言，链接的效率要高于导入（因为导入样式表相当于是将所有的样式规则原样复制到当前源文件中，增加了代码量，从而影响了加载的速度）（建议使用link的链接方式）二、边框样式常用属性有哪些？border-width.
2021-12-11 14:40:02
345
原创 html、css 一些简单的问答题 希望对大家有用哦
一、简述html、http、www、URL、web、W3C的意思Html:超文本标记语言http:超文本传输协议www:是环球信息网（World Wide Web ）的缩写，也可以简称为Web，中文名字为“万维网”。URL:统一资源定位器web:万维网W3C：万维网联盟（World Wide Web Consortium，简称W3C）二、HTML 的基本结构<html><head><ti...
2021-12-11 14:22:55
813
原创 数组内置API，Math对象，字符串API
一、数组APIpush() 添加末尾元素pop() 删除末尾元素unshift() 添加元素到头部shift() 删除元素头部concat() 数组合并indexOf(value) 数组元素对应的下标join(符号) 将数组衔接成字符串filter() 数组值过滤forEach() 数组遍历reverse() 数组反转sort() 数组排序splice()数组切片slice() 复制二、Math 对象Math.random(...
2021-11-24 20:46:38
226
原创 JS高阶函数
1.纯函数函数在有相同的输入时，会有相同的输出 函数的输出和当前运行的函数执行上下文无关（不影响运行环境，无副作用）2.防抖短时间内多次触发事件只执行一次（最开始的一次或最后一次的触发）防抖的封装 ↓<input type="text"><script>var ipt=document.getElemengtsByTagName('input')[0];ipt.oninput=dobounce(1000,test);function debou..
2021-11-24 20:07:14
225
原创 js中的三级联动
前提：需要一个拥有全部省份，市，区的js文件省份：<selectname=""id="province"><!--<optionvalue=""></option>--></select>市级：<selectname=""id="city"></select>区级：<selectname=""id="area"></sele...
2021-11-20 13:24:26
335
原创 关于克隆(深克隆or浅克隆)
<script>//创建克隆函数,data为要克隆的数据,flag为判断是深度克隆还是浅度克隆,functionclone(data,flag){//判断数据是否为数组if(Object.prototype.toString.call(data)==='[objectArray]'){vararr=[]//...
2021-11-20 13:19:46
545
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人