前端
文章平均质量分 67
Alan_147
这个作者很懒,什么都没留下…
展开
-
HTML文档解析和DOM树的构建
浏览器解析HTML文档生成DOM树的过程以下是一段HTML代码,以此为例来分析解析HTML文档的原理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="script.js">&l原创 2018-05-13 12:31:15 · 8004 阅读 · 0 评论 -
前端面试经典题目合集(HTML+CSS)
(整理自网络,侵删)1、浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层 分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。2、HTML5的优点与缺点?优点: a、网络标准统一、HTML5本身是由W3C推荐出来的; ...转载 2018-06-16 16:22:31 · 1450 阅读 · 0 评论 -
前端面试经典题目合集--77题
(整理自网络,侵删)1.请你谈谈Cookie的弊端cookie虽然在持久保存客户端数据提供了方便,分担了服务器存储的负担,但还是有很多局限性的。第一:每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最...转载 2018-06-16 16:01:36 · 2318 阅读 · 0 评论 -
数据结构-经典排序算法实现及其可视化(JavaScript实现)
实现经典的9种排序算法,分析其时间复杂度以及空间复杂度,并用动画的方式演示。一、冒泡排序步骤:比较相邻的元素,如果前一个比后一个大,就把它们两个调换位置。对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。这步做完后,最后的元素会是最大的数。针对所有的元素重复以上的步骤,除了最后一个。持续每次对越来越少的元素重复上面的步骤,直到没有任何一对数字需要比较。JavaScript实现:var b...原创 2018-05-28 11:19:30 · 4215 阅读 · 1 评论 -
数据结构-基于邻接表实现图的遍历可视化及使用Floyd、Dijkstra算法求解最短路径(JavaScript实现)
使用 JavaScript 基于邻接表实现了图的深度、广度遍历,以及 Floyd、Dijkstra 算法求解最短路径。另外使用 SVG 实现图的遍历可视化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图论</title原创 2018-05-25 11:21:02 · 2325 阅读 · 2 评论 -
数据结构-基于邻接矩阵实现图的遍历可视化及使用Floyd、Dijkstra算法求解最短路径(JavaScript实现)
使用 JavaScript 基于邻接矩阵实现了图的深度、广度遍历,以及 Floyd、Dijkstra 算法求解最短路径。另外使用 SVG 实现图的遍历可视化。一、输入首先,输入数据主要有两个,一个是存放节点名的数组,另一个是存放边对象的数组。例如://存放图结点的数组var graphVertex = ["v0","v1","v2","v3","v4","v5","v6&原创 2018-05-25 11:16:08 · 2232 阅读 · 0 评论 -
JavaScript继承
主要介绍JavaScript几种经典继承模式原理,以及他们的优缺点。一. 原型链原理:使用父类的示例重写子类的原型。实现:function SuperType(){ this.property = true;}SuperType.prototype.getSuperValue = function(){ return this.property;};function SubType()...原创 2018-05-25 10:45:42 · 260 阅读 · 0 评论 -
数据结构-树的遍历可视化(JavaScript实现)
使用JavaScript实现树的深度优先遍历(前序和后序)、广度优先遍历(层序),分别使用递归和非递归的方式实现。注:a. 非递归实现效率高,代码可读性较差;b. 递归代码写出来思路清晰,可读性强,但效率较低,且递归的次数受堆栈大小的限制,容易发生堆栈溢出。 以下代码使用SVG 实现树的遍历可视化:<!DOCTYPE html><html><head lang="...原创 2018-05-20 19:52:56 · 3318 阅读 · 1 评论 -
数据结构-字符串模式匹配BF和KMP算法(Javascript实现)
模式匹配是数据结构中字符串的一种基本运算,给定一个子串,即在某个字符串中找出与该子串相同的所有子串的过程。例如,在主串S= "abcdacde" 中找出子串 T = "cd", 找到子串后返回在主串中子串所在的位置索引 [2, 5]。 一、朴素的模式匹配算法(BF) 算法思想:从目标串的的第一个字符起与模式串的第一个字符比较,若相等,则继续对字符进行后续的比较,否则...原创 2018-05-20 19:43:10 · 828 阅读 · 0 评论 -
数据结构-栈和队列(Javascript实现)
用顺序结构和链式结构分别实现栈和队列一、栈实现顺序栈和链栈的插入、删除、获取栈顶等方法(function(){var Stack = function(){ var arr = []; //压栈 var push = function(node){ arr[arr.length] = node; } //弹栈 var pop = function(){ var top = a...原创 2018-05-20 19:13:55 · 349 阅读 · 0 评论 -
数据结构-线性表(Javascript实现)
使用JavaScript实现链表的插入、删除、求长度等方法。"use strict"//结点类var Node = function(){ this.data = null; this.next = null;}//链表类var LinkList = function(){ var first = new Node(); //计算链表长度 var length = functi...原创 2018-05-20 19:05:43 · 527 阅读 · 0 评论 -
SVG的使用
一、SVG简介简介:SVG 是使用 XML 来描述二维图形和绘图程序的语言。 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类...转载 2018-05-07 09:47:38 · 302 阅读 · 0 评论 -
Canvas 和 SVG 对比
Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了。svg并不是html5专有的标签,最初svg是用xml技术(超文本扩展语言,可以自定义标签或属性)描述二维图形的语言。在H5中看似canvas与svg很像,但是,他们有巨大的差别。SVG:SVG...转载 2018-05-07 09:14:07 · 3821 阅读 · 0 评论 -
从输入URL到浏览器显示页面的详细过程
一般可分为如下 7 个步骤:1、浏览器中输入网址。2、发送至 DNS 服务器并获得域名对应的 WEB 服务器的 ip 地址。DNS 解析首先会从你的浏览器的缓存中去寻找是否有这个网址对应的 IP 地址,如果没有就向OS系统的 DNS 缓存中寻找,如果没有就是路由器的 DNS 缓存, 如果没有就是 ISP 的DNS 缓存中寻找。所以,缓存的寻找过程就是: 浏览器 -> 系统 -> 路由器...原创 2018-05-13 16:59:14 · 1505 阅读 · 0 评论 -
跨域技术
1)跨域源资源共享(CORS,Cross-origin resource sharing)它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。浏览器将CORS请求分成两类:简单请求和非简单请求简单请求浏览器一旦发现CORS简单请求,就会在头信息中添加一个Origin字段,包含请求页面的源信息(协议+域名+端口),...原创 2018-05-13 16:45:20 · 407 阅读 · 0 评论 -
浏览器渲染页面的过程
浏览器渲染页面的过程:浏览器会将HTML解析成一个DOM树,DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。(更具体的解析HTML过程看上一篇博客:https://blog.csdn.net/Alan_1550587588/article/details/80297765)将CSS解析成 CSS Rule Tree(css规则树) 。解析完...原创 2018-05-13 15:55:17 · 599 阅读 · 0 评论 -
前端方向有用的教程链接整理
ES6 语法:教程 Babel:教程 React:教程,示例库 Webpack:教程 React 项目脚手架:代码库 Flex 布局:教程,示例 CSS Modules:教程,示例库 React-Router:教程,示例库 Flux 架构:教程,示例库 Redux 架构:教程一、教程二、教程三 ...原创 2018-07-25 08:57:15 · 354 阅读 · 0 评论