yuyongkun4519的博客

原创 【无标题】Vue长列表性能优化常用方案

长列表性能问题发生的原因？众所周知HTML页面中DOM的修改会引起页面的重新渲染，重新渲染包含DOM节点的重排和重绘（重排和重绘的知识点可以自行百度），如果页面中大量的DOM节点发生重绘，页面就会出现性能问题。如何解决出现的性能问题？1，最常见的方式是分页加载，切片分段加载。分页加载大家都知道，不再赘述。下面我们看看切片分段加载。实现原理：requestAnimationFrame + ceateDocumentFragment假如有10000条数据要渲染展示，我们用代码实现如下：

原创 浏览器缓存机制

一，什么是浏览器缓存机制？浏览器缓存机制说的就是HTTP缓存机制，其机制是根据HTTP请求报文中的缓存规则确定的。所以要想搞清楚HTTP缓存机制首先要弄清楚缓存机制的缓存规则是什么。二，什么是浏览器缓存规则？有经验的前端同学都知道浏览器缓存，浏览器缓存分为强缓存和协商缓存。1，什么是强缓存？看下面这张图该请求中Size为memory cache和disk cache的请求走的都是强缓存路线，什么情况下浏览器会走强缓存路线呢？浏览器第一次请求时，服务器返回给浏览器的报文中有Ca

原创 HTTP缓存原理一探究竟

为了提高网站的访问速度，我们经常会在web服务器端进行缓存设置，常用的缓存设置方式是强缓存、协商缓存，那么两者有什么区别呢？一，强缓存cache-control：max-age：缓存有效期public：客户端和代理服务器都可以缓存资源private：只允许客户端缓存资源immutable：永不过期no-cache：资源不进行强缓存，走策略缓存no-store：客户端...........................

原创 ES6 Module与CommonJS模块有何区别？

1，模块依赖解决方式不同es6 module与commonjs最本质的区别是两者对模块依赖的解决方式，es6 module是静态的而commonjs是动态的，es6在编译阶段既确定了模块依赖关系及模块导入导出的变量，而commonjs只有在运行阶段才能确定这些。2，变量导出方式不同在导入一个模块变量的时候es6 module导出的是变量的动态映射，既在当前模块改变变量会影响导出模块变量，在导...

原创 Vue模板语法template VS Vue渲染函数render

一，vue模板语法（template）一个template模板，从vue实例化到展示到页面上，会经过怎样的过程呢，我们来分析一下。如下示例:new Vue({ el:'#app', template:'<h3>hello world</h3>'})就离不开vue模板语法解释器vue-template-compiler，vue-templa...

原创 JavaScript中onmouseenter、onmouseleave和onmouseover、onmouseout的区别

实例1：只有一个元素，没有子元素实例2：如果鼠标从上到下经过全部dom元素结果统计：实例1中【onmouseenter、onmouseleave】、【onmouseover、onmouseout】事件各触发1次事件处理程序。实例2中【onmouseenter、onmouseleave】事件触发1次事件处理程序，【onmouseover、onmouseout】事件会触发10次事件...

原创 CSS中clientHeight、offsetHeight、scrollHeight、scrollTop、scrollTo几者的区别和关联

示例:对应css为.div { width:300px; height: 200px; margin: auto; padding:10px; border: 5px solid #000; font-size: 12px; overflow-y: auto; background-color: #FFEB3...

原创 RESTful和GraphQL的比较

对于前后端分离的项目，后端通常把数据接口定义成RESTful API或者GraphQL，那么两者有什么不同呢？一，RESTful API：RESTful API常见的请求方式有get：查询数据；post：添加数据；put：更新数据；delete：删除数据不足：扩展性不足一个接口有可能因为需求变更而变的越来越臃肿，比如获得用户信息的接口/user/userid，刚开始可能只...

原创 CSS盒模型与box-sizing详解

对于刚入门的前端小伙伴，对box-sizing、css盒子模型可能会有疑惑，今天我带领大家彻底搞清楚这两个东东。要想搞清楚box-sizing和CSS盒子模型，首先要理解这两者各有什么作用。box-sizing：允许您以特定方式定义匹配某个区域的特定元素（官方）。官方定义中有两个关键词‘特定方式’、‘特定元素’，什么特定方式呢？其实就是box-sizing对应的两个属性值，border...

原创 JavaScript中for...in,Object.keys,Object.getOwnpropertyNames获得数组或者对象的key，value有什么不同

一、遍历非Array对象1、for...in主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性。var obj = {"name":"jack","sex":"male"}；Object.defineProperty(obj, "age", {value:"24", enumerable:false});//增加不可枚举的属性ageObject.prototype....

转载 使用nginx处理静态资源请求，动态内容交给Node.js进行处理

由于项目后台使用的是node，然而node不适合对静态资源的处理，因为他的异步处理（事件轮询）机制，所以更擅长的是密集I/O型的应用，所以我就有了一个想法，使用nginx来做反向代理，当请求的是静态资源的时候，直接由nginx（监听80端口）自己处理并返回，其他非静态资源请求转发至node(8080端口)，由node来处理。下面是我的nginx配置文档，nginx安装请自行百度，大把资料啦~...

原创 Vue关于双向绑定和单向数据流的理解

很多接触Vue开发不久的同学会有疑问，vue既然是单向数据流为什么会有双向绑定一说？关于Vue数据绑定首先引用官网原话：AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。官网已经说的很清楚了，在Vue中使用的是单向数据流，我们由此可以确定，Vue中的所谓的双向绑定并不是真正的双向绑定。要想理解Vue中的所谓双向绑定首先要先弄清...

原创 nodejs运行原理

最近在学习nodejs，对nodejs的原理做了以下总结：nodejs是什么？可以把nodejs理解成是一个运行在服务端的基于chrome v8 engine的js运行环境。nodejs优势？由于nodejs使用的是事件驱动，非阻塞的I/O模型，因此nodejs执行效率非常高。nodejs缺点？nodejs对I/O的处理非常高效，但是对cpu密集型应用，会导致主线程阻塞，阻...

原创 ES6 数组Array.of、Array.from

,false,'hello')和var arr=Array.of(4,false,'hello')没有任何区别但是如果参数是这样var arr=new Array(4)则返回的是一个长度是4的空数组而var arr=Array.of(4)返回的是含有元素4的数组不同之处：可以看到当new Array时，如果传入的是唯一的一个数字，如果只是用来定义数组的长度没有问题，如果定义的是数组的元素，则可以用Array.of代替2，

