前端面试
关注
分享
扫一扫
文章平均质量分 70
斷了De弦
这个作者很懒，什么都没留下…
展开
-
两列布局，三列布局的实现
一、两列布局1、利用BFC<div class="left"> left</div><div class="right"> right</div>* { padding: 0; margin: 0;}.left{ float: left; width: 200px; height: 80...原创 2018-09-14 18:43:52 · 907 阅读 · 0 评论 -
node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。教程：http://www.runoob.com/nodejs/nodejs-tut...转载 2018-08-16 16:07:46 · 186 阅读 · 0 评论 -
返回顶部js插件的编写
【1】锚点 使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor"转载 2018-08-15 18:02:54 · 241 阅读 · 0 评论 -
Sass和Less
什么是Sass和Less？ Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。 转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页...转载 2018-08-16 15:40:12 · 1109 阅读 · 0 评论 -
ES6 解构赋值
一 我们为什么要使用解构在学习ES6新的特性解构赋值之前，我们先来看看为什么要使用解构，以前如果我们需要获取对象或者数组里面的数据，并且把它们存入数组，需要写很多代码。如下const person = { name: 'little bear', age: 18, sex: '男'}let age = person.agelet name = person.namel...原创 2018-08-16 15:32:00 · 250 阅读 · 0 评论 -
css中的单位
尺寸单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如，如果某元素以 12pt 显示，那么 2em 是24pt。 在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 ex 一个 e...原创 2018-08-16 15:01:47 · 396 阅读 · 0 评论 -
TCP协议中的三次握手四次挥手
方案TCP建立连接为什么是三次握手，而不是两次或四次？TCP，名为传输控制协议，是一种可靠的传输层协议，IP协议号为6。顺便说一句，原则上任何数据传输都无法确保绝对可靠，三次握手只是确保可靠的基本需要。举个日常例子，打电话时我们对话如下： 一、TCP报文格式 TCP报文格式图： 上图中有几个字段需要重点介绍下： （1）序号：Seq序号，占32位，...转载 2018-08-16 12:08:29 · 226 阅读 · 0 评论 -
TCP/IP四层模型与OSI参考模型
TCP/IP四层模型：1.链路层（数据链路层/网络接口层）：包括操作系统中的设备驱动程序、计算机中对应的网络接口卡2.网络层（互联网层）：处理分组在网络中的活动，比如分组的选路。3.运输层：主要为两台主机上的应用提供端到端的通信。4.应用层：负责处理特定的应用程序细节。 网络层与运输层的区别： 在TCP/TP协议族中， 网络层IP提供的是一种不可靠的服务。它...原创 2018-08-16 11:24:46 · 8419 阅读 · 0 评论 -
js的数据类型
基本类型ECMScript中有5种简单的数据类型（也称为基本数据类型）：Undifined,Null,Boolean,Number和String。还有一种复杂数据类型——Object。typeof操作符可以检测给定变量的数据类型var message="dd";console.log(message);//'String'引用类型Object,Array,Date,RegE...转载 2018-08-08 21:59:13 · 261 阅读 · 0 评论 -
webpack打包js
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复...转载 2018-08-08 20:31:08 · 449 阅读 · 0 评论 -
js数组去重
// 借助新数组 通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];function rep(arr) { var ret = []; for (var i = 0; i < arr.length; i++) { if (arr.index...原创 2018-08-08 20:27:27 · 214 阅读 · 0 评论 -
js数组的基本操作
shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined，改变原数组。var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift:将参数添加到原数组开头，并返回数组的长度，改变原数组注:在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的...原创 2018-08-08 20:21:28 · 187 阅读 · 0 评论 -
浏览器页面渲染过程
浏览器渲染页面的一般过程：1.浏览器解析html源码，然后创建一个 DOM树。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优...原创 2018-08-16 16:51:30 · 4869 阅读 · 0 评论 -
CDN加速
CDN概况CDN的全称是Content Delivery Network，即内容分发网络。CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。CND加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。下面这张图...转载 2018-08-16 19:39:06 · 9475 阅读 · 0 评论 -
.vue文件的解析过程
参考：https://blog.youkuaiyun.com/weixin_38788947/article/details/76718402转载 2018-09-14 18:29:14 · 1541 阅读 · 0 评论 -
vue中v-for中key的作用
需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。参考：https://www.cnblogs.com/zhumingzhenhao/p/7688336.html...转载 2018-09-14 18:13:41 · 2659 阅读 · 0 评论 -
vue-router实现原理
1. hash 模式随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题...转载 2018-09-14 18:04:13 · 2378 阅读 · 0 评论 -
js类型转换
1、强制类型转换通过String（），Number（），Boolean（）函数强制转换 var str=123; var str1='123'; console.log(typeof str); console.log(typeof str1); console.log(typeof String(str)); console.log(typeof Nu...原创 2018-09-13 10:32:24 · 179 阅读 · 0 评论 -
旋转数组的查找和最值
给定一个有序数组，如{1,2,3,4,5,6,7,8,9}，我们将对这个数组进行选择，位置旋转未知。下面给出一个可能的旋转结果。如{4,5,6,7,8,9,1,2,3}，我们可以理解为它从元素4位置开始旋转。之后给定一个指定的数字n，让我们从{4,5,6,7,8,9,1,2,3}这个数组中找出它的位置，要求时间复杂度尽可能的低。 观察数组可以得到的信息：1.拐点的左右两边都是一个有序的...原创 2018-09-12 18:46:53 · 394 阅读 · 0 评论 -
css实现圆、三角形
<div class="circular"> circular</div>* { padding: 0; margin: 0;}.circular{ width: 200px; height: 200px; border: solid 1px black; border-radius: 100%;}&l...原创 2018-09-16 17:23:47 · 513 阅读 · 0 评论 -
html js css实现九九乘法表
效果图：HTML：<body><div id="main"></div></body>CSS：.row{ text-align: center; width: 800px; margin: 0 auto;}.col{ border: 1px solid #000000; di...原创 2018-09-12 15:37:09 · 3333 阅读 · 0 评论 -
js内存分配机制
简介每种编程语言都有它的内存管理机制，比如简单的C有低级的内存管理基元，像malloc(),free()。同样我们在学习JavaScript的时候，很有必要了解JavaScript的内存管理机制。 JavaScript的内存管理机制是:内存基元在变量（对象，字符串等等）创建时分配，然后在他们不再被使用时“自动”释放。后者被称为垃圾回收。这个“自动”是混淆并给JavaScript（和其他高级语言...转载 2018-09-12 11:18:32 · 3924 阅读 · 4 评论 -
如何实现响应式布局
首先，在网页代码的头部，加入一行viewport元标签。<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认...转载 2018-09-11 21:49:22 · 684 阅读 · 0 评论 -
vue的生命周期
所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。1、beforeCreate 在实...原创 2018-08-17 14:55:25 · 219 阅读 · 0 评论 -
js的垃圾回收机制
JavaScript具有自动垃圾收集机制，也就是说执行环境会负责管理代码执行过程中的内存。这种垃圾回收机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔，周期地执行这一操作。1、标记清除法最常用的垃圾收集方式。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记，然后它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在...原创 2018-08-17 11:09:00 · 258 阅读 · 0 评论 -
css实现未知大小的块状元素垂直水平居中
思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性<!DOCTYPE html><html lang="en"><head> <meta charset=...转载 2018-08-08 19:57:01 · 386 阅读 · 0 评论 -
https与http的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安...转载 2018-08-08 16:43:05 · 284 阅读 · 0 评论 -
CSS世界的结界——BFC
BFC的定义BFC 全称为 block formatting context，中文为“块级格式化上下文”。关于 BFC 各种特性什么的，说起来很啰嗦，而我喜欢用“ CSS 世界的结界”这种称谓概括BFC 的特性。“结界”这个词大家应该都理解的，指通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力。 BFC 的特性表现如出一辙。大家请记住下面这个表现原则：如果...转载 2018-08-08 16:05:22 · 1525 阅读 · 0 评论 -
js 链式调用
链式调用举例：jQuery中的$(ele).show().find(child).hide()实现方法1.方法体内返回对象实例自身(this)var Obj = { a: 1, func: function(){ this.a += 1; return this }}Obj.func().func();console.lo...原创 2018-08-06 16:50:26 · 750 阅读 · 0 评论 -
ES6 promise理解
Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。ES5实现：https://www.cnblogs.com/malingyang/p/6535805.htmlPromise实现串行调用，判断多个图片异步加载完成：Prom...转载 2018-08-06 16:23:57 · 1170 阅读 · 0 评论 -
闭包
闭包是指有权访问另一个函数作用域中变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。无论什么时候在函数中访问一个变量时，就会从作用域链中搜索具有相应名字的变量。一般来讲，当函数执行完毕后，局部活动对象就会被销毁，内存中仅保存全局作用域（全局执行环境的变量对象）。但是闭包的情况又有所不同，由于闭包会携带包含它的作用域，因此会比其他函数占用更多的内存。如下为一个闭包的实例：...原创 2018-07-27 21:36:26 · 145 阅读 · 0 评论 -
事件处理程序（事件绑定、事件监听、事件侦听器）
相应某个事件的函数叫做事件处理程序（或事件侦听器）。1、TTML事件处理程序<script type="text/javascript"> function showMessage() { alert('hello world!'); }</script> <input type="button" value="Click...原创 2018-07-31 18:59:54 · 1237 阅读 · 0 评论 -
vue的双向数据绑定实现原理
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。var vm = new Vue({ data: { obj: { a: 1 } }, created: function () {...转载 2018-08-09 16:41:08 · 380 阅读 · 0 评论 -
javascript中this的用法
在javascript中，this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。下面来解释一下this绑定的四种情况：1、默认绑定默认绑定全局变量function fn() { console.log( t...原创 2018-07-27 18:04:03 · 333 阅读 · 0 评论 -
MVC、MVP、MVVM架构模式的区别
MVCMVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。...原创 2018-08-09 12:05:29 · 454 阅读 · 0 评论 -
集成ajax上传技术 大文件/超大文件前端切割上传，后端进行重组
概念 js新的技术中增加了File对象（实际上就是blob的具体化的一个东西），设计规范参考这里2个 File API 规范 和 FileSystem API 规范 后台二进制文件重组 1. 创建空的文件流 2. 读取临时存储切割文件的文件夹，获得所有文件路径 切记：一定要按顺序进行排序，否则组合文件将会错误 3. 按顺序将切割小文件读取成二进制流，写...转载 2018-08-09 10:50:59 · 2080 阅读 · 0 评论 -
js前端文件下载
一、HTML与文件下载如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：<a href="large.jpg" download>下载</a>具体介绍可参考我之前的文章：“了解HTML/HTML5中的download属性”。但显然，如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），...转载 2018-08-09 10:37:52 · 17602 阅读 · 1 评论 -
css position属性
定义和用法position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style.pos...转载 2018-08-03 22:11:11 · 314 阅读 · 0 评论 -
js中的异步编程
简介JS语言的执行环境是“单线程”。所谓单线程，就是一个时间只能完成一个任务，如果有多个任务，就必须排队。“单线程”的坏处是：只要有一个任务耗时很长，后面的任务就必须排队等待，会拖延整个程序的执行。为了解决这个问题，JS的任务执行模式分为两种：同步（synchronous）和异步(asynchronous)。同步模式就是上面提到的，后面的任务等待前面的任务完成后，才能执行。程序...转载 2018-08-06 17:02:00 · 176 阅读 · 0 评论 -
css清除浮动的方法
清除浮动其实主要解决的就是高度塌陷问题，具体在此不再赘述~~~那些年我们一起清除过的浮动（大佬博客，写的挺不错）1、添加额外的标签通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可优点：通俗易懂，容易掌握缺点：添加无意义的空标签，有违结构与表现的分离，不利于后期维护2、父元素设置 ov...转载 2018-08-06 22:13:28 · 178 阅读 · 0 评论