同花顺前端面试题

—介绍DOM结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <input type="text" name="input" id="input" value="121" />
	 <input type="button" onclick="getInputValue()" value="输入按钮">
</body>
<script>
	function getInputValue(){
	}
</script>
</html>

css内容合并
grunt！！！

JS写在上面和下面的区别
写在下面可以防止html css资源被阻塞

前端缓存机制
作用：
1：减少磁盘IO
2：存储临时结果
3:存储高频访问的数据

缓存机制：
数据库端缓存：在一张表上建立新表，存储高频数据或者统计数据，读操作是读取新表，写操作时再一并更新表和新表。
应用层缓存，和前端没啥大关系。
前端缓存：主要是采用CDN缓存，将图片，css，js，html静态资源放在CDN上，使用squid等缓存技术。
客户端缓存：使用本地缓存机制

cdn缓存的好处
存放静态资源
解决高容量高并并发为题
解决南北的电信和联通服务商之间传输延迟问题
减小网站主服务器的压力
防止DDOS攻击
提高访问时间和运营成本

post get区别
今天学习了pst和get区别，挺有意思的，来源：cnblog.
http定义了与服务器交互的方式。将url想象成一条sql语句，那么put delte post get则分别对应增、删、改、查
历史+实际，最后最常用的只有post和get方法
get：单纯查询数据，安全+幂等
get的数据格式：
以百度搜索url为例子：
https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=2&tn=baidutop10&wd=URL%20post%20get%E4%B8%AA%E6%95%B0%E9%99%90%E5%88%B6&oq=http%25E8%25BF%2594%25E5%259B%259E%25E7%258A%25B6%25E6%2580%2581%25E7%25A0%2581&rsv_pq=b522bb6400015c33&rsv_t=58fdbr6CSYjGurXtrLvz7qjxNAZYLfpiF%2F2xFuskEGyAyO5iLrEyKIIh20Cb%2B62jLQ&rsv_enter=0&inputT=774&rsv_n=2&rsv_sug3=36&prefixsug=URL%2520post%2520get%25E4%25B8%25AA%25E6%2595%25B0%25E9%2599%2590%25E5%2588%25B6&rsp=0&rsv_sug4=774
？分隔url和get数据
&连接参数
英语+数字：原样发送
空格：+
汉字或者其他字符：base64加密，%形式发送
get最大长度？
get本身没有长度限制，有长度限制的是url.IE对url限制：2K+35，其他浏览器，看具体情况了。
post最大长度？
post本身没有大小限制的，有限制的是服务器处理接口的限制。

form表单post和get问题
get：向服务器请求数据
post：想服务器发送数据
form表单默认是get

http返回状态码
1：请求临时响应，程序需要进一步操作
2：服务器成功响应了请求
3:重定向
4:请求错误
5:服务器错误
9:自定义错误

rel=follow vs rel=nofollow
seo优化，参照cnblog.
nofollow有两种用法：
1.用于meta元标签：<meta name="robots" content="nofollow" />，告诉爬虫该页面上所有链接都无需追踪。
2.用于a标签：<a href="login.aspx" rel="nofollow"></a>,告诉爬虫该页面无需追踪。

js笔试题

笔试时遇到这样一题：
js once函数。
通过js来实现一个函数once，这个函数在整个应用运行的时候只被访问一次。如果再次访问就会访问上次的执行结果。
当时写了类似的方法，网上找了一个思路类似，但更漂亮一些的代码。

1
2
3
4
5
6
7
8
9
10
11
12
var instance;
function once(src){
	var num = Math.random();
	function init(){
		return num;
	}
	if(!instance)
		instance = init();
	return instance;	
}
console.log(once());
console.log(once());

应付面试题，答案已经有了，但是这里定义了一个全局变量，其实，不是我很想看到的，那么有没有非全局变量的方式呢？

撸一个script代码，检测页面上输入框，内容是A-Z，a-z是不改变，其他内容是输入框背景颜色变成红色。
难点，js代码，不能用jquery，正则表达式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	 <input type="text" name="input" id="input" value="121" />
	 <input type="button" onclick="getInputValue()" value="输入按钮">
</body>
<script>
	function getInputValue(){
		var value = document.getElementById("input").value;
		//reg表达式多打磨打磨
		var reg = /^[A-Za-z]+$/; 
		if(!reg.test(value))
		//哎，笔试的时候把js写法和jquery写法混淆了
		document.getElementById("input").style.background = 'red';
		else
			alert('输入正确');
	}
</script>
</html>

js正则表达式
老秦课上Reg挺得云里雾里，尼玛现实中发现真是好用啊。可惜好用有什么用？哥又不会。。。。

跨域请求

js同源策略：js脚本只能读取同一源的窗口和文档信息。同一源：相同url:协议+域名+端口

安全性。
不同源请求会出现js跨域请求。不能使用ajax访问不同源文档
1：jsonp跨域