原创 JavaScript基础

复杂数据类型包括：Object1.3，如何区分JavaScript中的数据类型呢？由于JavaScript是松散类型的，因此需要一种方式来检测给定变量的数据类型，typeof就是JavaScript提供的检测数据类型的操作符。 var data=100typeof data ==="number"var data="hello JavaScript";typeof data==='string' //truevar data=tr

原创 vue声明周期

原创 Vue生命周期 VS React生命周期

orcomponentWillMountrendercomponentDidMount shouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate 如图：     二者对比文章搜集：React.js与Vue.js：流行框架的比较https://baijiahao.baidu.com/s?id=1608099200125495014&amp;wfr=spid

原创 JavaScript 对象属性

能否把属性修改为访问器属性，该属性默认值是true。2，Enumerable定义了能否通过for...in遍历对象属性，该属性默认值时true。3，Writable定义了能否修改对象的属性4，Value定义了属性的数据值，默认为undefined 创建一个对象：var school={name:"北大"};我们要修改属性默认的特性，必须使用ECMAScript5的Object.defineproperty方法。 操作1：修改conf

原创 JavaScript闭包

的变量，反之则不行。2，作用域链当函数第一次执行的时候，会创建一个执行环境及相应的作用域链，并把作用域链赋值给一个特殊的内部属性Scope。Scope里面既包含当前环境的活动对象又包含父作用域里面的活动对象，活动对象有this,arguments和其它命名参数构成，在浏览器中最顶层作用域中的this对象是window。 正常情况下一个函数执行完成里面的活动对象会被垃圾回收机制自动回收，有一种情况例外，就是今天我们要说的闭包。 什么叫闭包？闭包是指有权访问另一个函数作用域中变量的函

浏览器中进程与线程

览器主进程只有一个，作用有：负责浏览器界面显示，用户交互（前进、后退，关闭等）负责各个页面的管理，如创建和销毁其它进程将Render进程中得到的内存中的bitmap，绘制到用户界面上网络资源的管理，如下载2，GPU进程用于3d绘制等，如为dom元素添加css3样式-webkit-transform:translateZ(0)，将使浏览器的渲染从cup转向gpu，开启gpu加速。3，浏览器渲染进程（Render进程）也被称为浏览器内核。浏览器渲染进程的主要作用是页面渲染

原创 浏览器中进程与线程

一，首先使用快捷键Shift+Esc打开浏览器Chrome任务管理器，看到如下图界面：可以看到浏览器默认有三个进程：1，浏览器主进程（Browser进程）浏览器主进程只有一个，作用有：负责浏览器界面显示，用户交互（前进、后退，关闭等） 负责各个页面的管理，如创建和销毁其它进程 将Render进程中得到的内存中的bitmap，绘制到用户界面上 网络资源的管理，如下载2，G...

原创 Express中如何使用async/await

随着Node.js v7.6.0版本开始支持async/await，在服务器端进行Node.js编程也终于有了最佳的异步解决方案。只要你Node.js安装的是v7.6.x以上版本，都是支持async/await语法的。所以只要你安装的是Node.js新版本，在Express程序里面是可以直接使用async/await方法的。参考下面实例：const express = re...

原创 Css3之Flex弹性盒子布局

