一，什么是懒加载？一般情况下，当一个页面加载以后，图片也会开始全部加载，这样会增加客户端和服务器的压力。为了减轻负担，让图片先出现在浏览器视口以后再进行加载。方法一，使用三个相关API：1，获取可视区域的高度 document.documentElement.clientHeight2，获取元素到文档顶部的高度 element.offsetTop3，获取浏览器窗口顶部与文档顶部之间的距 document.documentElement.scrollTopvar imgs = document.querySelectorAll('.lazyload-img'); //循环获取直到页面顶部的高

一，Fetch API 介绍Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch()方法来跨网络异步获取资源。fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。二，基本用法：fetch('https://test.com/api/info') .then(response => response.json()) .then(json => console.log(json)) .catch(err => console.log('Request

一、ASCII 码所有信息最终都是一个二进制值。每一个二进制位（bit）有0和1两种状态，因此八个二进制位就可以组合出256种状态，这被称为一个字节（byte）。「加ascii图」 二、ASCII 编码的缺点英语用128个符号编码就够了，但是用来表示其他语言，128个符号是不够的。一些欧洲国家就决定，利用字节中闲置的最高位编入新的符号。 比如，130在法语编码中代表了é，在希伯来语编码中却代表了字母Gimel (ג)，在俄语编码中又会代表另一个符号。但是不管怎样，所有这些编码方式中，0--127表示的符号是一样的，不一样的只是128--255的这一段。 至于亚洲国家的文字，使用的符号就更多了，

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之处在于，在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。之前：let nestedProp = obj.first && obj.first.second; 使用可选链操作符?.let nestedProp = obj.first?.second; 连用可选链操作符let custome

场景1，有些用户很调皮，快速多次点击一个按钮。2，用户不必特地捣乱，他在一个正常的操作中，都有可能在一个短的时间内触发非常多次事件绑定程序。比如页面绑定的 resize 事件。分析怎么解决？函数节流就是一种办法。函数节流，简单地讲，就是让一个函数无法在很短的时间间隔内连续调用，只有当上一次函数执行后过了你规定的时间间隔，才能进行下一次该函数的调用。函数节流的原理挺简单的，估计大家都想到了，那就是定时器。当我触发一个时间时，先 setTimout 让这个事件延迟一会再执行，如果在这个时间间隔内又触发了事件，那我们就 clear 掉原来的定时器，再 setTimeout 一个新的定时器延迟一会执行

后端篇地址：https://javascript.net.cn/article?id=649相关文档：https://restfulapi.cn/d/271前端代码主要功能是，连接服务器，发送心跳，断开服务器后自动连接。/** * JSSDK 对象 */ var PigIM = { config: {}, // 配置 fromId: {}, // 发送者 ID ws: {}, // Websocket 对象 connection: {}, listen: {}, heartbeatTimer: {},

作用：将一个数组转为用逗号分隔的参数序列。//该运算符主要用于函数调用。function push(array, ...items) { array.push(...items);} function add(x, y) { return x + y;} var numbers = [4, 38];add(...numbers) // 42//扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出一个数组最大元素的写法。// ES5 的写法Math.max.apply(null, [14, 3, 77]) // ES6 的写法Math.max(...[14, 3, 7

var numArr = [] var canvas = document.querySelector('#canvas'); var ctx = canvas.getContext('2d'); draw(); canvas.onclick = function () { ctx.clearRect(0, 0, 120, 30); draw(); } function draw() { /*绘制一个矩形 颜色随机*/ ctx.fillStyle = randColor(170,

最近探究js原理的过程中遇到了这个挺有趣的问题。先贴代码：var a = {n:1}a.x = a = {n:2}alert(a.x) //undefined在弄懂这个之前，我们先普及一个知识点，就是在javascript运算符中，属性运算符的优先级高于赋值运算符的优先级。因此，a.x是先于赋值之前就进行的。就是说，a.x刚开始是undefined的，这是没错的。接下来我们探究一下连等赋值的赋值顺序：1、从左往右a.x赋值为{n:2};然后a赋值为{n:2};a的重新指向重写了a.x,即.x属性不存在，因此a.x输出为undefined。2、从右往左a赋值为{n:2};直接限制了a.x的赋值，

在文件上传的时候我们我们选择监控change事件来获取文件，如果第一次如果选择了A文件，当再次点开选择A 文件时，change事件没有触发，这时可以用如下方式处理.1. vue项目处理方式：this.$refs.uploadExcelId.value=null;复制该代码到项目中，并且把uploadExcelId换成自己input的ref即可。2. 普通js处理方式：event.target.value=”;尽量不要用删除dom元素，再添加这种操作方式，因为还需要在做事件绑定比较麻烦。

for和forEach的差别是后者不能正常的跳出循环（return、break等），其它的差别不大，把forEach转成for的写法就知道为什么你的for写法可以顺序执行而forEach不能：for:const report = async () => { for (let i = 0, len = arr.length; i forEach:const report = async () => { arr.forEach(async (item) => { await asyncFn(item); }); }; 上述forEach的写法相当

axios API可以通过向 axios 传递相关配置来创建请求axios(config)// 发送 POST 请求 axios({  method: 'post',  url: '/user/12345',  data: {   firstName: 'Fred',   lastName: 'Flintstone'  } }); // 获取远端图片 axios({  method:'get',  url:'http://bit.ly/2mTM3nY',  responseType:'stream' })  .then(function(response) {

DOM由来 因为Internet Explorer4和Netscape Navigation4分别支持不同的DHTML（动态HTML）,为了统一标准，负责制定web通信标准的W3C(World Wide Web Consortium,万维网联盟)开始制定DOM. DOM0 Netscape Navigator 4和IE4分别发布于1997年的6月和10月发布的DHTML，他们是未形成标准的试验性质的初级阶段的DOM，称为dom0,并不是标准。 DOM1 DOM1是W3C在1998年制定的标准，DOM1级主要定义了HTML和XML文档的底层结构。在DOM1中，DOM由两个模块组成：

『前端代码无秘密』这句话好似一个业界共识一般在前端领域传播。但在日常的开发过程中，我们又会涉及以及需要相当强度的前端核心代码的加密，特别是在于与后端的数据通信上面（包括HTTP、HTTPS请求以及WebSocket的数据交换）。 比如一个场景，在视频相关的产品中，我们通常需要增加相关的安全逻辑防止被直接盗流或是盗播。特别是对于直播来说，我们的直播视频流文件通常会被划分为分片然后通过协商的算法生成对应的URL参数并逐次请求。分片通常以5至10秒一个间隔，如果将分片URL的获取作为接口完全放置于后端，那么不仅会给后端带来极大的压力外还会带来直播播放请求的延迟，因此我们通常会将部分实现放置于前端

//获取滚动条当前的位置 function getScrollTop() { //在标准w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替; var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; }else if (

var base64String = /*base64图片串*/; //这里对base64串进行操作，去掉url头，并转换为byte var bytes = window.atob(base64String.split(',')[1]);//处理异常，将ASCII码小于0的转换为大于0，这里有两种写法 第一种： var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for(var i = 0; i 第二种： var array = []; for(var i = 0;

最基本的动态加载js程序如下： function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } 也可以添加回调函数： function loadScript(url, callback){ var script = document.createElement("script"); scri

window.onload = function () { //初始化编辑器 var toolbarOptions = [ [{ 'header': [1, 2, 3, 4, 5, 6, false] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'color': [] }, { 'background': [] }], [{ 'align': [] }], ['image'], ['clean'