![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
编码博客控
这个作者很懒,什么都没留下…
展开
-
dll预编译提高webpack打包速度
一,webpack的dll功能基于webpack3构建1.1 dll介绍我们构建前端项目的时候,往往希望第三方库(vendors)和自己写的代码可以分开打包,因为第三方库往往不需要经常打包更新。对此Webpack的文档建议用CommonsChunkPlugin来单独打包第三方库我们这里的dll.js是提前打包好了的,而不是在每次build的时候去打包输出的;这样才能做到依赖...原创 2019-10-24 20:29:00 · 276 阅读 · 0 评论 -
eslint配置文件详解
ESLint是一个Javascript静态检查工具,它可以帮你养成良好的编程习惯 { // 环境定义了预定义的全局变量。 "env": { //环境定义了预定义的全局变量。更多在官网查看 "browser": true, "node": true, "commonjs": true, "...原创 2019-10-24 20:12:07 · 1250 阅读 · 0 评论 -
webpack回顾篇
一、webpack简介1.1 版本更迭大版本变化1.2 功能进化Webpack V1编译、打包 HMR(模块热更新) 代码分割 文件处理Webpack V2Tree Shaking ES module 动态Import 新的文档Webpack V3Scope Hoisting(作用域提升) Magic Comments(配合...原创 2019-10-24 20:09:13 · 206 阅读 · 0 评论 -
webpack打包结果依赖分析
一、使用webpack-bundle-analyzer插件分析安装插件https://www.npmjs.com/package/webpack-bundle-analyzer npm install webpack-bundle-analyzer –save-dev 配置在package.json中传入环境变量ANALYZE,最后process....原创 2019-10-22 22:23:57 · 1461 阅读 · 0 评论 -
React之Fiber
一、React Fiber是什么React Fiber是对核心算法的一次重新实现。React Fiber把更新过程碎片化,把一个耗时长的任务分成很多小片,每一个小片的运行时间很短,虽然总时间依然很长,但是在每个小片执行完之后,都给其他任务一个执行的机会,这样唯一的线程就不会被独占,其他任务依然有运行的机会在React Fiber中,一次更新过程会分成多个分片完成,所以完全有可能一个更新...原创 2019-10-22 22:01:06 · 211 阅读 · 0 评论 -
React16.3新的生命周期详解
一、React v16.0前的生命周期1.1 第一个是组件初始化(initialization)阶段也就是以下代码中类的构造方法(constructor()),Test类继承了reactComponent这个基类,也就继承这个react的基类,才能有render(),生命周期等方法可以使用,这也说明为什么函数组件不能使用这些方法的原因super(props)用来调用...转载 2019-10-22 21:55:24 · 254 阅读 · 0 评论 -
面试 | 必须要会的50个React面试题
前言如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的***指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性。其中 React 被认为是增长最快的 Javascript 框架。截至今天,Github 上约有1,000名贡献者。 Virtu...原创 2019-10-22 21:27:26 · 1152 阅读 · 1 评论 -
React性能优化总结
一、重新认识renderreact的组件渲染分为初始化渲染和更新渲染在初始化渲染的时候会调用根组件下的所有组件的render方法进行渲染,如下图(绿色表示已渲染,这一层是没有问题的)但是当我们要更新某个子组件的时候,如下图的绿色组件(从根组件传递下来应用在绿色组件上的数据发生改变)我们的理想状态是只调用关键路径上组件的render但是react的...原创 2019-10-21 21:03:50 · 418 阅读 · 0 评论 -
next项目部署到服务器pm2进程守护
一、npm run export导出文件上传到CDN在项目中执行npm run export后导出outCDN文件上传到CDN // scripts/upload.jsconst fs = require('fs');const path = require('path');const OSS = require('ali-oss');const filePath...原创 2019-10-21 20:46:45 · 2703 阅读 · 0 评论 -
使用Next搭建React SSR工程架构之基础篇
一、Next.js是什么Next.js是一个基于React的一个服务端渲染简约框架。它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护1.1 Next.js带来了很多好的特性默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 以页面为基础的简洁的客户端路由 以webpack的热替换为基础的开发环境 使用React的JSX和ES...原创 2019-10-21 20:32:14 · 1320 阅读 · 0 评论 -
常用命令之wget使用记录
一、基础使用Wget主要用于下载文件,在安装软件时会经常用到,以下对wget做简单说明下载单个文件:wget http://www.baidu.com。命令会直接在当前目录下载一个index.html的文件 将下载的文件存放到指定的文件夹下,同时重命名下载的文件,利用-O:wget -O /home/index http://www.baidu.com 下载多个文件:首先,创建一个...转载 2019-10-21 20:29:05 · 213 阅读 · 0 评论 -
lodash常用API
_.chunk将数组进行切分这个函数把数组按照一定的长度分开,返回新的数组。(片段化数组) const arr = [1,2,3,4,5,6,7,8,9];_.chunk(arr,2);// =>[[1,2],[3,4],[5,6],[7,8],[9]] compact去除假值。(将所有的空值,0,NaN过滤掉) _.compact...转载 2019-10-21 20:26:39 · 2772 阅读 · 0 评论 -
Moment.js常见用法总结
Moment.js常见用法总结Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率。 日常开发中,通常会对时间进行下面这几个操作:比如获取时间,设置时间,格式化时间,比较时间等等。接下来,我将按照这些操作对Moment.js中的Doc进行整理分类,方便学习和日后的查阅。获取时间 Start of Time mome...转载 2019-10-21 20:24:29 · 173 阅读 · 0 评论 -
moment时间处理相关小结
一、基础用法取当天时间,以YYYY年MM月DD日形式显示 var now=moment().format("YYYY年MM月DD日"); 任意时间戳格式化,以YYYY-MM-DD HH:mm:ss形式显示 var t1=moment(1411641720000).format('YYYY-MM-DD HH:mm:ss'); 获取前一天日期,格...原创 2019-10-21 20:23:14 · 1184 阅读 · 0 评论 -
shell入门
一、初识shell1.1 Shell 环境Linux的Shell种类众多,常见的有/usr/bin/sh或/bin/sh /bin/bash C Shell(/usr/bin/csh) K Shell(/usr/bin/ksh) Shell for Root(/sbin/sh)Bash在日常工作中被广泛使用。同时,Bash也是大多数Linux系统默认的Sh...原创 2019-10-21 20:21:23 · 212 阅读 · 0 评论 -
Javascript中的复制粘贴功能
一、基本使用1.1 API 介绍复制、剪切、粘贴事件copy发生复制操作时触发; cut发生剪切操作时触发; paste发生粘贴操作时触发每个事件都有一个before事件对应:beforecopy、beforecut、beforepaste。这几个before一般不怎么用,所以我们把注意力放在另外三个事件就可以了触发条件鼠标右键菜单的复制、粘贴、剪切 ...原创 2019-10-21 20:17:28 · 958 阅读 · 0 评论 -
JavaScript运行机制Event Loop
一、JavaScript是单线程JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事 假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变 为了利用多核CPU的计算能力,HT...原创 2019-10-21 19:50:06 · 104 阅读 · 0 评论 -
ES6系列之Async/await
一、含义async函数是什么?一句话,它就是Generator函数的语法糖 // 有一个 Generator 函数,依次读取两个文件const fs = require('fs');const readFile = function (fileName) { return new Promise(function (resolve, reject) { ...转载 2019-10-20 21:13:17 · 168 阅读 · 0 评论 -
ES6系列之Generator
一、什么是Generator 函数1.1 语法学习Generator语法,你需要了解function*、yield、next三个基本概念。function*用来声明一个函数是生成器函数,它比普通的函数声明多了一个*,*的位置比较随意可以挨着function关键字,也可以挨着函数名 yield产出的意思,这个关键字只能出现在生成器函数体内,但是生成器中也可以没有yie...原创 2019-10-20 21:09:56 · 89 阅读 · 0 评论 -
ES6系列之Symbol
一、简介ES6新加入了一种原始数据类型Symbol,表示独一无二的值,这是js的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的Symbol类型。凡是属性名属于Symbol类型,就都是独一无二的,可以保证不会与其他属...原创 2019-10-20 21:02:31 · 174 阅读 · 0 评论 -
ES6系列之装饰器
一、简介装饰器依赖于ES5的Object.defineProperty方法1.1 Object.definePropertyObject.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象 该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...in或Ob...原创 2019-10-18 21:12:00 · 402 阅读 · 0 评论 -
ES6系列之Reflect
一、简介1.1 什么是Reflect为操作对象而提供的新API1.2 为什么要设计Reflect将Object对象的属于语言内部的方法放到Reflect对象上,即从Reflect对象上拿Object对象内部方法 将用老Object方法报错的情况,改为返回false // 旧写法try { Object.defineProperty(target, proper...原创 2019-10-18 21:10:01 · 198 阅读 · 0 评论 -
ES6系列之代理
一,代理概述代理的兼容性proxy在目标对象的外层建造了一层拦截,外部对目标对象的某些操作,必须通过这层拦截 var proxy = new Proxy(目标,处理程序); new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,使用定制拦截行为 var target = ...原创 2019-10-18 20:59:35 · 191 阅读 · 0 评论 -
Object.defineProperty详解
一、简介兼容性在ie8下只能在DOM对象上使用,尝试在原生的对象使用Object.defineProperty()会报错。定义对象可以使用构造函数或字面量的形式 var obj = new Object; //obj = {}obj.name = "张三"; //添加描述obj.say = function(){}; //添加行为 除了以上添...原创 2019-10-18 20:44:18 · 233 阅读 · 0 评论 -
nodejs系列之express
一、概述官网http://expressjs.com/zh-cn/Express是目前最流行的基于Node.js的Web开发框架,可以快速地搭建一个完整功能的网站环境搭建http://www.expressjs.com.cn/starter/generator.html通过应用生成器工具express-generator可以快速创建一个应用的骨架 ...原创 2019-10-18 20:42:39 · 885 阅读 · 0 评论 -
nodejs系列之Koa2
一、基本用法Koa 就是一种简单好用的 Web 框架。它的特点是优雅、简洁、表达力强、自由度高1.1 架设 HTTP 服务只要三行代码,就可以用Koa架设一个HTTP服务。 const Koa = require('koa');const app = new Koa();app.listen(3000); 打开浏览器,访问http://...原创 2019-10-18 20:40:52 · 350 阅读 · 0 评论 -
JavaScript原型链回顾
一、JS内置对象所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用。例如ArrayString等等。JavaScript一共有12内置对象函数类型(10个)String Number Boolean Array Function Date RegExp Error Object Event函数类型 有__proto__和p...原创 2019-10-18 16:55:00 · 92 阅读 · 0 评论 -
JavaScript深浅拷贝
一、前言在js中,变量的类型可以大致分成两种:基本数据类型和引用数据类型,其中基本数据类型指的是简单的数据段,包括:undefined Null Boolean Number String(字符串在一些其他语言中是被当做对象使用的,属于引用类型,但在js里是基本类型)而引用类型的值指的是可能包含多个值的对象。本质上,是因为基本数据类型保存在栈内存,而引用类型保存在堆内存中。...原创 2019-10-18 16:48:55 · 125 阅读 · 0 评论 -
JavaScript防抖节流原理
一、防抖debounce你是否在日常开发中遇到一个问题,在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作这些需求都可以通过函数防抖动来实现。如果在频繁的事件回调中做复杂计算,很有可能导致页面卡顿,不如将多次计算合并为一次计算,只在一个精确点做操作防抖和节流的作用都是防止函数多次调用。区别在于,假设一个用户一直触发这个函数,且每次触发函数的间隔小于wait,防抖的情况下只会调...原创 2019-10-18 16:44:03 · 114 阅读 · 0 评论 -
web前端进阶篇(二) 浏览器 Webpack
一、浏览器1 cookie和localSrorage、session、indexDB 的区别从上表可以看到,cookie 已经不建议用于存储。如果没有大量数据存储需求的话,可以使用 localStorage和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储,否则可以用 sessionStorage 存储。对于 cookie,我们还需要注意安...原创 2019-10-17 19:54:51 · 463 阅读 · 0 评论 -
web前端进阶篇(一 )JS
1谈谈变量提升当执行JS代码时,会生成执行环境,只要代码不是写在函数中的,就是在堆栈执行环境中,函数中的代码会产生函数执行环境,仅此两种执行环境。b() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b')}想必高于上述的输出大家肯定都...原创 2019-10-17 19:17:56 · 155 阅读 · 0 评论 -
Java Web前端到后台常用框架
一、SpringMVChttp://blog.csdn.net/evankaka/article/details/45501811Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架,即使用了MVC架构模式的思想,将web层进行职责解耦,基于请求驱动指的就是使用请求-响应模型,框架的目的就是帮助我们简化开发,Spring Web MVC也...转载 2019-10-17 17:25:01 · 109 阅读 · 0 评论 -
JavaScript运行机制Event Loop
一、JavaScript是单线程JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变为了利用多核CPU的计算能力,HTML5...原创 2019-10-16 17:26:41 · 100 阅读 · 0 评论 -
大型网站技术架构(3):WEB 前端性能优化
上次说到了性能优化策略,根据网站的分层架构,可以大致的分为 web 前端性能优化,应用服务器性能优化,存储服务器性能优化三大类这次来说一下 web 前端性能优化,一般来说,web 前端就是应用服务器处理之前的部分,包括浏览器渲染、加载,前端视图模型,图片视频资源,CDN 服务等,主要优化方法就是优化浏览器访问渲染过程,使用反向代理,使用 CDN 服务等浏览器访问渲染优化减少 http 请求数...转载 2019-10-15 16:51:52 · 130 阅读 · 0 评论 -
大型网站技术架构(2):架构要素和高性能架构
上一篇我们把整个架构演变过程大致说了一下,这次我们来说说从哪方面进行考虑设计为了使网站的能够应对高并发访问,海量数据处理,高可靠运行等一系列问题,我们可以选择横向或纵向两个方向来入手基本思路首先可以对整个架构进行分层,一般可以分为 应用层,服务层,数据层;实践中,大的分层结构中还可以继续分层,比如 应用层 还可以继续分为 视图层 和 业务逻辑层,服务层也可以继续细分为 数据接口层 逻辑处理层...转载 2019-10-15 16:46:45 · 149 阅读 · 0 评论 -
大型网站技术架构(1)
网站都是从小网站一步一步发展为大型网站的,而这之中的挑战主要来自于庞大的用户、安全环境恶劣、高并发的访问和海量的数据,任何简单的业务处理,一旦需要处理数以 P 计的数据和面对数以亿计的用户时,问题就会变的很棘手下面我们就来说说这个演变过程:初始阶段大型网站都是由小型网站演变而来的,网站架构也一样小型网站最开始没有太多人访问,只需要一台服务器就绰绰有余,就像这样:应用程序、数据库、文件等...转载 2019-10-15 16:39:33 · 133 阅读 · 0 评论 -
jQuery自定义数字滚动效果
每日分享效果时间到,今日分享:jQuery自定义数字滚动效果效果图:一、html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,...转载 2019-10-12 22:24:59 · 395 阅读 · 1 评论 -
前端面试那些坑
HTMLDoctype作用?严格模式与混杂模式如何区分?它们有何意义?HTML5 为什么只需要写 ?行内元素有哪些?块级元素有哪些? 空(void)元素有那些?页面导入样式时,使用link和@import有什么区别?介绍一下你对浏览器内核的理解?常见的浏览器内核有哪些?html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5...转载 2019-10-12 21:48:46 · 203 阅读 · 0 评论 -
如何从请求、传输、渲染3个方面提升Web前端性能
什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:输入网址 –> 解析域名 -> 请求页面 -> 解析页面并发送页面中的资源请求 -> 渲染资源 -> 输出页面 -> 监听用户操作 -> 重新渲染。通过上面的路径可以看出浏览器分为请求、传输、渲染三部分来实现用户的访问,本文就从这三个部分来浅析如何提升...原创 2019-10-11 21:30:15 · 90 阅读 · 0 评论 -
关于Vue中:key="index"的console警告
在写vue项目时,浏览器的console出现如下警告信息:[Vue warn]: Property or method "index" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, ...原创 2019-10-11 21:19:19 · 811 阅读 · 0 评论