前端面试题小结

前端面试一般会从基础知识切入，主要面试模块有以下几点，我这里总结下频繁被面试的一些知识。

HTML方面
css方面
javascript方面
AJAX方面

HTML

1>简述一下你对 HTML 语义化的理解？
用正确的标签做正确的事情
html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
2>介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout engineer 或 Rendering Engine)和 JS 引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS 引擎则：解析和执行 javascript 来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
3>经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？
(1)png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8.
(2)浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的
*{margin:0;padding:0;}来统一。
(3)IE6 双边距 bug:块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin比设置的大。浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。
接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
(4)IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性;Firefox 下,只能使用 getAttribute()获取自定义属性。
解决方法:统一通过 getAttribute()获取自定义属性。
(5)IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;
Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性。
解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数

(6)超链接访问过后 hover 样式就不出现了被点击访问过的超链接样式不在具有 hover和 active 了解决方法是改变 CSS 属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
4>请描述一下 cookies，sessionStorage 和 localStorage 的区别？
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。
存储大小：
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，
可以达到 5M 或更大。
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

css

1)css盒模型
css盒模型分为标准模型和IE模型,画了两张图比较清晰，眼睛都快亮瞎了呢
在这里插入图片描述

标准模型中，盒模型的宽高只是内容（content）的宽高
在这里插入图片描述

IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。
这里用到了CSS3 的属性 box-sizing设置盒模型

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

2）CSS3 有哪些新特
新增各种 CSS 选择器（: not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-column layout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow、）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放,定位,倾斜,动画,多背景
3)移动端的布局用过媒体查询吗？
请移步官方文档了解下哦 http://www.runoob.com/cssref/css3-pr-mediaquery.html

js

1).什么是闭包（closure）为什么要用它
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是
在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收

<ul id="testUL">
<li> index = 0</li>
<li> index = 1</li>
<li> index = 2</li>
<li> index = 3</li>
</ul>
<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
	nodes[i].onclick = (function(i){
		return function() {
			console.log(i);
		} //不用闭包的话，值每次都是 4
	})(i);
}
</script>

2).call() 和 .apply() 的区别
请参考这篇美文：https://www.cnblogs.com/lengyuehuahun/p/5643625.html

3）请说下你对promise的理解

自己总结了下：
定义:promise是一种异步编程的解决方案，比传统的解决方案更加合理和强大，里面存着某个未来才会结束的事情（即异步操作的结果），各种异步操作都可以用同样的方法进行处理。
特点
1）对象的状态不收外界的影响，promise对象代表一个异步操作，有三种状态，pending(进行中)，fulfilled(已成功)，rejected(失败)【结果决定状态】
2）一旦状态改变就不会再变，任何时候都可以得到这个结果（resolved）
优缺点：
（一）优点
1)避免层层回调，解决解决回调地狱
2)Promise对象提供统一的接口，使得控制异步操作更加容易
（二）缺点
1）无法中途取消promise,一旦建立就会立即执行
2）如果不设置回调函数，promise内部抛出的错误不会反映到外部
3）当处于pengding状态时，不知道处于哪个阶段。

Ajax

1）.简述 ajax 的过程，同步和异步的区别

创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
设置响应 HTTP 请求状态变化的函数
发送 HTTP 请求
获取异步调用返回的数据
使用 JavaScript 和 DOM 实现局部刷新
区别：
1). 执行: request.send()
2). 异步（非阻塞）: 此方法立即返回, 后面立即获取请求结果数据得不到, 只能在监听回调中获取(当结果数据返回后回调)
3). 同步（阻塞）: 此方法不会立即返回, 只有在服务器返回结果才返回, 在后面可以直接获取返回的结果数据, 没有必要再设置监听回调
2）将原生的ajax封装成promise

var  NewAjax=function(url){
  return new Promise(function(resolve,reject){
      var xhr = new XMLHttpRequest();
      xhr.open('get',url);
      xhr.send(data);
      xhr.onreadystatechange=function(){
           if(xhr.status==200&&readyState==4){
                var json=JSON.parse(xhr.responseText);
                resolve(json)
           }else if(xhr.readyState==4&&xhr.status!=200){
                reject('error');
           }
      }
  })
}

3）如何解决跨域（就是jsonp的工作原理）
理解跨域的概念：协议、域名、端口都相同才同域，否则都是跨域
出于安全考虑，服务器不允许 ajax 跨域获取数据，但是可以跨域获取文件内容，所以基于这一点，可以动态创建 script 标签，使用标签的 src 属性访问 js 文件的形式获取js 脚本，并且这个 js 脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案
4）GET 和 POST 的区别，何时使用 POST？
GET：一般用于信息获取，使用 URL 传递参数，对所发送信息的数量也有限制，一般在 2000 个字符，有的浏览器是 8000 个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
在以下情况中，请使用 POST 请求：
7. 无法使用缓存文件（更新服务器上的文件或数据库）
8. 向服务器发送大量数据（POST 没有数据量限制）
9. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

官方的对比表格
在这里插入图片描述
5）HTTP 状态码都有哪些
200 OK //客户端请求成功
301 - 资源（网页等）被永久转移到其它 URL
404 - 请求的资源（网页等）不存在
500 - 内部服务器错误
更详细的请移步这里：http://www.runoob.com/http/http-status-codes.html

以上简单的做了一个知识总结，希望对大家有所帮助，不对之处欢迎各位小伙伴指正

HTML

css

js

3）请说下你对promise的理解

Ajax

猜你喜欢