JavaScript
关注
分享
扫一扫
不难呐
这个作者很懒，什么都没留下…
展开
-
常用懒加载
懒加载及应用场景懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。实现的思路：给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-），监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，原创 2020-07-12 15:04:12 · 245 阅读 · 0 评论 -
面试题小试牛刀
考是否细心的题const res = [];for(var i = 0 ; i < 5; i++);{ res.push(i+1);}console.log(res); // 3解析：在上面代码中，for循环语句之后添加了一个分号，在js中，会判定这个语句已结束，因此可以知道for循环执行了四次空的语句，当退出循环时，此时的i值为5，然后执行{res.push(i+1);}，因此最终输出为6/*包含变量提升，this指向，运算符优先级，原型，继承，全局变量污染、对象属性、原型属性优先级原创 2020-07-05 20:04:37 · 183 阅读 · 0 评论 -
js常见简单的优化总结
前言一般在做项目时，要考虑js性能方面的问题，所以就来了解并掌握js编写代码的优化1. 巧用|| 和&&布尔运算符function eventHandler(e) { if(!e) { e = window.event }}//可优化替换为function eventHandler(e) { e = e || window.event;}2. 减少重绘和重排（回流）浏览器根据HTML结构生成DOM树，根据CSS生成CSSOM，再将DOM和CSSOM整合形成Ren原创 2020-06-21 18:16:41 · 479 阅读 · 0 评论 -
Object.defineProperty()方法的理解
跨域的产生跨域的问题其实浏览器的同源策略所导致的「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN「同源策略」是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。–来源 MDN...原创 2020-06-20 23:50:22 · 274 阅读 · 0 评论 -
js异步加载解决方案
异步加载js方案defer:只能IE9以下,等dom文档完全解析完之后执行defer 是在 HTML 解析完之后才会执行，如果为多个的话，按照加载的顺序依次执行defer脚本会在DOMContentLoaded和load事件之前执行<script src="indedx.js" defer ="defer "></script> async:加载完才执行，W3C标准方法async 是在脚本加载完之后立即执行，如果为多个的话，执行顺序和加载顺序无关async会在l原创 2020-06-15 01:17:20 · 202 阅读 · 0 评论 -
盘点常见面试题
js延迟加载的方式1、defer 只支持IE浏览器（IE9以下）2、async 加载完就执行 W3C标准方法3、创建script，插入到DOM，加载完毕后callback，按需加载<script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement('script'); script.type = 'text/javascrip原创 2020-06-07 20:52:32 · 190 阅读 · 0 评论 -
DOM基本操作（下）
一.查找元素节点1.按HTML属性查找var ele = document.getElementById('id值');var eles = document.getElementsByTagName('标签名');//可查找直接子元素，也可查找所有的子代元素（HTMLCollection）动态集合var eles = document.getElementsByClassName('类名...原创 2019-12-01 16:41:53 · 183 阅读 · 0 评论 -
老生常谈的this指向问题
1.普通函数var name = 'yaya'function fn() { console.log(this.name);}fn();//yaya 此时this指向全局变量yaya未显示指定this,函数默认被全局变量调用严格模式下严格模式下没有明确指定this时，this为undefined,抑制了this"use strict";var name = 'yaya'...原创 2020-03-10 19:15:02 · 114 阅读 · 0 评论 -
数据类型、检测、转换
一、数据类型基本数据类型：Undefine 变量初始值Null 空值 节点未获取到时为nullNumber 数字Boolean 布尔型 值为 true （真）， false （假）String 字符串 只要用引号引起来的都为字符串引用数据类型：Object 对象 、Array 数组 、Function 函数二、检测数据类型1、typeof()function fn...原创 2019-12-13 20:08:59 · 153 阅读 · 0 评论 -
数组去重的多种方法总结
1.双层for循环var arr = [1, 3, 9, 3, 2, 9, '2']; function fn(arr) { var res = [];//存结果 for(var i = 0; i < arr.length; i++){ //循环arr for(var j = 0; j < res.length; j++){ //循环res ...原创 2019-12-21 14:41:59 · 206 阅读 · 0 评论 -
Web本地存储常见的知识点
文章目录cookie和session的区别WebStorage和cookie的区别sessionStorage和localStorage之间的异同点sessionStorage的使用方法localStorage的使用方法cookie和session的区别cookie数据存放在客户端，session数据放在服务器端cookies存储：大小限制在4kb,通过请求服务端返回一个cookieID存...原创 2019-12-28 11:06:09 · 400 阅读 · 0 评论 -
浅度克隆和深度克隆的总结
浅度克隆（浅拷贝）对于基本数据类型（undefined、null、number、boolean、string），就是修改其中的一个值，另一个也随之改变。对于对象和数组来说，拷贝的只是地址值，修改新拷贝的对象会影响原对象，通过引用指向的是同一个堆内存。//浅度克隆function clone(obj) { var res = {}; for (var prop in obj) {...原创 2020-03-15 18:06:04 · 247 阅读 · 0 评论 -
js实现全国省市区三级联动
HTML代码 ：省：<select id="provice"> <option>--请选择--</option> </select> 市：<select id="city"> <option>--请选择--</option> </select> 区：<select i...原创 2020-01-03 12:58:30 · 608 阅读 · 0 评论 -
DOM基本操作（上）
一.介绍DOM(Document Object Model) : 操作一切结构化文档的通用API，用DOM即可操作HTML，又可操作XML，可实现增，删，改，查。二.DOM节点类型及属性根据W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：整个文档是一个文档节点 document对象：文档类型(Document) 元素节点：元素类型(Element)...原创 2019-11-24 21:06:43 · 154 阅读 · 0 评论 -
浅谈事件冒泡，事件捕获，行为，事件委托
事件冒泡 由微软公司提出的，就是由具体的元素逐级向上传播，直至到document对象。 生动形象的来说就是将一个石头扔到水里，然后泡泡从里向外冒。<body> <div id="country"> 中国 <div id="pro"> 湖北 <div id="city"> 武汉 </div> ...原创 2019-12-01 20:20:09 · 165 阅读 · 0 评论 -
对JS中立即执行函数和闭包的概解
一. 立即执行函数概念：立即执行函数（IIFE）就是匿名函数的自调，简单来说就是这个函数是立即执行函数体的，不需要再在函数外调用这个函数体。更通俗讲就是这个函数刚出生，就执行了。同时注意有名字的函数也可以自调立即执行函数，执行完就立即销毁 。重复使用变量不会让变量被污染的机制常见的两种形式：(function () {console.log(1)}) ()(function ()...原创 2019-11-12 23:37:04 · 414 阅读 · 0 评论 -
js的预编译&作用域链
js的介绍js属于解释型语言,从上往下，边解释边执行预编译预编译发生在函数执行的前一刻全局下：全局的变量声明和函数声明会存放在全局对象内（Global Object，简称GO，也属于window的一部分，可直接理解成window对象）函数内：预编译会提前把函数里的变量声明和函数声明依据规则存放在该活动对象内（Activation Object，简称AO）...原创 2019-11-12 00:47:33 · 173 阅读 · 0 评论 -
JS实现2048小游戏
js实现2048小游戏开始时的页面当游戏结束时会显示得分情况并可以再试一次HTML部分<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>2048小游戏</title> <link rel="stylesheet" href="st...原创 2019-11-10 13:15:43 · 577 阅读 · 0 评论 -
js原型链的概解
概念原型链查找就是通过 __proto__ 查找，查找至值为 null （ Object.prototype）时结束。__proto__ 是原型链查找中用到的，它总是指向 prototype；prototype 在定义构造函数时自动创建，它总是被 __proto__ 所指。prototype与__proto__的区别prototype只有构造函数才有的属性， __proto__是任何一...原创 2019-11-24 20:09:19 · 108 阅读 · 0 评论 -
es5严格模式常见点
一、严格模式的介绍“严格模式”的设立是为了消除js语法的一些不合理，不严谨的地方，减少一些怪异行为的出现；不再去兼容es3中的一些不规则的语法，使用全新的es5规范，保护代码运行的安全一样的代码，“严格模式”中，一些在正常模式下可以运行的语句，在严格模式下将不能运行二、严格模式的调用es5严格模式启动："use strict";是一行字符串，不会对不兼容es5语法的浏览器产生影响全...原创 2019-12-23 20:04:24 · 280 阅读 · 0 评论 -
js中函数的防抖和节流
为什么要防抖和节流？在做项目过程中，我们会绑定持续触发的事件，像鼠标移动事件mousemove，滚动条scroll，还有移动端的触摸事件touchmove等等，这些事件得频繁触发，就会导致浏览器出现卡顿情况，严重的话会导致浏览器崩溃。因此，就出现了函数的防抖和节流来解决这个问题。函数防抖当某事件频繁被触发时，在延迟的一定时间段内，该事件没有再次被触发，就会执行事件处理函数，防抖就是将多次执行...原创 2020-04-20 19:12:31 · 200 阅读 · 0 评论