面试宝典（二）

第1阶段WEB前端B：JS&JQuery基础

1. 请解释一下 JavaScript 的同源策略

a. 同源策略指的是协议，域名，端口相同
b. 同源策略是一种安全协议
c. 指一段脚本只能读取来自同一来源的窗口和文档的属性

1. 一次js请求一般情况下有哪些地方会有缓存处理？

a. 浏览器端存储

b. 浏览器端文件缓存

c. HTTP缓存304

d. 服务器端文件类型缓存

e. 表现层&DOM缓存

1. JavaScript中的“=、==、===”区别？

1. =：即赋值运算；
2. ==：判断两个变量是否相同，仅限于值，如果值相同而类型不同，那么JavaScript引擎会在内部做类型转换；
3. ===：判断两个变量是否相同，无论是值还是类型，如果类型不同而值相同，也会返回false，而引擎不会在内部进行转换。

1. JavaScript中的“undefined、null”区别?
   1. undefined出现的原因是JavaScript引擎不知道这是个什么东西，而对于null，JavaScript引擎识别了它，但是没有被分配内存空间。
   2. undefined的类型就是undefined，而null的类型是object
2. 简述javascript的作用域和闭包?

1. js变量的作用域是指：函数内定义的局部变量只在此函数内有效，而全局变量可以全局有效。
2. 闭包的作用就在于能够改变局部变量的作用域，将值保存下来，但是如果使用不当会造成无法回收变量，引起性能问题，甚至崩溃
3. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件_gaoshanwudi的专栏-CSDN博客_闭包特性

1. javascript的typeof返回哪些数据类型？

1. Object
2. Number
3. Function
4. Boolean
5. Underfind
6. string

1. split() join() 的区别？
   1. 1. 前者是切割成数组的形式
      2. 后者是将数组转换成字符串
2. 数组方法pop() push() unshift() shift() 的作用？

1. Push()尾部添加
2. pop()尾部删除
3. Unshift()头部添加
4. shift()头部删除

1. javascript的本地对象，内置对象和宿主对象？

(扩展：JavaScript中的本地对象、内置对象和宿主对象_xiasohuai的博客-CSDN博客)

1. 本地对象为array obj regexp等可以new实例化
2. 内置对象为gload Math 等不可以实例化的
3. 宿主为浏览器自带的document,window 等

1. document load 和document ready的区别？

1. load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数

问题是如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响

1. $(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行，在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

1. jQuery 能做什么？

1. 获取页面的元素
2. 修改页面的外观
3. 改变页面大的内容
4. 响应用户的页面操作
5. 为页面添加动态效果
6. 无需刷新页面，即可以从服务器获取信息
7. 简化常见的javascript任务

1. 你使用过哪些数据格式，它们各有什么特点？

1. HTML格式，JSON格式，javascript格式，XML格式
2. HTML片段提供外部数据一般来说是最简单的
3. 如果数据需要重用，而且其他应用程序也可能一次受到影响，那么在性能和文件大小方面具有优势的JSON通常是不错的选择
4. 当远程应用程序未知时，XML则能够为良好的互操作性提供最可靠的保证

1. 列举你用过的javascript框架，并简述它们的优缺点

1. js框架：jQuery EasyUI、ExtJS、Bootstrap、AngularJS等等。
2. jQuery EasyUI：轻量级web前端ui开发框架，尤其适合MIS系统的界面开发，能够重用jquery插件。
3. ExtJS：统一的前端UI开发框架，学习难度中等。尤其适合MIS系统的界面开发，开发文档和例子代码都比较完整。缺点是大量的js脚本，降低了运行速度。
4. Bootstrap：响应式网站开发框架，优点是降低了后端开发人员开发前端页面的难度，统一了界面风格，缺点是界面风格比较单一。
5. AngularJS：将java后端的优秀特性引入到了js前端，大而全的框架。缺点是学习曲线高，Angular2几乎重写。

1. XML 与 HTML 的主要区别？

1. XML是区分大小写字母的，HTML不区分
2. 在HTML中，如果上下文清楚地显示出段落或者列表键在何处结尾，那么你可以省略</p>或者</li>之类的结束 标记。在XML中，绝对不能省略掉结束标记

HTML：<img src="1.jpg"><br><br>

XML：<img src="1.jpg"></img><br/><br/>

1. 在XML中，拥有单个标记而没有匹配的结束标记的元素必须用一个 / 字符作为结尾。这样分析器就知道不用 查找结束标记了
2. 在XML中，属性值必须分装在引号中。在HTML中，引号是可用可不用的
3. 在HTML中，可以拥有不带值的属性名。在XML中，所有的属性都必须带有相应的值
4. XML是用来存储和传输数据，HTML是用来显示数据
5. 扩展：如果使用了完全符合XML语法要求的HTML，那么就叫做符合XHTML标准。符合XHTML标准的页面有利于SEO

1.  请你谈谈Cookie的弊端

1. 每个特定的域名下最多生成的cookie个数有限制
2. IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie
3. cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
4. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
5. 扩展：浏览器本地存储

在HTML5中提供了sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁，是会话级别的存储

localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

1. web storage和cookie的区别

1. Cookie的大小是受限的
2. 每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽
3. cookie还需要指定作用域，不可以跨域调用
4. Web Storage拥有setItem,getItem等方法，cookie需要前端开发者自己封装setCookie，getCookie
5. Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
6. IE7、IE6中的UserData通过简单的代码封装可以统一到所有的浏览器都支持web storage