《前端面试江湖》读书笔记

原本好久之前就该把前端面试系列的文章更新完，可是本身懒，加上发现网上有些文章确实写的不错，就一直拖着没写。可是有次去图书馆，看到一本书叫《前端面试江湖》，索性找了一个时间，把所有内容整合到一块儿。这里面确定有你不了解的东西，那些东西可以很大程度上提升你的开发效率。这本书2016年5月出的，却还在讲JQuery。因此有些地方我对其进行了补充

如何处理IE和Firefox若是处理事件兼容性

获取事件：

function et(e) {
    let event = window.event || e
}

键盘值的获取：
Firfox下event.which和IE的event.keyCode至关

let key = event.keyCode || event.which

事件源的获取：

let target = event.srcElement || event.target

事件监听:

IE: element.attacthEvent('on' + eventName, function(){})
Firfox: element.addEventListener(eventName, handler, false)

鼠标位置：
在IE下，event对象有x、y属性，在Firfox下，event有PageX, PageY属性
全部获取鼠标位置时：

x = event.x || event.pageX

阻止默认浏览器行为：

e.preventDefault() || event.returnValue = false

阻止冒泡事件：

e.stopPropagation() || event.cancelBubble = true

获取下拉框中选中项的内容

<select id="test" name="">
    <option value="1">text 1</option>
    <option value="2">text 2</option>
</select>

拿到选中项的索引：

let index = document.getElementById('test').selectIndex.

selectIndex表示选中项的index

在Form表单中get和post方式提交的区别

这个问题一直在争论，我就以为明明一句话解决的问题，非要弄得这么复杂。这是书上的答案：

1. get是从服务器上获取数据，post是向服务器提交数据
2. get是把参数数据提交到表单的action属性所指的URL中，值和表单各个字段一一对应。post是经过HTTP
   post机制，将表单内各个字段和其内容放置在HTML HEADER内一块儿传到action属性所指的URL地址。
3. get传送的数据不能大于2kb，post传送的数据更大，但也有限制。
4. get安全性能很是低，post安全性较高
5. get限制Form表单的数据集的值必须为ASCII字符，而post支持整个ISO10646字符集。

AJAX的简单实现

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
            alert(xhr.responseText)
        } else {
            alert('unsuccessful:' + xhr.status)
        }
    }
}
xhr.open('get', 'example.txt', true)
xhr.send(null)

HTTP协议状态码

具体内容看看MDN，这里就懒的写了
1xx: 信息
2xx: 成功
3xx：重定向
4xx：客户端错误
5xx：服务器错误

JavaScript如何获得HTTP的请求头信息和返回的信息

getResponseHeader从响应信息中返回指定的http信息
getAllResonponseHeaders 获取响应的全部HTTP头信息

JSONP的简单实现

var Jsonp = document.createElement('script')
// Firfox: onload, IE: onreadyStatechange
Jsonp.onload = Jsonp.onreadyStatechange = function () {
    if (!this.readyState || this.readyState === 'loaded'
        || this.readyState === 'complete') {
        alert($('#demo').html())
        // 清理防止IE内存泄露
        Jsonp.onload = Jsonp.onreadyStatechange = null
    }
}
Jsonp.type = 'text/javascript'
Jsonp.src = 'http://www.xxx.com/JS/JQuery.js'
// 往header里边添加
document.getElementByTagName('head')[0].appendChild(Jsonp)

HTML5和CSS3的了解

一、更多的描述性标签
二、良好的媒体支持
三、更强大的Web应用
四、跨文档信息通讯
五、Web Sockets
六、客户端存储
七、更加精美的页面
八、更强大的表单
九、提高可访问性
十、先进的选择器
十一、视觉效果

如何触发页面的reflow, repaint

除了页面在首次加载时必然要经历该过程以外，还有如下行为会触发这个行为：
１、dom元素的添加、修改、删除。(这就是为何避免dom元素的修改，由于reflow和repaint最耗性能)
二、仅修改DOM元素的字体颜色（只有repaint,由于不须要调整布局）
三、应用新的样式或者修改任何影响元素外观的属性
四、resize浏览器窗口，滚动页面
五、读取元素的某些属性