1
2
3
4
5
6
7
8
9
10
11
<script>
	function foo(jsondata){
		//do something
	}
	<script src = 'url/data.php?callback=foo'></script>
</script>
<?php
	$callback = $_GET('callback');
	$data = array('12121212');
	echo $callback('.json.encode($data).')
?>

script src引入url，callback返回数据。就可以访问data了。

2：修改document.domain来实现跨子域

3：window.name实现跨域
4：html5：window.postMessage实现跨域

参考：http://www.cnblogs.com/2050/p/3191744.html

hexo markdown支持表格

今天遇到md编写表格问题。本地预览无法正确显示表格。又是一番折腾。不过倒是理清楚了很多思路。
github page原生支持Jekyll,使用的md解析器是redcarpet，但是hexo不支持啊。hexo的做法，现在本地安装各种modules插件，然后一句hexo generate生成pulic文件夹。public里是纯网页文本。上传到repository中即可。

hexo使用hexo-renderer-marked解释器，开启支持tables，配置_comfig.yml文件：

1
2
3
4
5
6
7
8
marked:
  gfm: true
  pedantic: false
  sanitize: false
  tables: true
  breaks: true
  smartLists: true
  smartypants: true

ps:再次吐槽一下yml语法，marked前面不能有空格，联系到：后面必须有空格。想一想也是醉了。

but，wait，配置好了，刷新页面，为什么还是无法显示表格？
联想到grunt watch文件，只有文件被改动后才会重新解析一遍文件。于是在md中加了个空行。
yes，it worked！
well done！！！

各种面试题

标签（空格分隔）： 数据结构 二叉树

根据守恒定律，智商和情商的总和是守恒的。你的高情商高智商和我的低情商低智商维持了世界和平。

##二叉树

一颗只有左右子节点的数。n层二叉树节点最大个数：2^n-1

###完全二叉树
n层二叉树，n-1层节点全满，第n层节点满足从左往右依次排列。

###平衡二叉树
左右2棵子数高度差小于等于一。

###前序遍历，中序遍历，后序遍历
前序遍历：父节点–>左节点–>右节点
中序遍历：左节点–>父节点–>右节点
后序遍历：左节点–>右节点–>父节点

例：

前序遍历：ABCDEGF
中序遍历：CBEGDFA
后序遍历：CGEFDBA

笔试过程中经常遇到知道2个遍历求第三个遍历
解题思路上，抓住父节点所在的位置，能够画出二叉树，求出第三种遍历。

平衡二叉树面试题
n个节点二叉树，理想二叉树的操作时间是O(logn)，但是极限状态下二叉树变成一条直线时时间变成O(n)，平衡二叉树能够稳定时间在o(logn)

插入新节点，调整二叉树：
(1)LL型。插入位置为左子树的左结点，进行向右旋转


(2)RR型。插入位置为右子树的右孩子，进行向左旋转

(3)LR型。插入位置为左子树的右孩子，要进行两次旋转，先左旋转，再右旋转；第一次最小不平衡子树的根结点先不动，调整插入结点所在的子树，第二次再调整最小不平衡子树。

(4)RL型。插入位置为右子树的左孩子，进行两次调整，先右旋转再左旋转。

哎嘿嘿，发现md语法不支持解析带中文名的img url！！！

哈夫曼树与哈夫曼编码
哈夫曼树：带权路径最短树。
对于给定权值w=（w1，w2…wn）的n个节点哈夫曼树。
从n个节点中选取最小的2个节点wa，wb.计算wa+wb得到新的节点，将wa,wb从w集合中删除，wab插入集合w中
重复进行上述步骤。
假设w = {5,4,3,2,1}构造哈夫曼树
1:

2:

3:

4:

那么，D的霍夫曼编码：011

#DOS攻击。
denial of service.
攻击者向服务器发送大量http请求，阻塞其他用户正常http请求。
好理解：我派一帮流氓堵住了饭店门口，正常客人就进不来吃饭了。
DDOS攻击
由于攻击者势单力薄，单个攻击服务器很难对拥有较大带宽的服务器发送足够多的http攻击，于是采用分布式方式，来，先搞100000台服务器。

cookie vs localStorage vs sessionStorage

特点 cookie localStorage sessionStorage
生命周期 由服务器设置时间，默认在浏览器关闭后失效 永久存储 当前页面关闭页面失效
大小 4K 5M 5M
与服务器通信 每次http请求都携带cookie 无通信，仅存储于客户端 无通信，仅存储于客户端

综上，通常生命周期时间：sessionStorage < cookie < localStorage
因为cookie每次都要携带在http中，所以4K也挺大了。性能优化上可以控制cookie大小。
吐槽一句，md画表格还真是奇葩啊

#javascript模块化开发
js发展状态，代码多了，需要模块化
CommadJS vs AMD
Asynchronous Module Definition 浏览器段开发规范
CommadJS服务端开发规范

