优快云前端知识共享

查找当前页面滚动的元素

一、基础线程// 以下操作会创建7个线程setInterval(()=>{ console.log('sleep')}, 5000)通过所谓的 node 单进程，是指Javascript的执行是单线程的，JS的宿主环境，无论是 node 还是浏览器都是多线程的。主线程：编译、执行代码编译/优化线程：在主线程执行时，优化代码分析器线程：记录分析代码运行时间，为优化代码提供依据其余是垃圾回收线程二、异步IO操作，额外占用4个线程node 中的一些 IO操作(DNS,FS

一、起因之前内网部分服务不稳定，请求偶尔会挂掉，需要频繁重启。本着实事求是的思想，决定排查并解决这个顽疾。二、日志分析通过登录机器查找日志发现具体的错误信息，“JavaScript heap out of memory”，可以看出是由于内存不足导致的服务异常。三、内存溢出分析1.分析通过执行top指令，发现该进程([TSW/worker/0]) CPU占有率和 memery 占比一直居高不下。可以发现一些问题:内存占用暴涨，大约600MCPU占用率极高猜测: 可能是 kube

在h5页面上，如果想要让页面禁止滚动。一般通过给 body 元素 overflow:hidden;进行设置。但是，在部分安卓机上，上述操作并不会生效。因此，我们通过 fixed 布局来解决这个问题。当我们想要禁止页面滚动时，设置下面的属性，即可生效:// 设置 fixed 布局document.body.style.position = 'fixed';document.body.style.height = '100%';document.body.style.width = '100%.

什么是面向对象(Object Oriented)面向对象是一种程序设计思想。其中，对象是最小的程序单元，包含有属性(props)和方法(methods)。类和实例面向对象编程，其实目的就是为了降低代码耦合性。其中，有两个重要的概念: 类(class)、实例(instance)。class: 是实例的抽象，是从实例中提取出公共的属性和方法的集合。instance: 是类的具象化，...

engine.io 原理详解最近，业务中有使用到 socket.io，进行客户端与服务端的实时通信。socket.io提供的API易上手，对新手友好，这就极大提高了开发者的效率。不过，期间也有遇到很多socket.io中的坑，例如，中文乱码问题，服务端NPE问题 等。有些涉及到底层的问题，就势必要理解socket.io设计原理，进行排查。所以，总结了一下相关的概念，方便今后更快定位问题。s...

socket.io 原理详解在上一篇文章中，我们了解到 socket.io 是 基于engine.io 进行封装的库。所以对engine.io不清楚的童鞋可以点击进行了解: engine.io 详解1.概述socket.io 是基于 Websocket 的Client-Server 实时通信库。socket.io 底层使用engine.io 封装了一层协议。两者的依赖关系可参考:...

MVVM 框架设计MVVM 框架已经成为前端圈的主流，同时也诞生了很多优秀的前端框架，有最早的Angular，以及后起之秀Vue、React等，为我们开发者提供了极大的便利。那么，什么样的框架设计才算是MVVM框架呢？MVVM框架的前身最早使用Java开发的程序员应该了解过，当时有一种JSP动态脚本语言，是以JAVA语言作为载体，由服务端直出HTML网页的一种技术。下面是JSP的编写格式...

谈谈浏览器的缓存机制概述缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。在开发过程中随处可见，小到Javasript作用域内的变量存储，大到使用CDN使静态资源的分布存储到缓存服务器上等。缓存的简单解释就是将我们的计算结果储存，当下一次计算时，可以将保存的结果值快速返回。(类似于CPU寄存器)什么是浏览器缓存浏览器缓存（Browser Caching）是为了节约网络的资源加...

问题在执行webpack构建过程中，出现 DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead emit告警问题。分析原因这是因为使用的webpack插件中，使用了旧的API导致的。而官方文档最新提供的API如下:官方文档参考源码...