localStorage对象的经常使用方法

存储：localStorage.setItem(key, value)
获取：localStorage.getItem(key)
删除：localStorage.removeItem(key)
所有删除：localStorage.clear()

cookie、sessionStorage和localStorage的区别

cookie数据始终在同源的HTTP请求中携带。而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path)的概念，能够限制cookie只属于某个路径下。

存储大小限制不一样，cookie数据不能超过4KB,同时由于每次HTTP请求都会携带cookie,因此cookie只适合保存很小的数据。sessionStorage和localStorage也有存储限制，可是要大的多

数据有效期不一样: sessionStorage:仅在当前浏览器窗口关闭前有效。localStorage:始终有效，窗口或浏览器关闭也一直保存。cookie:只要在设置的cookie过时时间以前一直有效
做用域不一样：sessionStorage不在不一样的浏览器窗口中共享(咱们能够不能够经过使用sessionStorage实现跨域).localStorage在全部同源串口都是共享的。cookie在全部同源窗口都是共享的。

前端角度作好SEO

一、CSS Sprites: 通俗来说就是图片合并，能够把网站中一些比较通用的小图，合并到一张大图上
二、启用keep-alive属性：Keep-Alive能够理解为长链接。启用connection的Keep-Alive属性以外，这个链接能保持一段时间，从而提升页面加载的速度
三、启用浏览器缓存，能够用缓存技术来提升页面的加载速度
四、启用GZIP压缩

提升前端性能

一、用Web Storage替换cookie
二、使用css动画代替JavaScript动画
三、使用客户端数据库
四、使用JavaScript的新功能
五、使用硬件加速

若是浏览器没有安装网页上所设置的文字，能够怎么作

@font-face {font-family: name; src: url(url); sRules}

sRules样式表定义

谈谈对前端安全的理解，有什么，怎么防范

前端安全问题主要有XSS、CSRF攻击
XSS：跨站脚本攻击
它容许用户将恶意代码植入到提供给其余用户使用的页面中，能够简单的理解为一种javascript代码注入。
XSS的防护措施：
过滤转义输入输出
避免使用eval、new Function等执行字符串的方法，除非肯定字符串和用户输入无关
使用cookie的httpOnly属性，加上了这个属性的cookie字段，js是没法进行读写的
使用innerHTML、document.write的时候，若是数据是用户输入的，那么须要对象关键字符进行过滤与转义
CSRF：跨站请求伪造
其实就是网站中的一些提交行为，被黑客利用，在你访问黑客的网站的时候进行操做，会被操做到其余网站上
CSRF防护措施：
检测http referer是不是同域名
避免登陆的session长时间存储在客户端中
关键请求使用验证码或者token机制
其余的一些攻击方法还有HTTP劫持、界面操做劫持

实现继承的方法

使用prototype的方法并非很好，很容易出错，建议使用ES6的class。但这里不讲，由于有些老项目没用ES6，因此了解prototype还有有必要的
借用构造函数实现继承：

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}

借用原型链实现继承：

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();

组合式继承：

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;

建立对象的方法(摘自《高级程序设计》)：

工厂模式：

function cratePerson (name, age, job) {
    var o = new Object(
    o.name = name 
    o.age = age 
    o.job = job 
    o.sayName = function () {
        alert(this.name)
    }
    return o 
}

var person1 = cratePerson('Greg', 27, 'Doctor')

构造函数：

function Person (name, age, job) {
    this.name = name 
    this.age = age 
    this.job = job 
    this.sayName = function () {
        alert(this.name )
    }
}

var person1 = cratePerson('Greg', 27, 'Doctor')

原型模式：

function Person () {
}

Person.prototype.name = 'Greg'
Person.prototype.age = 18
Person.prototype.job = 'Doctor'
Person.prototype.sayName = function () {
    alert(this.name)
}
var person1 = new Person()
person1.sayName()   // Greg

本文只讲了一些理论性的知识，不多涉及编程。编程的部分我决定使用leetcode习题的方式进行讲解
o)由于这个不太好单独写一篇博客来进行讲解。请关注个人github了解实时的进度