前端常见的面试题

最近整理的几道常见的面试题
1.px和em的区别？
答:px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。

2.BFC是什么?
答:BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

3.html语义化是什么？
答:当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于seo优化，利于被搜索引擎收录（更便于搜索引擎的爬虫程序来识别）
便于项目的开发及维护，使html代码更具有可读性，便于其他设备解析。

4.HTML与XHTML——二者有什么区别？
答:1. 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 “–”
8. 图片必须有说明文字

5.哪些css属性可以继承？
答：可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

6.css优先级算法如何计算？
答： !important > id > class > 标签
!important 比 内联优先级高
优先级就近原则，样式定义最近者为准;
以最后载入的样式为准;

7.例举3种强制类型转换和2种隐式类型转换?
答:强制（parseInt(),parseFloat(),Number()）
隐式（== ,!!）

8.javascript的同源策略
答：一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机域名、协议和端口号的组合
同源策略带来的影响:它影响了与BOM,DOM间的交互.如:不可以访问不同来源的任何页面的document对象,也就是说不能访问其中任何DOM结构.

9.CSS3有哪些新特性？
答：1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
3. 增加了更多的CSS选择器 多背景 rgba
4. 在CSS3中唯一引入的伪元素是 ::selection.
5. 媒体查询，多栏布局
6. border-image

10.html5有哪些新特性
答：
7. 拖拽释放(Drag and drop) API
8. 语义化更好的内容标签（header,nav,footer,aside,article,section）
9. 音频、视频API(audio,video)
10. 画布(Canvas) API
11. 地理(Geolocation) API
12. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
13. sessionStorage 的数据在浏览器关闭后自动删除
14. 表单控件，calendar、date、time、email、url、search
15. 新的技术webworker, websocket, Geolocation

11.请描述一下cookies，sessionStorage和localStorage的区别？
答:
⒈localStorage长期存储数据，浏览器关闭数据后不丢失；
⒉sessionStorage数据在浏览器关闭后自动删除；
⒊cookie是网站为了标识用户身份而存储在用户本地终端（Client Side）上的数据（通常经过加密）。cookie始终在同源的http请求中携带（即使不需要）都会在浏览器和服务器端间来回传递。session storage和local storage不会自动把数据发给服务器，仅在本地保存；
⒋存储大小：cookie数据大小不会超过4K，session storage和local storage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或者更多；
⒌有期时间：local storage存储持久数据，浏览器关闭后数据不丢失，除非自动删除数据。session storage数据在当前浏览器窗口关闭后自动删除。cookie 设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭；

12.如何解决跨域问题?
答：理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许ajax跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建script标签，使用标签的src属性访问js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案

13.阐述一下异步加载。
答：

1. 异步加载的方案： 动态插入 script 标签
2. 通过 ajax 去获取 js 代码，然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe，让它异步执行 js

14.GET和POST的区别，何时使用POST？
答：GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：
5. 无法使用缓存文件（更新服务器上的文件或数据库）
6. 向服务器发送大量数据（POST 没有数据量限制）
7. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

前端概括性问题

1.加班的看法
答：加班就像借钱，原则应当是------救急不救穷

2.那些操作会造成内存泄漏？
答：内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

3.如何优化网页加载速度？
答： 1.减少css，js文件数量及大小(减少重复性代码，代码重复利用)，压缩CSS和Js代码
2.图片的大小
3.把css样式表放置顶部，把js放置页面底部
4.减少http请求数
5.使用外部 Js 和 CSS

4.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
答: 前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js，前端可以实现服务端的一些事情
前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
参与项目，快速高质量完成实现效果图，精确到1px；
与团队成员，UI设计，产品经理的沟通；
做好的页面结构，页面重构和用户体验；
处理hack，兼容、写出优美的代码格式；
针对服务器的优化、拥抱最新前端技术。

5.Node.js的适用场景？
答：1)、实时应用：如在线聊天，实时通知推送等等（如socket.io）
2)、分布式应用：通过高效的并行I/O使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）