冒泡算法“冒泡”的由来按照气泡在水中上浮的顺序进行模拟的一种算法，一般较大的气泡上浮越快，较小的气泡则在其后。核心思路：在数组遍历时，当遇到较大的数值时，将较大的数往后交换，直至本轮比较结束。然后进行下一趟比较。时间复杂度 O(n^2)遍历一趟需要的时间复杂度为 O(n),一共需要进行 n-1.因此，总的时间复杂度为 O(n^2).源码实现:let arr = [20, 40,...

快速排序核心思想: 选取一个基数，保证左边的数都小于这个基数，右边的数都大于这个基数。然后递归执行上述步骤时间复杂度 O(nlgn~n^2)最好情况O(nlgn):在数组中，每次选取的基数都恰好是最数组的 n/2 的位置。如下图:递归的总次数就等于二叉树的层数( k )每一层的节点数等于 2^(k-1)二叉树的总节点数等于: Sn=1+2+4+...+2^(k-1)...

ES5: reduce 你不知道的黑科技简介reduce 相当于一个累加器的概念,通过遍历数组，获取上一个值与当前值，通过回调函数处理，返回一个新值。而该值将会当做下一次执行的prev返回。语法MDN 文档定义arr.reduce(function(prev,cur,index,originArray){ ...},initValue)其中，initValue ： 指首次...

Vue 生命周期详解注意!!! 本文是以 vue v2.6 版本进行讲解。 源码地址前言在学习 Vue 的时候，应该或多或少了解过它的生命周期图示。基本可以归纳为四个阶段created 【初始化创建阶段】 (beforeCreate、created)mounted 【挂载渲染阶段】(beforeMount、mounted)update 【数据更新阶段】（beforeUpda...

问题如何解决webpack Invalid Host/Origin header问题问题描述webpack相关版本package.json "html-webpack-plugin": "^3.2.0", "webpack": "^4.28.2", "webpack-cli": "^3.1.2", "webpack-dev-server&q

Javascript 常见继承方式对比借用构造函数/** * call 构造函数继承 * 优点: 可以使用父类的属性 * 缺点: 无法调用父类方法*/function Parent (name, age) { this.name = name this.age = age}Parent.prototype.sayName = function () { conso...

XHR(XMLHttpRequest) 实践简介 XMLHttpRequest(通常缩写XHR) 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。 Fetch API 提供了一个获...

前言JS封装了一套常用的类型检测工具库，可以判断常见的dom对象，String以及Function对象。工具库特点通过ES6语法进行导入导出，方便使用。按需加载，只需要加载使用到的函数类型检测基本全覆盖不断进行扩充项目结构|– root (项目根目录) —| is.js (类型检测库) —| other.js (业务代码)业务代码is.js...

Vue 的核心是允许是模板语法来声明式的将数据渲染进DOM系统修改dom样式的思路，无非就是两步：获取dom修改样式一、 vm.$el 修改dom样式获取dom节点根节点,即被挂载的dom<div id="app">{{info}}</div>创建一个vue 实例let app = new Vue({ e...

Vue 获取鼠标位置坐标在Vue项目中，我们可能有获取鼠标信息的需求来处理业务逻辑。介绍下面，我们将通过介绍touch事件，来获取鼠标位置。 事件名 功能 touchstart 鼠标点击时，触发该事件一次。 touchmove 当鼠标移动时，会多次调用该事件。 touchend 当鼠标停止移动时，触发该事件一次。templ...

3. Vue 限制input输入 小数点后两位number首先介绍一些input(表单元素)常见的type type 类型说明 text - button - number 过滤非数值类型的值 tel 用于输入电话号码的控件 file -实现效果仅输入数值类型的控件// 禁止输入非数值类...

Promise语法 new Promise((resolve,reject) => {...}) Promise对象表示一个异步操作的最终状态(完成或失败)。为什么需要Promise Promise是为了解决异步函数多重嵌套的问题(回调地狱)。什么是回调地狱参数 一个回调函数，其中包含了两个参数，resolve,reject。...

1.JS Module Systems概述随着JS使用越来越普及，导致namespace以及depedencies变得难以维护。因此，为了解决这类问题就开发处理不同的模块系统。JS Modules的必要性如果有其他平台开发的经验，那么可能对封装和依赖比较容易理解。 在项目中引入一个新的代码块的话，那就要求新加入的代码块不会影响到原有项目的正常运行。 例如，在C...

Json解析器初衷编写Json解析器目的是为了拓展自己的知识广度，并且通过简单的手写实践，能够深入了解一些技术细节(AST、DFA&NFA、LL(1)文法)，以及便于理解目前主流的前端框架设计。 那么就通过Json，切入正题JsonJson一共定义了四种数据类型：数值类型、字符串类型、数组、对象。其中，前两者可以归纳为基本类型，后两个可以归纳为复合类型。 不过，...

2.Js实现Json解析器前言 本文主要对Json解析器的实现进行探讨。 如果想深入了解其原理，可以参考上一篇文章：模板引擎：一、理解Json解析器工作原理项目github地址：https://github.com/yang657850144/parseJson案例说明例如：拿一段最简单的Json字符串举例(“{ “a”: 1 }”)，要将其解析为JSON对...