搭建github博客走过的路

搭建github博客走过了不少歪路子，就在刚刚还踩了一个坑。
搭建博客用到的相关：gitbash,node.js, hexo,github pages 七牛云存储 md在线编辑器 markdown

不多述流水过程，写一写踩过的坑。

1：node.js npm安装module失败。
原因：缓存问题
删除C:\Users\af\AppData\Roaming\npm-cache文件夹里的全部内容

2:hexo无法编译yml文件

原因：yml语法错误,:后面必须要一个空格

ps，图库来自七牛图云存储，刚刚注册的新用户，挺好用的。

3:gitpages repository命令规则
完整的 repository name是pingfengafei.github.io

4源文件使用md在线编辑器，实时生成预览图，挺好用的。我手指在键盘上飞舞着，配合红轴行云流水的操作，自我陶醉，TM我就是传说中的键盘小王子。兴奋中不能自己，于是习惯性的按`ctrl + s,错误按成了ctrl + w。我想静一静，不要问我静静是谁。

js变量提升

js变量提升是什么？为什么？
和C++、java、C不同，js没用块级作用域
{
var i = 1;
}
console.log(i); // 1

js变量提升：
1：变量申明提升，定义不提升。
2：函数申明提升，定义不提升。因为函数有表达式形式，和函数形式，2者需要分别对待。

1；变量提升

1
2
3
4
5
function foo(){
	console.log(a);
	var a = 10;
}
foo(); //undefined

1
2
3
4
5
6
7
等价于：
	function foo(){
		var a;
		console.log(a);
		 a = 10;
	}
	foo();

ps，如果a没有申明输出结果是：

1
Uncaught ReferenceError: a is not defined

在segmentfault上看到一段挺有趣的代码：

1
2
3
4
5
6
7
8
9
10
var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo); //world

foo 函数内的goo是全局变量

1
2
3
4
5
6
7
8
9
10
var goo = "hello";
function foo(){
  if(true){
    goo = "world";
  }else {
    var goo = "world";
  }
}
foo();
console.log(goo); //hello

感谢变量提升。foo函数等价于：

1
2
3
4
5
6
7
8
9
10
11
12
```javascript
var goo = "hello";
function foo(){
  var goo；
  if(true){
    goo = "world";
  }else {
    goo = "world";
  }
}
foo();
console.log(goo); //hello

这时候foo()内的goo编程了函数内部局部变量。

2:函数提升
函数提升有点意思。众所周知js中函数有2中形式存在。
function foo(){}和var foo = function(){}

1
2
3
4
5
6
7
8
foo(); //1
bar(); //Uncaught ReferenceError: bar is not defined
function foo(){
	console.log(1);
}
var foo = function(){
	console.log(2);
}

可见，普通函数形式被提升，表达式形式的函数不会被提升。

js深度拷贝

仿佛记得几个月前前端面试的时候，被问到js浅拷贝深拷贝问题。直到现在我也没很明白浅拷贝深拷贝具体指代什么。anyway，在高大上名词下技术才是本质。

1
2
3
4
5
var a = 1;
var b = a;
b = 2;
console.log(a);		//1
console.log(b);		//2

js基本变量Underfined，Boolean，Number，String Null是传值复制。但是js对象却是拷贝复制。原因想一想也就明白了，对象和类一样，太占用内存了，js对象复制和C++类似，传递的是指针地址。

1
2
3
4
5
var a = {num : 1};
var b = a;
b.num = 2;
console.log(a.num);		//2
console.log(b.num);		//2

因为b地址指向a，当b属性被更改时，也修改了a属性。

解决方法：深度拷贝。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
	 function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array){   
            buf = [];  //创建一个空的数组 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }else if (Obj instanceof Object){   
            buf = {};  //创建一个空对象 
            for (var k in Obj) {  //为这个对象添加新的属性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{   
            return Obj;   
        }   
    }  

	var a = {a : 1, b : 2};
	var b = clone(a);
	b.a = 3;
	b.b = 4;
	console.log(a.a);       //1
	console.log(a.b);       //2      
	console.log(b.a);       //3
	console.log(b.b);       //4
</script>

Hello gitHub

Welcome to pingfengafei‘s GitHub blog. Thanks GitHub gives me too much to learn.

##写在最前面

终于搭建成功github了。从gitbash到node.js，从npm到hexo，从yml到markdown，一点点查资料，几番折腾终于开始用蹩脚markdown语法写这一篇文章。

博客几番跟新，新浪，csdn，自己买域名空间折腾，繁华过后回头看，自己需要的只是一片净土，偶尔写写静态博客，发发牢骚，足矣。

从第一个东家离职后，终于明白了什么叫做：成长的鸡味！

因为偶然，入了前端坑，入了javascript坑，入了node.js坑。回头才发现前端工程师最近很吃香。我这运气也可以的。

愿努力能给Janet和自己一个美好的明天。