前端问题汇总

作者: 雪落丶 | 来源:发表于2016-11-28 15:21 被阅读0次

HTML和CSS问题

1，每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

2，为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

3，简述一下src与href的区别。

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
href是Hypertext Reference的缩写，指向网络资源所在位置

4，超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

5，css中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing的妙用知道有哪些么？
答案:可以用于消除inline-block元素间的换行符空格间隙问题。

6，Sass、LESS是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算，函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助 Node.js)。
为什么要使用它们？
结构清晰，便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

7，为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏览器之间的显示差异
但是初始化CSS会对搜索引擎优化造成小影响

8，BFC是什么?

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

9，html语义化是什么？

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

10，Doctype的作用？严格模式与混杂模式的区别？

<!DOCTYPE>用于告知浏览器该以何种模式来渲染文档
严格模式下：页面排版及JS解析是以该浏览器支持的最高标准来执行
混杂模式：不严格按照标准执行，主要用来兼容旧的浏览器，向后兼容

11，html常见兼容性问题？

1.双边距BUG float引起的使用display
2.3像素问题使用float引起的使用dislpay:inline-3px
3.超链接hover 点击后失效使用正确的书写顺序 link
visited hover active
4.Ie z-index问题给父级添加position:relative
5.Png 透明使用js代码改
6.Min-height 最小高度！Important 解决’
7.select 在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter:
alpha(opacity=60); /* for IE5-7 /
-ms-filter:
"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; / for IE 8*/
}
10 . IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

12，对WEB标准以及W3C的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维
护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；

javascript基础

1，JSON数据格式转换

对象转化成字符串 Stringify（），字符串转化成json对象 JSON.parse（）；

2，闭包是什么？

闭包就是在一个函数中，调用另一个函数，里面的函数就形成了闭包，闭包限定了一定的作用域，保证里面的变量不会被释放出来。
缺点：滥用闭包会造成内存泄漏，因此包裹函数内部的变量就永远不会被释放出来，所以我们需要在必要的时候，及时释放这个闭包函数。

3，如何阻止事件冒泡和默认事件

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9之前
阻止默认事件：
为了不让a点击之后跳转，我们就要给他的点击事件进行阻止
return false ；
e.preventDefault();

4，怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

5，document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js
window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件
Document.ready原生种没有这个方法，jquery中有 $().ready(function)，文档加载完成后就执行ready事件

6，把两个数组合并，并删除第二个元素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

reverse（）；颠倒数组顺序

7，documen.write和innerHTML 的区别？

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

8，split() join() 的区别

答：前者是切割成数组的形式，后者是将数组转换成字符串

9，数组方法pop() ，push() ， unshift() ，shift()各表示什么意思？

答：Push()尾部添加、pop()尾部删除、Unshift()头部添加、shift()头部删除

10，HTTP协议中，GET和POST有什么区别？分别适用什么场景？

get传送的数据长度有限制，post没有
get通过url传递，在浏览器地址栏可见，post是在报文中传递
适用场景：
post一般用于表单提交
get一般用于简单的数据查询，严格要求不是那么高的场景

11，HTTP状态消息200302 304 403 404 500分别表示什么

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

12，请列举js数组类型中的常用方法方法描述

concat()，连接两个或更多的数组，并返回结果。
join()，把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()，删除并返回数组的最后一个元素
push()，向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()，颠倒数组中元素的顺序。
shift()，删除并返回数组的第一个元素
slice()，从某个已有的数组返回选定的元素
sort()，对数组的元素进行排序
splice()，删除元素，并向数组添加新元素。
toSource()，返回该对象的源代码。
toString()，把数组转换为字符串，并返回结果。
toLocaleString()，把数组转换为本地数组，并返回结果。
unshift()，向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()，返回数组对象的原始值

13，主流浏览器内核

IE trident 火狐gecko 谷歌苹果webkit Opera：Presto

14，程序中捕获异常的方法？

window.error
try{}catch(){}finally{}

15，CSS3有哪些新特性？

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

16，H5新特性：

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

17，简述ajax 的过程。

创建XMLHttpRequest对象,也就是创建一个异步调用对象
创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
使用JavaScript和DOM实现局部刷新

18，解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

19，ajax请求时，如何解释json数据

使用eval() 或者JSON.parse() 鉴于安全性考虑，推荐使用JSON.parse()更靠谱，对数据的安全性更好。

20，js延迟加载的方式有哪些？

方案一：<script>标签的async="async"属性（详细参见：script标签的async属性）
方案二：<script>标签的defer="defer"属性
方案三：动态创建<script>标签
方案四：AJAX eval（使用AJAX得到脚本内容，然后通过eval_r(xmlhttp.responseText)来运行脚本）
方案五：iframe方式

21，JS 怎么实现一个类。怎么实例化这个类

严格来讲js中并没有类的概念，不过js中的函数可以作为构造函数来使用，通过new来实例化，其实函数本身也是一个对象。

22，javascript继承的 6 种方法？

原型链继承
借用构造函数继承
组合继承(原型+借用构造)
原型式继承
寄生式继承
寄生组合式继承