前端面试题小结

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

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状态时，不知道处于哪个阶段。

扫描二维码关注公众号，回复： 4987664 查看本文章

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

猜你喜欢