- 博客(52)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 JavaScript实现监听路由变化
前端实现路由变化主要有两种方式，这两种方式最大特点就是实现URL切换无刷新功能①通过hash改变，利用window.onhashchange 监听。②通过history的改变，进行js操作加载页面，然而history并不像hash那样简单，因为history的改变，除了浏览器的几个前进后退（使用 history.back(), history.forward()和 history.go() 方法来完成在用户历史记录中向后和向前的跳转。）等操作会主动触发popstate 事件，pushState，re.
2021-08-13 21:15:33
6043
3
原创 图标和字体对齐的几种方法
图标和字体对齐的几种方法原因转述文字图片默认都是以baseline展示的，也称为基线对齐，也就是根据vertical-align属性。如下所示：我们还可以看到图片下面还有一部分空白的高度，此高度是由于字体line-height属性撑出来的，如果没有以下文本元素，自然也不会有以下的空白的高度。但是文字基线不是最低部，而是x的底部。下面的图可以很形象的描述补充一个知识点：X-height属性：指的的是小写字母x的高度，进而引申出一个单位“ex”。 ex是CSS中的一个相对单位，可以应用在图标跟文字
2021-07-31 10:16:03
4102
原创 vue白屏时间长多种处理方案
其实通过开发者调试工具，我从network中我已经可以看到请求vendor.js和app.js资源的时间太长了，导致整体请求时间过长。其实学过vue的都知道，htm中只有一个root 的容器，是一个单页应用，需要将所有需要的资源都下载到浏览器端并解析。1. 依赖文件以及打包文件放进CDN服务器将vue，vue-router，vuex，axios，element-ui等依赖文件不进行引入，整体的vendor和app文件大小大大减少，写法和配置文件如下：main.js(不需要进行引入依赖）webap.
2020-10-31 13:17:57
3101
原创 几道有关于this的面试题
var age= 10;var foo = { x : 20, bar : function(){ var age = 30; console.log(this.age) }};foo.bar();//20(foo.bar)();//10(foo.bar = foo.bar)();//10(foo.bar,foo.bar)();//第一道题 我们都很清楚答案。就是谁调用该函数的，this就是指向该调用的对象第二道题的话，可能不好理解
2020-10-29 19:54:06
449
原创 初始网络分层及理解
网络分层TCP/IP五层模型：是从OSI七层优化而来每一层次的作用：物理层用物理手段（即计算机之间的物理连线）将电脑连接起来，主要用来传输0，1信号，但是并不能解析该层 的现实意义。数据链路层该层规定好一套专门的协议（以太网协议），给0.1信号进行分组，以及规定不同的组是什么意思，目的：让双方计算机能够进行识别传输的信息。以太网协议以太网规定，每组的电信号就是一个数据包，每个数据包我们可以成为“帧”。每帧的组成是由标头(Head)和数据(Data)组成。Q1:怎么知道接收方是谁，MA
2020-10-24 21:30:34
327
转载 震惊！还有人不懂CDN服务器原理
一、什么是 CDNCDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的 CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。简单的说，CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每
2020-10-23 16:49:14
309
原创 搜索引擎优化（SEO）之 前端性能优化技巧
什么是SEO先让我们了解搜索引擎SEO，这个视频 How Search Works 解释了搜索引擎是如何工作的。在让我们摘一下百度百科SEO（Search Engine Optimization）:汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的索引原则的行为。what to do其实搜索引擎做的工作是相
2020-09-23 20:38:41
1664
原创 Web标准的理解
Web标准是W3C组织和其它标准化组织制定的一套规范集合，包含了一系列标准：HTML、XHTML、Javascript以及CSS等。WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。Web标准的目的是创建一个统一的Web表现层的技术标准，
2020-09-23 17:10:23
981
原创 精讲css的浮动与定位
浮动和定位浮动什么是浮动？ 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列，用浮动来布局。 在css中，通过float属性来定义浮动，其基本语法格式如下：选择器 {float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）浮动的特性脱离标准流，不占位置，浮动只有左右浮动一般只要一浮动就创建一个包含块级的概念，一般要在外边添加一
2020-09-23 16:52:36
388
原创 在window下使用WSL快速创建自己的Linux终端，且在VSCode中开发
如果你是一名前端程序员，有一部mac电脑，绝对是你开发的一部利器，看看下面的搜搜结果，但贫穷的我们，我们也可以用Linux终端，部分的增强我们的利器！！！不仅如此，我在开发过程中，总是会遇到缺少一些Linux命令，导致我要新装一些插件，超级麻烦，就想直接安装一个linux终端1.相对于虚拟机，Windows Subsystem for Linux 有以下优点：性能更好。由于实现更加底层，所以性能要比虚拟机好很多。与 Windows 共享的文件系统。子系统是可以直接访问硬盘中的所有文件的，甚至.
2020-08-13 19:05:35
717
翻译 git-flow的工作流程
什么是 git-flow？一旦安装安装 git-flow，你将会拥有一些扩展命令。这些命令会在一个预定义的顺序下自动执行多个操作。是的，这就是我们的工作流程！git-flow 并不是要替代 Git，它仅仅是非常聪明有效地把标准的 Git 命令用脚本组合了起来。严格来讲，你并不需要安装什么特别的东西就可以使用 git-flow 工作流程。你只需要了解，哪些工作流程是由哪些单独的任务所组成的，并且附带上正确的参数，以及在一个正确的顺序下简单执行那些对应的 Git 命令就可以了。当然，如果你使用 git-f
2020-07-06 20:39:18
318
转载 js 数组详细操作方法及解析合集
ES6 Array.of() 返回由所有参数值组成的数组定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。let a = Array.of(3, 11, 8); // [3,11,8]let a = Array.of(3); // [3]ES6 Arrary.from() 将两类对象转为真正的数组定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。参数：第一个参数
2020-06-17 17:27:51
225
转载 单页应用多路由预渲染指南总结
Prerender SPA Pluginprerender-spa-plugin 是一个 webpack 插件用于在单页应用中预渲染静态 html 内容。因此，该插件限定了你的单页应用必须使用 webpack 构建，且它是框架无关的，无论你是使用 React 或 Vue 甚至不使用框架，都能用来进行预渲染。本文示例基于 Vue.js 2.0 + vue-router。下文会从生成项目讲起，然后看下没有配置预渲染前的样子，再配置预渲染进行构建，对比前后的差别。生成项目首先生成一个项目并安装依赖。vu
2020-06-16 19:13:09
337
转载 判断js对象类型的多种方法，附详细说明
概述js中有多种方式可以判断对象的类型，每种判断类型的方式都有自己的优缺点。这篇文章文章中我们一共总结了4种方法：instanceoftypeofObject.prototype.toString.callconstructor1. instanceof使用方法：obj instanceof Object，左操作数是对象实例，右操作数是构造函数。instanceof关键字判断的方式如下，假定o是对象实例、c是构造函数： 如果o继承自c.prototype，则o instanceof c的
2020-05-22 16:24:02
3991
原创 斐波那契数列（阿里面试题）
斐波那契数列（阿里面试题）function fibonacci(n) { if (n <= 1) return 1 let arr = [1, 1]; //i表示的是即将常见多少个 let i = n + 1 - 2; while (i > 0) { let a = arr[arr.length - 2]; let b = arr[arr.leng...
2020-05-03 16:04:01
233
原创 数组扁平化的几种实现方式
数组扁平化数组扁平化其实挺有用的，在项目业务开发中，后台传过来的数据通常都是带有嵌套的。比如我们实现获得拥有多级的评论数据列表，获得其中评论数的话，我们这时候可以将其扁平化，再进行计算。let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10]//ES6方法直接实现ar...
2020-05-03 16:02:27
325
转载 全面讲解TCP中的“三次握手”和“四次挥手”
TCP报文格式简介其中比较重要的字段有：（1）序号（sequence number）：Seq序号，占32位，用来标识从TCP源端向目的端发送的字节流，发起方发送数据时对此进行标记。（2）确认号（acknowledgement number）：Ack序号，占32位，只有ACK标志位为1时，确认序号字段才有效，Ack=Seq+1。（3）标志位（Flags）：共6个，即URG、ACK、PSH、R...
2020-04-04 21:47:21
289
原创 快速掌握如何复杂度分析与计算？
文章目录为什么要学习复杂度分析？1. 测试结果非常依赖测试环境2. 测试结果受数据规模的影响很大正文大O复杂度表示法时间复杂度分析1.只关注循环执行次数最多的一段代码2.加法法则3.乘法法则，嵌套代码的复杂度等于嵌套内外代码复杂度的乘积几种常见时间复杂度实例分析1.O(1)2.O(logn)、O(nlogn)3.O(m+n)、O(m*n)空间复杂度分析浅析最好，最坏，平均，均摊时间复杂度最好和最坏...
2020-04-04 20:34:50
1149
原创 前端面试题---对BFC规范的理解
BFC有点晦涩难懂，建议通过例子进行理解，理解他有什么具体的作用定义BFC 全称为 块格式化上下文 (Block Formatting Context) 。官方定义：一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。元素变为BFC的条件根元素或其它包含它的元素浮...
2020-03-28 21:31:44
600
原创 阿里前端一面面试经历
偶然的机会，得到内推的资格，后面我便立刻递交我的简历，过了不久，我就收到了的阿里的电话，并跟我讨论一面时间，后面我就跟大家分享一面的经过个人建议：面试的时间可以不用很紧凑，可以过一两天时间都行，自己做好面试的准备。放松自己心态。面试一开始：个人介绍（这一part大家可以提前做好准备，准备好自己想要说的内容，把自己优势都说出来）项目介绍（大家可以遵守star原则，提前做好准备）接下来...
2020-03-22 00:06:58
760
1
翻译 一讲就懂！常见面试题之一---跨域常见解决办法
为什么需要跨域，可能我们大家都懂，就是浏览器会有个同源策略（协议、域名、端口都必须相同），其中任何一个不同，都会当做是不同的域，也就是说协议、域名、端口有一个不同，就会认作是跨域，这时就需要通过跨域的解决方案。常见的跨域场景摘自https://segmentfault.com/a/1190000011145364URL ...
2020-03-21 00:24:54
1192
原创 面试常见题--原生类型和对象类型判断的几种方法
1.typeof功能：只能检测 基本数据类型，包括boolean、undefined、string、number、symbol，而null,Array、Object ,使用typeof出来都是Objec。无法检测具体是哪种引用类型（function除外）let a = function(){ console.log('OK')}let b = ()=>{ co...
2020-03-17 22:36:28
256
原创 软件测试的w模型和v模型
软件测试V模型表达了软件测试活动与软件分析设计活动的对应关系：测试活动软件分析设计活动单元测试详细设计集成测试概要设计系统测试软件规格说明验收测试软件需求不足：开发与测试是先后关系，先开发后测试。 忽视了对需求分析，系统设计的验证和确认，需求的 满足情况一直到后期的验收测试才被验证。 如果开发阶段没有有效的质量控制措施，到软件编码 完成之...
2020-03-16 16:51:22
3102
原创 【性能优化篇】-----如何优化js缓存
性能优化有很多的内容，其中一个方法是如何优化js缓存，能够减少执行时间和资源，下面先让我们了解什么事缓存，如何进行缓存。什么是缓存缓存是一种优化技术，通过存储开销大的函数执行的结果，并在相同的输入再次出现时返回已缓存的结果，从而加快应用程序的速度。在这一点上，我们很清楚，缓存的目的是减少执行“昂贵的函数调用”所花费的时间和资源。什么是昂贵的函数调用?别搞混了，我们不是在这里花钱。在计算...
2020-03-15 17:17:50
488
转载 VSCode中Flow报错解决
前言最近在学习RN的使用，实在受不了webstorm的性能，IDE换成了VS Code，对于我这种渣渣电脑，至少用起来不卡了，还有很多插件，非常方便，好评！问题在用到带参数的指定类型的方法时，比如_onPressItem = (id: string) =>，VSCode会报错[js] 'types' can only be used in a .ts file。虽然不影响程序的运行，...
2020-03-14 23:09:30
2337
原创 【性能优化篇】【通俗版】：SEO（搜索引擎优化）背后的价值是什么-
在了解SEO技术之前，我们要先知道服务端渲染（SSR）和客户端渲染（CSR）服务端渲染（SSR）服务端渲染的模式下，当用户第一次请求页面时，由服务器把需要的组件或页面渲染成 HTML 字符串，然后把它返回给客户端。客户端拿到手的，是可以直接渲染然后呈现给用户的 HTML 内容，不需要为了生成 DOM 内容自己再去跑一遍 JS 代码。使用服务端渲染的网站，可以说是“所见即所得”，页面上呈现的...
2020-03-11 14:20:42
290
原创 简单封装一个自己的AJAX
我们先说一下使用AJAX发起一个请求的过程创建一个XMLHttpRequest对象的实例， var xmlHttpRequest = new XmlHttpRequest(); //完整的过程 var xhttp; if (window.XMLHttpRequest) { //现代主流浏览器 xhttp = new XMLHttpR...
2020-03-10 22:27:14
675
原创 简单实现事件注册事件（各个 浏览器上兼容）
我们都可以知道：IE8是一个分水岭，除了IE8及其以下的浏览器意外，chrome、Firefox都基本支持以addEventListener方法来注册事件，以removeEventListener来解除事件。解决办法如下;var AddEventListener = { addHandler:function(element,type,handler){ //绑定事件 ...
2020-03-10 18:17:28
273
原创 面试题基础题（1）
一、事件注册兼容各个浏览器的都能够事件进行兼容我们都可以知道：IE8是一个分水岭，除了IE8及其以下的浏览器意外，chrome、Firefox都基本支持以addEventListener方法来注册事件，以removeEventListener来解除事件。解决办法如下;var AddEventListener = { addHandler:function(element,typ...
2020-03-10 18:01:59
104
原创 js的worker线程，实现多线程
JavaScript 是单线程、异步、非阻塞、解释型脚本语言。JavaScript 的设计就是为了处理浏览器网页的交互（DOM操作的处理、UI动画等），决定了它是一门单线程语言。如果有多个线程，它们同时在操作 DOM，那网页将会一团糟。但为了迎合复杂环境下的发展，前端界面渲染和执行的复杂度越来越大，这时需要其他线程来执行这些复杂耗时的操作问题诞生1如果我们要执行一些耗时的操作，比如加载...
2020-02-12 16:53:00
1657
原创 正则表达式常用语法规则参考
正则表达式内容很多，如果不是经常使用，很多特殊符号根本记不下来。本博客可获得：1. 正则表达式符号总结2. 常用的正则表达式的例子
2019-12-28 15:50:55
318
原创 某校专业认证系统开发总结（基于vue开发）
解决的问题：1.vue添加新的属性视图不会更新2.不统一的表格动态添加列3.对象赋值只是统一指针指向4.数组的内容重复判断5.对输入表单的内容...
2019-12-27 21:05:33
659
2
原创 软件体系结构与架构五大设计模式
五大设计模式最关键的软件开发工具是受过良好设计原则训练的思维一、单例模式Singleton类定义一个个getInstance（）操作，允许客户端访问他的唯一实例，getInstance()是一个静态的方法，主要创建自己的一个唯一实例。比如我们希望整个应用程序只有一个连接数据库connection实例。又比如要求一个应用程序中只存在某个用户数据结构的唯一结构。某个类只有一个实例，具体...
2019-11-28 20:22:50
4880
转载 JavaScript专题之如何判断两个对象相等--转载
虽然标题写的是如何判断两个对象相等，但本篇我们不仅仅判断两个对象相等，实际上，我们要做到的是如何判断两个参数相等，而这必然会涉及到多种类型的判断。文章是我从网上找到解答最详细的博客，是对Underscore的eq函数的解析，感谢博主！
2019-11-26 14:53:40
501
原创 常见前端面试题算法汇总-之后慢慢更新
前端对于算法的考察可能相对较少，但是每一个大厂都会有对算法的考察与检测。下面是有一些自己总结的一些算法。冒泡排序数组去重function sort(arr){ let obj={}; let newArr=[]; for(let i=0;i<arr.length;i++){ if(!obj[arr[i]]){ obj[...
2019-11-26 14:35:36
6322
原创 轻松学习Git 的相关操作（轻松玩转GIt三剑客）
提交到暂存区 git add .或者文件git statusgit status查看当前的状态git branch -avgit loggit log --graph怎么修改最近的commit的messagegit commit--amend//对弹出的页面进行修改再保存怎么修改老旧的commit的messagegit loggit rebase -i...
2019-11-26 14:34:05
185
原创 2019前端面试大厂面试题
后面题目是我从各大厂面试题总结的一些经验为什么使用v-for时需要使用key，且key值不能为index需要key的原因是；使用v-for更新已经渲染的元素列表时，默认采用“就地复用“策略，列表中数据发生改变时，此时的key就开始工作，根据key值去判断某个值是否被修改，如果修改了的话，则重新渲染这一项，否则复用之前的元素根据这个原因，我们可以知道，key值如果为index时，再如果添加...
2019-10-20 19:01:20
1652
转载 Vue项目性能优化--最全最有效
前言Vue框架通过数据双向绑定和虚拟的Dom技术，帮我们处理了前端开发中最脏最累的DOM操作部分。我们不在需要去考虑如何操作Dom。以及如何最高效的操作DOM；但Vue项目仍然存在项目首屏优化，Webpack编译配置优化等问题，所以我们仍然需要去关注Vue项目性能方面的优化，使项目具有更高效的性能，更好的用户体验一、代码层面的优化1.1、v-if ## 标题和 v-show 区分使用场景...
2019-09-09 20:54:04
2924
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人