- 博客(64)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 前端项目(React)接入eslint静态代码检查及一些问题解决方案
Using this.refs is deprecatedUsing string literals in ref attributes is deprecated‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used解决方案eslint安装配置初始化检验代码
2021-03-29 10:19:58
4206
15
原创 移动端1px实现和问题踩坑
效果要实现移动端上的一像素线，window.devicePixelRatio=物理像素 /CSS像素目前主流的屏幕DPR=2或者3。拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2，所以css 像素只能是 0.5。一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写css样式是以设备375为参照的，所以我们应该写的0.5px先看看效果：Chrome浏览器PCChrome浏览器移动端IE浏览器下，显示问题实现代码<div class="wrap"
2021-03-19 13:35:44
903
8
原创 React-setState执行过程(为什么不会同步更新组件)
setState 不会立刻改变React组件中state的值.- setState 通过触发一次组件的更新来引发“重绘”.- 多次 setState 函数调用产生的效果会合并。一、setState 为什么不会同步更新组件？二、setState执行过程,流程图分场景讨论1.钩子函数和合成事件中2.异步函数和原生事件中3.componentDidMount调用setstate4.componentWillUpdate componentDidUpdate5.事件处理类型6.传入的是函数
2021-03-31 21:10:10
1642
1
原创 React合成事件(阻止冒泡stopImmediatePropagation)
- React组件类似onClick的事件是合成事件，本质上所有绑定是代理到document上的，所有绑定都会冒泡到document层去执行二、React 合成事件1.执行顺序2.合成事件阻止冒泡2.1e.stopPropagation2.2 e.nativeEvent.stopImmediatePropagation3.this指向问题解决4.传参5. 事件池（React 17 不再使用事件池）
2021-03-31 14:21:10
3608
3
原创 webpack5做了哪些优化(新特性)
- 构建速度优化- 代码体积优化- 持久化缓存优化- Module Federation一、构建速度优化二、包代码体积的优化1.代码分割splitchunk2.Tree Shaking3.剔除npm包里面针对Node.js模块自动引用的Polyfills三、持久化缓存的优化四、模板联邦
2021-03-30 21:42:39
2936
4
原创 webpack-loader机制以及模拟实现
Loader(加载器) 是 webpack 的核心之一。它用于将不同类型的文件转换为 webpack 可识别的模块。loader和plugin区别链式调用多个loader模拟loader实现模拟一模拟二
2021-03-30 20:35:05
3172
15
原创 webpack核心概念和构建流程(附图)
文章目录一、核心概念EntryOutputModuleChunkLoaderPlugin二、构建流程一、核心概念Entry入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。Outputoutput 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为
2021-03-30 20:01:38
745
2
原创 前端模块化(CommonJS、AMD、CMD、ES6模块化区别)
什么是模块模块化的进化过程全局function模式 : 将不同的功能封装成不同的全局函数namespace模式 : 简单对象封装2.3IIFE模式：匿名函数自调用(闭包)2.4IIFE模式增强 : 引入依赖3.模块化的好处4.引入多个script后出现出现问题二、模块化规范1.CommonJS1.1基本语法1.2模块的加载机制2.AMD2.1基本语法2.2模块的加载机制3.CMD3.1基本语法3.2模块的加载机制4.ES6模块化ES6 模块与 CommonJS 模块的差
2021-03-30 16:26:18
1849
4
原创 JavaScript内存相关知识(内存泄露、垃圾回收机制)
一、内存二、生命周期三、内存泄漏四、内存回收(垃圾回收)机制1.引用计数垃圾收集2.标记-清除算法五、JavaScript的内存分配六、内存泄漏场景1.意外的全局变量2.被遗忘的计时器3.被遗忘的事件监听器4.被遗忘的Set5.其他六、泄漏定位
2021-03-29 19:48:46
475
6
原创 前端性能优化-优化大量图片加载&超大图片加载(附懒加载实现方案)
懒加载实现方案一.大量图片加载优化方案1.将图片服务和应用服务分离(从架构师的角度思考)2. 图片压缩方案3.图片懒加载实现方案一实现方案二4.小图片比较多时5.http2解决连接数限制二、图片过大加载优化方案
2021-03-29 00:38:32
19578
11
原创 前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)
从输入url，到页面的画面展示的过程一、白屏时间二、白屏时间的重要性三、白屏的过程四、白屏-性能优化1. DNS解析优化2. TCP网络链路优化3. 服务端处理优化4. 浏览器下载、解析、渲染页面优化内联关键CSS
2021-03-28 23:48:27
4678
2
原创 HTML基础-标签分类(闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素)
闭合标签，空标签，块级元素，行内元素，行级块元素，可替换元素元素之间的转化- display:block；(将元素变为块级元素)- display:inline； (将元素变为行级元素)- display：inline-block；（将元素变为行级块元素）
2021-03-28 17:18:57
6690
25
原创 JS基础-事件模型(事件&事件流&自定义事件&事件冒泡/代理)
事件与事件流事件模型DOM0级模型IE事件模型DOM2级模型DOM3级事件处理方式事件对象事件绑定与解除事件绑定对象.on事件名字=事件处理函数对象.addEventListener("没有on的事件名字",事件处理函数,false)对象.attachEvent("有on的事件名字",事件处理函数);Event Wrapper自定义事件JQuery Event模型JS事件模型-观察者模式代码例子(通用事件绑定&事件冒泡&代理)1. 通用事件绑定2.事件冒泡3.代理
2021-03-28 16:41:13
2668
11
原创 前端基础-浏览器缓存/HTTP缓存机制(面试常考)
浏览器缓存/HTTP缓存机制(面试常考)HTTP报文HTTP请求(Request)报文HTTP响应(Response)报文缓存过程分析缓存规则1.强制缓存1.1Expires1.2 Cache-Control2. 缓存存储3.协商缓存3.1 Last-Modified / If-Modified-Since3.2 Etag / If-None-Match四、不同刷新的请求执行过程强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存
2021-03-28 15:33:35
19296
13
原创 前端面试系列-输入url后全过程&&页面渲染机制&&DOM生成过程
一、当输入url后，全过程浏览器缓存(DNS解析)，解析获取相应的IP地址。cp连接，三次握手。浏览器向服务器发送http请求，请求数据包。将数据返回至浏览器浏览器收到HTTP响应读取页面内容，浏览器渲染，解析html源码生成Dom树、解析css样式、js交互二、页面渲染机制三、DOM1.什么是 DOM2.DOM 树如何生成HTML 解析器3.JavaScript 是如何影响 DOM 生成的内嵌JavaScript引入 JavaScript 文件引入css文件
2021-03-27 16:04:13
1593
6
原创 前端面试系列-CSS基础-div水平垂直居中&&文本居中(单行文字、多行文字)
本文介绍div水平垂直居中&&文本居中(单行文字、多行文字)一、div水平垂直居中1.flex2.position （元素已知宽高）3.position transform （元素未知宽高度）4.position（元素已知宽度）maigin：auto5.table-cell二、文本垂直居中(单行文字、多行文字)1.利用line-height和vertical-align2.利用display:table-cell3.利用flex布局align-items:center;
2021-03-27 13:20:54
2559
8
原创 前端性能优化-CSS性能优化
一、内联首屏关键CSS二、异步加载CSS异步加载的几种方式1.js动态创建样式表link元素，并插入到DOM中。2.设置media属性3.设置rel属性4. rel="preload"三、文件压缩四、去除无用CSS五、有选择地使用选择器六、减少使用昂贵的属性七、优化重排与重绘1. 减少重排2.避免不必要的重绘八、让元素及其内容尽可能独立于文档树的其余部分九、避免使用@import十、开启GPU渲染动画十一、合并css文件
2021-03-27 12:39:48
2595
10
原创 前端面试系列-CSS-层叠上下文、层叠等级、层叠顺序、z-index
前端面试系列-CSS-层叠上下文、层叠等级、层叠顺序、z-index如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。- 在**同一个层叠上下文中**，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。- 在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。1、首先先看要比较的两个元素是否处于同一个层叠上下文中：- 如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠
2021-03-25 20:55:55
654
2
原创 前端面试系列-JavaScript-数据结构map和set
JavaScript-数据结构map和setmap1.特性1.1键值对，键可以是对象。1.2.Map可以接受数组作为参数(批量插入)2.属性和方法3.遍历4. 和其它结构的互转二、set1.特性2.属性和方法3.遍历4.和其他结构互转5.应用多数组的合并去重
2021-03-25 17:00:21
626
6
原创 前端面试系列-JavaScript-箭头函数(与普通函数的区别)
文章目录一、箭头函数二、与普通函数的区别1.箭头函数不会创建自己的this2.箭头函数继承而来的this指向永远不变（重要）3.call()、apply()、bind()无法改变箭头函数中this的指向4.箭头函数不绑定arguments,取而代之用rest参数…解决5.不能使用new操作符(作为构造函数使用)6.不能使用原型属性7.不能简单返回对象字面量8.箭头函数不能换行一、箭头函数// 箭头函数let fun = (name) => { // 函数体 return `Hel
2021-03-25 15:06:14
5101
15
原创 前端面试系列-JavaScript-for ... in和for...of
for ... in、for...of区别- for in 一般常用来遍历对象或json，不适用于遍历数组。- for of数组对象都可以遍历，遍历对象需要通过和Object.keys()- for in循环出的是key，for of循环出的是valuefor...of 就是用for实现的。性能for > for...of > for...infor > for...of > for...infor...in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到且for...in的key
2021-03-25 13:30:26
1413
2
原创 前端面试系列-JavaScript-精度问题(0.1+0.2!==0.3、大数相加)
一、双精度浮点数二、十进制小数转二进制小数精度丢失三、关于0.1+0.2 !== 0.3的问题四、大数相加1.S 中整数的安全范围2.实现大数相加
2021-03-25 11:17:07
1419
2
原创 前端面试系列-JavaScript-理解generator及实现原理
- generator:可以将生成器视为可以暂停和恢复的进程（代码段),代码在执行的过程中可以主要交出控制权- genearator 语法: function* 是一个新的关键字用于生成器二、使用案例1.给普通对象添加遍历器2.将ajax请求转成类似的 let a = ajax()的同步赋值形式3.实现状态机4.实现轮询5.异步操作的同步化表达（处理异步操作，改写回调函数）6.通过Generator函数部署Ajax操作7.通过 Generator 函数逐行读取文本文件。三、实现原理
2021-03-24 21:50:07
2037
1
原创 前端面试系列-JavaScript-理解async/await
如果 async 函数没有返回值，它会返回 Promise.resolve(undefined)**一、async,await1.作用2.await 在等什么3.await 等到了要等的，然后呢二、async、await串行并行处理1.串行2.并行三、async、await错误处理四、优点
2021-03-24 21:13:08
939
原创 前端面试系列-JavaScript-Promise(含手写代码)
前端面试系列-JavaScript-Promise(含手写代码)promise解决回调炼狱链式操作的用法reject的用法catch的用法all的用法应用场景场景race的用法Promsie 与事件循环手写代码Promise，
2021-03-24 18:04:10
468
原创 前端面试系列-JavaScript-继承的八种实现方案以及优缺点
前端面试系列-JavaScript-继承的八种实现方案以及优缺点1.原型链继承2.构造函数式继承3.组合继承（常用）4.原型式继承5.寄生式继承6.寄生组合式继承7.Object.assign8. ES6类Extends
2021-03-24 15:08:28
395
2
原创 前端面试系列-JavaScript-call、applay、bind的区别及代码实现
call、applay、bind的区别及代码实现call 和 apply 的主要作用，是改变对象的执行上下文，并且是立即执行的。它们在参数上的写法略有区别；bind 也能改变对象的执行上下文，它与 call 和 apply 不同的是，返回值是一个函数，并且需要稍后再调用一下，才会执行。一、callcall模拟实现二、applayapplay模拟实现三、bindbind模拟实现应用场景1.对象的继承2.借用方法3.Math.max||Math.min4.数组合并
2021-03-24 12:47:01
3334
7
原创 前端面试系列-JavaScript-防抖与节流(用节流优化防抖)
前端面试系列-JavaScript-防抖与节流(用节流优化防抖)时间戳、计时器等方式实现。- **函数防抖**：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。- **函数节流**：使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。
2021-03-24 01:03:33
2855
17
原创 前端面试系列-JavaScript-this指向问题(附面试例题)
对this的产生原因分析和了解默认绑定显式绑定new绑定this指向面试例题从ECMAScript规范解读this默认绑定 < 隐式绑定 < 显式绑定 < new 绑定
2021-03-23 19:02:34
1535
原创 前端面试系列-JavaScript-变量提升、预编译(附面试题)
前端面试系列-JavaScript-变量提升、预编译(Global Object、Activation Object)全局作用域局部作用域前端面试题函数声明整体提升var、let、const、class变量声明提升
2021-03-22 16:53:01
3451
16
原创 前端面试系列-typeof 和instanceof 的实现原理(手写代码)
前端面试系列-typeof 和instanceof 的实现原理，利用typeof判断数据类型手写instanceof实现代码附原型链相关知识
2021-03-21 15:29:00
1091
6
原创 前端面试系列-JavaScrip原型链及new操作符的实现(附图解)
前端面试系列-JavaScript深入之从原型到原型链,new操作符的实现(手写代码)构造函数、实例、原型对象的概念构造函数、实例、原型对象的关系new操作符的工作原理
2021-03-21 15:26:48
839
3
原创 前端面试系列-JavaScript中的Event Loop(事件循环)机制(含图解)
前端面试系列-JavaScript中的Event Loop(事件循环)机制，javascript是一门单线程的非阻塞的脚本语言。浏览器环境下js引擎的事件循环机制执行栈与事件队列执行上下文执行栈栈溢出事件队列（Task Queue）事件循环（Event Loop）微任务（micro task）和宏任务（macro task）node环境下的事件循环机制1.与浏览器环境的差异2.事件循环模型3.事件循环各阶段详解
2021-03-21 14:11:17
2430
4
原创 JS的数据结构-9种数据类型及判断方法(附:数组的几种判断方法)
JS的数据结构及判断方法,数组的几种判断方法,：typeof，instance用法，js9种数据类型，6种原始类型undefined、Symbol、Boolean、BigInt、String、Numbernull、Object、Function
2021-03-21 12:30:34
1466
6
原创 面试官：谈谈对JS闭包的理解及常见应用场景(闭包的作用)
对JS闭包的理解及常见应用场景(闭包的作用);变量作用域如何从外部读取函数内部的变量setTimeout传参,封装变量,为节点循环绑定click事件3.闭包概念4.闭包用途5.闭包的理解6.闭包应用场景7.优缺点及解决办法8.垃圾回收机制
2021-03-19 17:25:52
19198
26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人