资讯专栏INFORMATION COLUMN

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

snowell / 2093人阅读

摘要:本来很久以前就该把前端面试系列的文章更新完,但是自己懒,加上发现网上有些文章确实写的不错,就一直拖着没写。但是有次去图书馆,看到一本书叫前端面试江湖,索性找了一个时间,把全部内容整合到一起。

本来很久以前就该把前端面试系列的文章更新完,但是自己懒,加上发现网上有些文章确实写的不错,就一直拖着没写。但是有次去图书馆,看到一本书叫《前端面试江湖》,索性找了一个时间,把全部内容整合到一起。这里面肯定有你不了解的东西,那些东西能够很大程度上提高你的开发效率。这本书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
获取下拉框中选中项的内容

拿到选中项的索引:

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

selectIndex表示选中项的index

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

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

get是从服务器上获取数据,post是向服务器提交数据

get是把参数数据提交到表单的action属性所指的URL中,值和表单各个字段一一对应。post是通过HTTP
post机制,将表单内各个字段和其内容放置在HTML HEADER内一起传到action属性所指的URL地址。

get传送的数据不能大于2kb,post传送的数据更大,但也有限制。

get安全性能非常低,post安全性较高

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的了解

1、更多的描述性标签
2、良好的媒体支持
3、更强大的Web应用
4、跨文档信息通信
5、Web Sockets
6、客户端存储
7、更加精美的页面
8、更强大的表单
9、提升可访问性
10、先进的选择器
11、视觉效果

如何触发页面的reflow, repaint

除了页面在首次加载时必然要经历该过程之外,还有以下行为会触发这个行为:
1、dom元素的添加、修改、删除。(这就是为什么避免dom元素的修改,因为reflow和repaint最耗性能)
2、仅修改DOM元素的字体颜色(只有repaint,因为不需要调整布局)
3、应用新的样式或者修改任何影响元素外观的属性
4、resize浏览器窗口,滚动页面
5、读取元素的某些属性

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

1、CSS Sprites: 通俗来讲就是图片合并,可以把网站中一些比较通用的小图,合并到一张大图上
2、启用keep-alive属性:Keep-Alive可以理解为长连接。启用connection的Keep-Alive属性之外,这个连接能保持一段时间,从而提高页面加载的速度
3、启用浏览器缓存,可以用缓存技术来提高页面的加载速度
4、启用GZIP压缩

提高前端性能

1、用Web Storage替换cookie
2、使用css动画代替JavaScript动画
3、使用客户端数据库
4、使用JavaScript的新功能
5、使用硬件加速

如果浏览器没有安装网页上所设置的文字,可以怎么做
@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了解实时的进度

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90124.html

相关文章

  • 前端面试江湖读书笔记

    摘要:本来很久以前就该把前端面试系列的文章更新完,但是自己懒,加上发现网上有些文章确实写的不错,就一直拖着没写。但是有次去图书馆,看到一本书叫前端面试江湖,索性找了一个时间,把全部内容整合到一起。 本来很久以前就该把前端面试系列的文章更新完,但是自己懒,加上发现网上有些文章确实写的不错,就一直拖着没写。但是有次去图书馆,看到一本书叫《前端面试江湖》,索性找了一个时间,把全部内容整合到一起。这...

    canopus4u 评论0 收藏0
  • CSS技巧

    摘要:技巧使你的更加专业这是上关于技巧的一篇译文,另外你也可以在本项目看到原文。列举了一些很实用的技巧,比如给空内容的标签添加内容,逗号分隔列表等等。排序算法看源码,把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。 成为专业程序员路上用到的各种优秀资料、神器及框架 成为一名专业程序员的道路上,需要坚持练习、学习与积累,技术方面既要有一定的广度,更要有自己的深度。 Java...

    DangoSky 评论0 收藏0
  • CSS技巧

    摘要:技巧使你的更加专业这是上关于技巧的一篇译文,另外你也可以在本项目看到原文。列举了一些很实用的技巧,比如给空内容的标签添加内容,逗号分隔列表等等。排序算法看源码,把它背下来吧排序算法的封装。主要帮助初学者更好的掌握排序算法的实现。 成为专业程序员路上用到的各种优秀资料、神器及框架 成为一名专业程序员的道路上,需要坚持练习、学习与积累,技术方面既要有一定的广度,更要有自己的深度。 Java...

    zgbgx 评论0 收藏0
  • CSS技巧 - 收藏集 - 掘金

    摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...

    Jonathan Shieber 评论0 收藏0

发表评论

0条评论

snowell

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<