- 博客(43)
- 收藏
- 关注
RSS订阅
转载 浏览器渲染原理及流程
浏览器渲染原理及流程大多数设备的刷新频率是60Hz，也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验。前端的用户体验给了前端直观的印象，因此对B/S架构的开发人员来说，熟悉浏览器的内部执行原理显得尤为重要。1. 浏览器主要组成与浏览器线程1.1 浏览器组件浏览器大体上由以下几个组件组成，各个浏览器可能有一点不同。界面控件 –...
2019-08-29 20:20:41
3788
原创 React Hooks原理及应用场景
React Hooks是React 16.8版本引入的新特性，可以让函数组件具有类组件的能力，并且使得代码更加简洁和易于维护。React Hooks的核心思想是将状态和副作用从组件中抽离出来，这使得组件本身更加专注于UI的渲染。React Hooks提供了一些钩子函数，可以让我们更加方便地管理组件的状态和副作用，使得代码更加简洁和易于维护。
2023-03-01 22:07:14
772
原创 深入浅出Reactjs
React是一款灵活、高效、可维护的JavaScript库，用于构建复杂的用户界面。通过组件化的开发方式、虚拟DOM机制和简单易学的API，React提供了一种优秀的解决方案，帮助开发人员构建高质量的Web应用程序。
2023-03-01 22:00:00
1753
原创 初中级面试宝典
1. 数据类型判断数据类型的方法：typeof、instanceof、Object.prototype.toString.call( )、isArraytypeof: 可以区分Number、String、Boolean、Undefined、Function; 不能区分普通对象、数组、nulltypeof [ ] => object、typeof null => object（检测不了null, 是javascript设计上的缺陷）instanceof: 专门用检测对象的数据类型
2021-10-27 17:40:36
265
1
原创 script标签有多少种属性，你知道吗？
先思考一下，问自己几个问题script标签中 integrity属性的作用crossorigin 属性如何携带凭据？defer属性的作用，defer属性加载的脚本执行顺序如何？async属性的作用，async属性加载的脚本执行顺序如何？JS动态加载脚本前，如何让浏览器预加载？将javaScript插入HTML中主要的方式是使用async: 可选。表示立即开始下载脚本，但不能阻止页面其它的动作，比如下载资源或等待其它脚本加载。只对外部脚本文件有效。在外部js文件加载完成之后，如果浏览器空闲，
2021-06-12 20:59:50
1335
3
原创 Mac查看和生成SSH密钥流程
当我们到了一个新的项目组时，第一步要做的就是尽快熟悉环境，熟悉即将要开发的项目，查阅相关文档及熟悉代码的逻辑。而项目一般放在远程仓库管理，刚去项目组肯定是没有仓库权限的，当同事把你加入到远程仓库的成员组之后，这时你就拥有了仓库的基本权限。这时，我们需要做的就是配置ssh密钥，然后把配置好的ssh密钥，配置到远程仓库，这样你本地的电脑就和远程仓库建立了连接。下面说下具体步骤：生成ssh密钥 命令：ssh-keygen -t rsa -C "自己的Email地址" 整个流程也极其简单，无脑操作，按
2021-06-12 20:49:44
1877
2
转载 《javascript高级程序设计》核心知识总结
摘要js基本的数据类型和关键点变量，作用域和内存问题垃圾回收机制面向对象的程序设计实现类与继承的经典方式BOM和DOM对象DOM扩展与高级API介绍高级编程技巧跨文档消息传递和ajax封装web worker基本实现与demo一. Number类型关键点讲解1.进制问题1.八进制字面量在严格模式下无效，会导致支持该模式的js引擎抛出异常2.十六进制字面量的前两位必须是0x，后根任何十六进制数字（0-9及A-F）3.在进行算术计算时，所有以八进制和十六进制表示的数值最终将被
2021-06-09 11:22:26
619
原创 快速了解javascript中的offset、client、scroll
先上图，俗话说的好：一图顶千言。图片可以清楚直观的看到每个属性各自代表的偏移量位置。1.offset假设 obj 为某个 HTML 控件。obj.offsetTop：指obj相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，单位：像素。offsetTop = offsetParent的padding - top + 中间元素的offsetHeight + 当前元素的margin - topobj.offsetLeft：指obj相对于版面或由 offsetParen
2021-06-08 23:15:01
139
3
原创 浅谈js执行上下文
1.基本概念什么是执行上下文？当函数在运行的时候，会创建一个执行环境，这个执行环境就叫执行上下文（execution context）.数据是如何存储的？在执行上下文中会创建一个变量对象（variable object）,基础数据类型的变量名和值会保存在变量对象中，引用类型的值保存在堆中，变量对象中存储的是内存地址，内存地址指向堆中具体的值，我们可以通过操作对象的引用地址来操作对象.基础数据类型和引用数据类型分类：基本数据类型有7种，分别是Undefined、Null、Boolean、N.
2021-06-05 23:09:47
258
原创 这个游戏你玩过吗?原生js实现
原生js写个贪吃蛇玩玩，具体代码如下： /* 地图类*/ (function() { // 地图构造函数 需要三个参数 宽高背景色 function Map(width,height,bgColor){ this.width = width; this.height = height; this.bgColor = bgColor; } // 将公共方法创建到原型对象上
2021-04-07 23:46:39
103
1
转载 用React和Vue创建两个完全相同的app，发现了这些不同
原文链接：https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd作者：Sunil Sandhu译者：peak 本文采用意译非直译在工作中使用 Vue 一段时间后，对它的工作原理有了相当深入...
2020-04-24 16:29:34
518
原创 git命令操作(从小白到大佬)
git的配置第一次安装git需要配置用户名和邮箱git config --global user.name 'xxx'git config --global user.email 'xxx@xxx.com'git的三区工作区开发代码的地方新建/修改/删除文件出现再工作区暂存区暂时保存代码的地方版本区代码版本控制的地方指令git init ...
2020-02-15 22:50:01
136
转载 canvas实现图形验证码
<canvas id="canvas_code"> </canvas><script>// canvas绘制图形验证码 (function(){ function Gcode(el, option) { this.el = typeof el === 'string' ? document.querySelec...
2019-12-26 03:28:06
249
原创 原生JS实现钟表
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>Title</title> <style> * { list-style: none; } ...
2019-12-25 22:40:21
198
转载 1.5万字概括ES6全部特性
前言第三次阅读阮一峰老师的《ES6标准入门》了，以前阅读时不细心，很多地方都是一目十行。最近这次阅读都是逐个逐个字来读，发现很多以前都没有注意到的知识点，为了方便记忆和预览全部ES6特性，所以写下本文。以下提到的《ES6标准入门》统一使用《ES6》这个名称来代替，而最新的ES6版本也是截止到当前的ES2019本文的知识点完全是参考或摘录《ES6》里的语句，有部分语句为了方便理解和记忆，进行了......
2019-12-22 01:25:51
195
原创 webpack实用知识点梳理
webpack实用知识点梳理为什么需要构建工具？- 转换 ES6 语法- 转换 JSX- CSS 前缀补全/预处理器压缩混淆- 图⽚片压缩为什么选择 webpack?- 社区生态丰富- 配置灵活和插件化扩展- 官⽅方更更新迭代速度快核心概念之 Entry- Entry ⽤用来指定 webpack 的打包入⼝核心概念之 Output- Output 用来告诉 webp...
2019-12-06 20:18:57
269
原创 new关键字做了什么及实现自定义new
new 关键字做了什么1.调用函数2.创建一个新的对象,把实例对象的隐式原型指向构造函数的显式原型3.改变 this 指向,把 this 绑定在实例对象上 4.返回一个对象,如果构造函数本身返回的是一个对象,那么就返回这个对象,如果不是就返回这个实例对象自定义实现 new 关键字function _new(fn,...args){ const obj=Object.create...
2019-12-05 13:08:52
395
原创 css水平垂直居中的常用方法
css 样式<body> <div id="box"> <div id="box1"></div> </div></body>方法一：flex 布局 #box { height: 400px; height: 400px; border: 1px solid...
2019-12-05 12:08:36
167
原创 基于Hexo的GitHub博客搭建流程
第1步：系统环境配置1.安装Node.js安装了Node.js会自动安装npm包管理器2.安装Git(自行官网下载)3.安装Hexo打开CMD命令行窗口，输入npm install -g hexo第2步：本地部署Hexo1.初始化博客目录hexo init （这个命令会初始化博客的目录，所以，执行这个命令时，在你想创建的目录下执行，就自动生成到对应目录下。）...
2019-10-11 00:48:44
119
原创 数组常用排序(冒泡,快排)
快速排序 function quickSort(array){ //保存数组的长度提高效率 const len = array.length; //数组长度小于等于1时,把结果return出去 if(len <= 1) return array; let left = []; ...
2019-09-30 13:33:49
216
原创 数组扁平化(降维)
方法一,利用正则表达式 let arr1 = [2,3,[5,6,[21,25,17],[[[9,10]]]]]; const josnStr = JSON.stringify(arr1); const newArr = josnStr.replace(/(\[|\])/g,'').split(',');方法二,循环遍历,递归调用 //初始化一个空数组...
2019-09-29 10:28:56
180
原创 数组去重(利用对象属性不能同名)
//该方法要比indexOf性能好 console.time(); const arr = [2,5,6,5,2,8,9]; const obj = {}; for (let i = 0; i < 100000; i++) { arr.push(Math.round(Math.random()*10000...
2019-09-28 21:43:59
275
原创 原型与原型链
1.原型是什么?原型指的是原型属性:prototype:所有函数都有prototype属性, prototype属性的值是对象。这个对象叫原型对象。(显示原型)这个原型对象上默认有两个属性:**constructor:**指向函数本身proto : Object. prototype(大写的Object原型对象)proto(隐式原型):所有实例对象都有__ proto__ ...
2019-09-25 21:53:42
111
原创 闭包的作用及概念
1. 如何产生闭包?当一个嵌套的内部函数引用了嵌套的外部函数的变量(函数)时, 执行外部函数就产生了闭包. 通过chrome开发者工具调试查看到。一个包含被引用的局部变量的closure“对象”，存在嵌套的内部函数中2. 闭包到底是什么?使用chrome调试查看理解一: 闭包是嵌套的内部函数(绝大部分人)理解二: 包含被引用变量(函数)的对象closure(极少数人)注意: 闭包...
2019-09-25 21:25:57
186
原创 WebStorm快捷键大全及常用插件
下面是Webstorm的一些常用快捷键及插件：掌握和常用的插件使用,可以大大提高你开发的效率ctrl + shift + n: 打开工程中的文件，目的是打开当前工程下任意目录的文件。ctrl + j: 输出模板ctrl + b: 跳到变量申明处ctrl + alt + T: 围绕包裹代码(包括zencoding的Wrap with Abbreviation)ctrl + []: 匹配...
2019-09-13 01:44:35
958
原创 移动端简单滑屏效果
分享一个移动端简单滑屏效果CSS代码如下：<style> .test{ width: 150px; height: 150px; font-size: 22px; line-height: 150px; text-align: center; background-color: pink; position: absol...
2019-09-08 02:24:48
398
原创 移动端适配方案
移动端适配方案首先，简单说明下关于px，em，rem之间的简单区别px：是元素固定的像素单位em：只和自身的font-size相关，1em等同于1倍自身的字号大小如下图： #outer{ font-size: 30px; /*90px em单位和自身的font-size相关*/ width: 3em; ...
2019-09-06 21:54:01
170
原创 setTimeout经典面试题
分享一个关于setTimeout的面试题，话不多说，直接上代码，关键点会有详细备注题目代码如下：for(var i=0; i<5; i++){ setTimeout(function() { console.log(new Date,i);//输出结果5，5，5，5，5 }) } ...
2019-09-06 01:27:02
1086
原创 zepto&jQuery的区别
什么是zepto. js概念:移动端开发框架， 是jquery的轻量级代替品; API及语句同jquery相似，但文件更小，是目前功能完备的库中，最小的一个。zepto特点1、针对的是移动端2、轻量级，压缩版本只有8KB3、语法大部分同jquery一样，学习成本低， 上手快。4、响应，执行快。5、同jquery一样以作为核心函数和核心对象。zepto与jQuery的共同点：jqu...
2019-09-04 20:08:12
277
原创 原生JS封装transform函数
分享一个原生JS封装的函数，设置和获取transform属性function transform(ele,prop,value) {//如果当前元素是对象，并且该元素没有transform属性，那就给该元素扩展一个transform属性if(typeof ele ==="object" && typeof ele["transform"] === "undefined"){...
2019-09-03 23:28:02
570
转载 一文搞懂浏览器缓存机制
一文搞懂浏览器缓存机制最近在项目中遇到了 IE浏览器因缓存问题未能成功向后端发送 GET类型请求 的bug，然后顺藤摸瓜顺便看了看缓存的知识，觉得有必要总结跟大家分享一下。在前端开发中，性能一直都是被大家所重视的一点，然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速度的一个方式就是使用缓存。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利...
2019-09-02 21:42:53
248
原创 JS 获取当前选中li标签的下标
点击li标签，获取到当前选中li标签的下标//方法一:给li元素扩展一个自定义属性index，保存它的下标，js目前没有方法获取到子元素在它父级中的下标 for(var i=0;i<list.length;i++){ list[i].index=i; list[i].onclick=function () { ...
2019-08-29 15:14:03
3682
原创 css几种水平垂直居中
1. 使用flex布局在父容器中设置.container{ displayy: flex; justify-content: center; align-items: center}2. 绝对定位分为已知宽高和未知宽高两种情况已知宽高都是100px，设置自身为绝对定位（absolute），top和left为50%，margin-left、margin-top为自身的一...
2019-08-27 23:53:26
140
原创 H5 canvas画布时钟
canvas画布时钟分享一个canvas手绘时钟，代码如下 <canvas id="canvas" width="400px" height="400px"></canvas> <script> //获取画布ID var oCanvas = document.getElementById("canvas"); ...
2019-08-27 23:20:09
262
转载 Netscape与IE的浏览器之争
Netscape与IE的浏览器之争1992年，在伊利诺斯州大学里，一个20岁出头、尚未毕业的计算机科学专业的大学生，每天除了上课，就是在NCSA(美国的国家超级计算中心)工 作。这天，一群同年龄的大学生在他带领下，正通过CERN(欧洲粒子物理研究所)的万维网协议上传和下载数据。他们突然发现这种通过互联网传输数据的方法 能提供前所未有的便捷，并希望所有人都能来体会。在当时的情况下，除了少数计算机...
2019-08-23 10:02:15
1955
原创 CSS 3D正方体
CSS 3D正方体分享一个拼好的3D正方体的源码**<style> #outer{ width: 200px; height: 200px; margin: 200px auto; border: 1px solid #fff; perspect...
2019-08-19 01:19:13
377
原创 经典面试题：undefined和null的区别
Undefined和null的区别null是空，undefined是未定义，找不到null一般在以下3种情况出现：1，作为函数的参数，表示该函数的参数不是对象，需要传递参数，但是我们暂时不想传递或者不需要传递，那么我们可以传一个空对象null，例如：对象名（null，null）ajax有个方法send(),send方法参数是你要向服务器传递的值，但是get方法是在地址栏拼接值，所以不需要s...
2019-08-15 14:37:56
2191
原创 Web前端面试必考题，!doctype html的作用
doctype是版本声明，告诉浏览器的解析器，当前页面是以h5的规范来解析渲染，书页在页面的第一行，如果不写或书写错误会出现混杂模式，也叫怪异模式!严格模式，是以浏览器支持的最高标准执行渲染。混杂模式，页面是以宽松的形式向后（老的规范）兼容，模拟老浏览器的工作方式，防止页面在老浏览器中不可使用。DTD（Docement Type Definition文档类型定义）规定了标记语言的规则，这样浏...
2019-08-15 14:28:41
477
转载 前端十大算法
排序算法说明（1）排序的定义：对一序列对象根据某个关键字进行排序；输入：n个数：a1,a2,a3,…,an输出：n个数的排列:a1’,a2’,a3’,…,an’，使得a1’再讲的形象点就是排排坐，调座位，高的站在后面，矮的站在前面咯。（3）对于评述算法优劣术语的说明稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面；不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出...
2019-08-13 18:36:02
1206
原创 Css基础知识点梳理总结
Css知识点复习总结标准文档流页面内的元素由左到右由上到下按照顺序依次排列特点:1、空白折叠:多个空格会被合并成一个空格(解决办法:使用 来解决)2、自动换行，一行满以后会自动换行3、所有元素默认都是底边对齐2.标准文档流元素分类行内元素和块级元素(行内块元素:里边是块属性套了一个行属性的壳)行属性:行内显示、不能设置宽高、只能嵌套行标签块属性:独占一-行换行显...
2019-08-13 13:08:00
369
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人