
笔记
文章平均质量分 91
Branlen
大三本科生、前端爱好者
展开
-
图标和字体对齐的几种方法
图标和字体对齐的几种方法原因转述文字图片默认都是以baseline展示的,也称为基线对齐,也就是根据vertical-align属性。如下所示:我们还可以看到图片下面还有一部分空白的高度,此高度是由于字体line-height属性撑出来的,如果没有以下文本元素,自然也不会有以下的空白的高度。但是文字基线不是最低部,而是x的底部。下面的图可以很形象的描述补充一个知识点:X-height属性:指的的是小写字母x的高度,进而引申出一个单位“ex”。 ex是CSS中的一个相对单位,可以应用在图标跟文字原创 2021-07-31 10:16:03 · 4115 阅读 · 0 评论 -
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 · 3105 阅读 · 0 评论 -
软件测试的w模型和v模型
软件测试V模型表达了软件测试活动与软件分析设计活动的对应关系:测试活动软件分析设计活动单元测试详细设计集成测试概要设计系统测试软件规格说明验收测试软件需求不足:开发与测试是先后关系,先开发后测试。 忽视了对需求分析,系统设计的验证和确认,需求的 满足情况一直到后期的验收测试才被验证。 如果开发阶段没有有效的质量控制措施,到软件编码 完成之...原创 2020-03-16 16:51:22 · 3107 阅读 · 0 评论 -
一讲就懂!常见面试题之一---跨域常见解决办法
为什么需要跨域,可能我们大家都懂,就是浏览器会有个同源策略(协议、域名、端口都必须相同),其中任何一个不同,都会当做是不同的域,也就是说协议、域名、端口有一个不同,就会认作是跨域,这时就需要通过跨域的解决方案。常见的跨域场景摘自https://segmentfault.com/a/1190000011145364URL ...翻译 2020-03-21 00:24:54 · 1193 阅读 · 0 评论 -
几道有关于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 · 452 阅读 · 0 评论 -
初始网络分层及理解
网络分层TCP/IP五层模型:是从OSI七层优化而来每一层次的作用:物理层用物理手段(即计算机之间的物理连线)将电脑连接起来,主要用来传输0,1信号,但是并不能解析该层 的现实意义。数据链路层该层规定好一套专门的协议(以太网协议),给0.1信号进行分组,以及规定不同的组是什么意思,目的:让双方计算机能够进行识别传输的信息。以太网协议以太网规定,每组的电信号就是一个数据包,每个数据包我们可以成为“帧”。每帧的组成是由标头(Head)和数据(Data)组成。Q1:怎么知道接收方是谁,MA原创 2020-10-24 21:30:34 · 328 阅读 · 0 评论 -
震惊!还有人不懂CDN服务器原理
一、什么是 CDNCDN的全称是(Content Delivery Network),即内容分发网络。其目的是通过在现有的Internet中增加一层新的 CACHE(缓存)层,将网站的内容发布到最接近用户的网络”边缘“的节点,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因,提高用户访问网站的响应速度。简单的说,CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上,用户请求资源时,就近返回节点上缓存的资源,而不需要每转载 2020-10-23 16:49:14 · 311 阅读 · 0 评论 -
搜索引擎优化(SEO)之 前端性能优化技巧
什么是SEO先让我们了解搜索引擎SEO,这个视频 How Search Works 解释了搜索引擎是如何工作的。在让我们摘一下百度百科SEO(Search Engine Optimization):汉译为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。SEO是指为了从搜索引擎中获得更多的免费流量,从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划,使网站更适合搜索引擎的索引原则的行为。what to do其实搜索引擎做的工作是相原创 2020-09-23 20:38:41 · 1672 阅读 · 0 评论 -
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 · 984 阅读 · 0 评论 -
精讲css的浮动与定位
浮动和定位浮动什么是浮动? 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。它可以让任何盒子可以在一行排列,用浮动来布局。 在css中,通过float属性来定义浮动,其基本语法格式如下:选择器 {float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动(默认值)浮动的特性脱离标准流,不占位置,浮动只有左右浮动一般只要一浮动就创建一个包含块级的概念,一般要在外边添加一原创 2020-09-23 16:52:36 · 393 阅读 · 0 评论 -
在window下使用WSL快速创建自己的Linux终端,且在VSCode中开发
如果你是一名前端程序员,有一部mac电脑,绝对是你开发的一部利器,看看下面的搜搜结果,但贫穷的我们,我们也可以用Linux终端,部分的增强我们的利器!!!不仅如此,我在开发过程中,总是会遇到缺少一些Linux命令,导致我要新装一些插件,超级麻烦,就想直接安装一个linux终端1.相对于虚拟机,Windows Subsystem for Linux 有以下优点:性能更好。由于实现更加底层,所以性能要比虚拟机好很多。与 Windows 共享的文件系统。子系统是可以直接访问硬盘中的所有文件的,甚至.原创 2020-08-13 19:05:35 · 720 阅读 · 0 评论 -
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 · 226 阅读 · 0 评论 -
判断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 · 3997 阅读 · 0 评论 -
斐波那契数列(阿里面试题)
斐波那契数列(阿里面试题)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 阅读 · 0 评论 -
数组扁平化的几种实现方式
数组扁平化数组扁平化其实挺有用的,在项目业务开发中,后台传过来的数据通常都是带有嵌套的。比如我们实现获得拥有多级的评论数据列表,获得其中评论数的话,我们这时候可以将其扁平化,再进行计算。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 · 328 阅读 · 0 评论 -
全面讲解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 · 291 阅读 · 0 评论 -
ES2017--async和await的用法及注意点
1.定义2.用法注意附上vue使用async简单解决axios请求原创 2020-04-01 16:33:10 · 309 阅读 · 0 评论 -
阿里前端一面面试经历
偶然的机会,得到内推的资格,后面我便立刻递交我的简历,过了不久,我就收到了的阿里的电话,并跟我讨论一面时间,后面我就跟大家分享一面的经过个人建议:面试的时间可以不用很紧凑,可以过一两天时间都行,自己做好面试的准备。放松自己心态。面试一开始:个人介绍(这一part大家可以提前做好准备,准备好自己想要说的内容,把自己优势都说出来)项目介绍(大家可以遵守star原则,提前做好准备)接下来...原创 2020-03-22 00:06:58 · 763 阅读 · 1 评论 -
面试常见题--原生类型和对象类型判断的几种方法
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 阅读 · 0 评论 -
面试题基础题(1)
一、事件注册兼容各个浏览器的都能够事件进行兼容我们都可以知道:IE8是一个分水岭,除了IE8及其以下的浏览器意外,chrome、Firefox都基本支持以addEventListener方法来注册事件,以removeEventListener来解除事件。解决办法如下;var AddEventListener = { addHandler:function(element,typ...原创 2020-03-10 18:01:59 · 104 阅读 · 0 评论 -
js的worker线程,实现多线程
JavaScript 是单线程、异步、非阻塞、解释型脚本语言。JavaScript 的设计就是为了处理浏览器网页的交互(DOM操作的处理、UI动画等),决定了它是一门单线程语言。如果有多个线程,它们同时在操作 DOM,那网页将会一团糟。但为了迎合复杂环境下的发展,前端界面渲染和执行的复杂度越来越大,这时需要其他线程来执行这些复杂耗时的操作问题诞生1如果我们要执行一些耗时的操作,比如加载...原创 2020-02-12 16:53:00 · 1660 阅读 · 0 评论