前端知识杂谈
整理一些常用前端知识点，忘记的时候可以翻出来回忆下
浏览器渲染
从输入网址到显示网页的过程分析
1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。
2、浏览器与服务器建立TCP连接（默认端口80）(详细点可以说下三次握手的过程)
3、应用层客户端发送HTTP请求。
4、服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码（200-300，成功；304使用缓存）。
5、服务器返回相应文件给浏览器。
6、Tcp连接释放(可以说下四次挥手的过程)。
7、浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。
H5 新特性
- 语义化标签：header、footer、section、nav、aside、article
- 增强型表单：input 的多个 type
- 新增表单元素：datalist、keygen、output
- 新增表单属性：placehoder、required、min 和 max
- 音频视频：audio、video
- 绘画：canvas
- 地理定位：geolocation
- 拖拽：drag事件+dataTransfer+FileReader
- 本地存储：localStorage - 没有时间限制的数据存储；sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
- 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
- WebSocket：单个 TCP 连接上进行全双工通讯的协议
前端安全问题
CSRF
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。
你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。
- 检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；
- 对于任何重要的请求都需要重新验证用户的身份；
- 创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。
XSS
XSS的预防可以从多方面着手：
xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。
（1）如前面所述，浏览器自身可以识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；
（2）从根本上说，解决办法是消除网站的XSS漏洞，这就需要网站开发者运用转义安全字符等手段，始终把安全放在心上；
（3）对于普通网民，需要注意尽量抵挡诱惑，别去点击非知名网站的链接。
协议
http
CSS
CSS3 新特性
- 选择器
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画、过渡
- 多列布局
- 用户界面
两栏分布
第一种采用calc；
第二种采用:都设置position:absolute; 然后设置右边的left:309px; width:auto;
JavaScript
this指向
js中this的一般再函数中使用，但它的指向要小心了，this永远指向的是最后调用它的对象
系统提供修改this指向的方法是new,每当new一个实例时，系统会自动修改this指向
我们也可以手动修改this指向，通过call,apply,bind方法，三者第一个参数都是this要指向的对象，也就是想指定的上下文
- call： 立即调用，第二个参数按顺序传递
- apply： 立即调用，第二个参数放在数组里
- bind：返回对应函数，便于稍后调用；
柯里化
高阶函数：英文叫Higher-order function，即将函数作为参数的函数
柯里化：英语叫Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。是高阶函数的一种一个特殊用法。
// 普通的add函数
function add(x, y) {
return x + y
}
// Currying后
function curryingAdd(x) {
return function (y) {
return x + y
}
}
add(1, 2) // 3
curryingAdd(1)(2) // 3好处
- 参数复用
- 提前确认
- 延迟运行
经典面试题
// 实现一个add方法，使计算结果能够满足如下预期：
add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
function add() {
// 第一次执行时，定义一个数组专门用来存储所有的参数
var _args = Array.prototype.slice.call(arguments);
// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
var _adder = function() {
_args.push(...arguments);
return _adder;
};
// 利用toString隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
_adder.toString = function () {
return _args.reduce(function (a, b) {
return a + b;
});
}
return _adder;
}
add(1)(2)(3) // 6
add(1, 2, 3)(4) // 10
add(1)(2)(3)(4)(5) // 15
add(2, 6)(1) // 9ES6 新特性
1、关键字: let 和 const
let声明的变量只在 let 命令所在的代码块内有效，不可提升变量，不能重复定义
const声明一个只读的常量，一旦声明，常量的值就不能改变。