一，基本概念：采用Flex布局的元素，称为Flex容器（flex container），所有Flex容器子元素自动成为Flex容器成员，也可以称作Flex项目（flex item）。下面是结构示意图：从上图可以看到Flex容器有两条轴，分别是水平方向主轴（main axis）和垂直方向交叉轴（cross axis）。main start | main end：主轴开始|结束位置cross start | cross end：交叉轴开始|结束位置main siz

原创 linux下建立git仓库

原创 Express中异常处理

原创 Express中如何使用async/await

async/await语法的。所以只要你安装的是Node.js新版本，在Express程序里面是可以直接使用async/await方法的。 参考下面实例： const express = require('express');const app = express();const fs = require('fs');function readFileAsync(filepath) { return new Promise(function (resolve, rejec

原创 vue双向绑定原理解析

原创 GIt部署到linux服务器

git一键部署代码到远程服务器（linux）（采坑总结） 一. 代码部署方式及思路： 1. 使用FTP/SFTP工具，上传代码 2. git人工部署。1. 开发人员本地 - git push -&gt; github/gitee 2. 使用ssh终端登录服务器 git pull -&gt; 服务器 3. git自动化部署。开发人员本地 -git push -&gt...

原创 常见轮播图

端开发中基本上每个项目都会用到轮播图，今天我们就对常见轮播图的实现原理好好分析一下。1，普通的渐隐渐现式轮播图 html部分：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;轮播图&amp

原创 JavaScript中常见继承方式

JavaScript作为弱类型语言，继承也是其强大的特性之一，那么如何在JavaScript中实现继承呢？ 1，原型链继承 下面是最简单的原型链继承写法，代码如下：Father.prototype={ getName:function(){ return '我的名字是：'+this.name; }};function Fathe...

原创 前后端连载启动

on server.js","dev":"concurrently \"npm run server\" \"npm run client\""

原创 Node.js版本管理工具nvm

nvm是什么？nvm允许你在同一台机器上安装不同版本的nodejs，是nodejs的版本管理工具。linux系统的github地址：点击链接如果是windows系统windows-nvm的github地址 点击链接windows-nvm的下载地址 点击链接 安装（windows为例）： 1，选择nvm安装路径 2，选择nodejs安装路径  3，安装...

原创 字符编码的发展历史

概括一番。一个字节：最初一个字节的标准是混乱的，出现过4位、6位、7位的一字节标准，最终由于历史原因和物理存储需求(8位是2的3次方，方便物理存储)，所以采用了8位为一个字节的标准。ASCII：定下了8位为一个字节后，那么一个字节可以表示的状态就有256种(2^8)，对应0-255号。接下来就需要考虑8位如何表示一个字符了，ASCII码顾名思义(American Standard Code for Information Interchange)就是美国的信息交换标准码，因此只需要表示出英文字母和少

原创 Git使用总结

-----------------------------------Git学习笔记----------------------------------- 1，使用git有三个概念必须理解：工作区、暂存区、版本库工作区：就是我们电脑上看到的目录版本库：工作区有一个隐藏的目录.git,这个就是git的版本库，版本库中有很多东西，包括stage（暂存区），还有git为我们...

原创 Mongoose快速入门

Mongoose快速入门1.基础介绍1.1安装 引用启动数据库命令mongod --dbpath=D:\Data\mongodb\_data –dbpath：指定数据存储位置连接本地的test数据库 var mongoose =require('mongoose');var db = mongoose.connect("mongodb://127.0.0...

原创 nodejs中间件之body-parser

原创 CommonJS规范中module.exports和exports的区别

刚开始接触nodejs的同学对module.exports和exports的使用会有困惑，到底该使用哪一个，还是两个都可以使用，要理解二者的区别，应该先理解nodejs中require的加载机制。// 准备module对象:var module = { id: 'hello', exports: {}};var load = function (mod...

原创 ES6 扩展运算符

扩展运算符用3个点表示,功能是把数组或者类数组对象展开成一系列用逗号隔开的值 1，数组let arr = ['red', 'green', 'blue'];console.log(...arr);//red,green,blue 拷贝数组(和Object.assign一样都是浅拷贝) let arr = ['red', 'green','blue']; let ar...

原创 ES6 解构赋值

es6新增语句-结构赋值 1，传统的赋值语句let a=['red','green','blue'];console.log(a[0],a[1],a[2]); 2，使用结构赋值语句let [a,b,c]=['red','green','blue'];console.log(a,b,c); 使用结构赋值好处1：语法上更加简洁 3，如果右边数据比左边...

原创 ES6 能否使用Object.assign实现深浅拷贝

 Object.assign方法是浅拷贝还是深拷贝?1,普通变量let obj={name:"zhangsan",colors:["red", "green", "blue"]};let obj2=Object.assign({},obj);obj2.name='wang';console.log(obj2);//name wang colors:["red", "gr.