面试题总结

时间 2019-11-12

标签面试总结栏目快乐工作繁體版

原文原文链接

CSS篇：前端

一、CSS是什么、用来作什么？nginx

答：用于布局与美化页面，是一种标记语言，不须要编译。经过更改CSS代码来改变网页的总体表现形式。web

二、EM、PX、REM的区别？数据库

答：EM：根据一个基点来设置本身的大小，是一个相对值，并不是固定，通常根据父元素属性设置自己大小，与PX换算是：body{font-size=62.5%}。IE6,IE8不支持。apache

PX：就是像素，比较稳定和精确。可是大小被固定了，当浏览器视口改变时，内容不能相对应的改变。canvas

REM：相对于根元素<Html>来设置自身大小，咱们只须要在根元素肯定一个参考值。IE6,IE8不支持。api

三、Doctype的做用？跨域

答：用于声明HTML文档使用哪一种规范（HTML/XHTML）。数组

四、XHTML与HTML有什么区别？浏览器

答：HTML是一种基本的Web设计语言；XHTML是一种基于XML的置标语言。

XHTML更加严格：元素必须被正确嵌套、必须被关闭、标签名必须使用小写、文档必须有根元素。

五、行内元素、块级元素、Void空元素？

答：行内：a、span、i、img、em、select、lable

块级：div、dl、dt、dd、ul、li、p、form、table、h1—h6

Void：br、hr

六、CSS选择器有哪些，优先级？

答：主要为三类：ID》Class》标签

可组合为：后代、子代、群组、伪类、通用

七、CSS盒模型？

答：外边距：margin，边框：border，内边距：padding

八、Display有哪些主要属性，做用？

答：none：隐藏元素；block：元素显示为块级元素，先后显示换行符；

inline：默认，显示为内联元素；inline-block：行内块元素。

九、Position有哪些主要属性，做用？

答：absolute：绝对定位，相对于第一个有定位属性的父级元素来定位；

fixed：绝对定位，相对于浏览器窗口进行定位；

Relative：相对定位，相对于当前正常位置经行定位；

inherit：规定从父元素继承position的值。

十、前端页面由那三层构成？

答：结构层：HTML；表现层：CSS；行为层：JavaScript。

十一、什么是语义化的标签，有什么优势？

答：能直观认识的标签；能使搜索引擎快速的抓取。

十二、如何对网页经行优化？

答：文件合并、文件压缩、使用CDN托管、将一些小图片作成雪碧图，减小对服务器端的请求次数。

1三、HTML5有什么新标签？

答：header：头部；footer：尾部；nav：导航/菜单；video：视频；audio：音频；canvas：画布；figure：图文并茂；...

1四、列举CSS3一些属性？

答：border-radius:圆角；box-shadow：边框阴影；text-overflow：文本溢出；background：背景图片可用多张；transform：使什么变形；transition：过渡时间。...

1五、如何让一段文本中的全部首字母大写？

答：text-transform：capitalize；uppercase（全部单词大写）；lowercase（全部单词小写）。

1六、减小页面加载时间的方法？

答：尽可能减小HTTP请求次数；CSS文件放头部；JS文件放尾部；压缩CSS、JS文件；尽量优化代码，减小DCOM元素；AJAX采用缓存调用。

1七、为何要初始CSS样式？

答：由于浏览器的兼容问题，不一样浏览器之间的默认属性不一样，若是不初始化CSS样式，页面在不一样浏览器之间显示会有差别。

1八、当float与margin同时使用时，IE6的双边差距BUG怎么解决？

答：只须要给第一个浮动元素的CSS样式加上display：inline属性。

1九、Firefox中标签的居中解决方法？

答：除了父级元素设置text-align：center属性；子级元素还应该设置margin：0 auto。

20、如何利用button实现连接功能？

答：<input type=button value="test" onclick="window.navigate('http://hao123.com')" />只针对IE；
<input type=button value="test" onclick="location.href = 'http://hao123.com'" />兼容全部浏览器。

JS篇：

一、JavaScript是一门什么样的语言，它有哪些特色？

答：是一种脚本语言；

特色：1）语法相似于常见高级语言；

2）脚本语言，不须要编译就能够由解释器直接运行；

3）变量松散定义，属于弱类型语言；

4）面向对象。

二、闭包的原理与好处和坏处？

答：闭包：闭包是一个拥有许多变量和绑定了这些变量的环境表达式，一般是一个函数，所以这些变量也是该表达式的一部分；也就是说JS中全部的function都是一个闭包，只是嵌套的function所产生的闭包更为强大。

好处：1）建立一个匿名函数，并当即执行，因为外部没法引用内部变量，所以在执行后能很快释放，不会形成全局污染。

2）缓存，能够将值存储起来，当须要调用的时候，首先在缓存中查找，若是找不到再进行计算，而后更新缓存并返回值。

3）实现封装。

4）实现面向对象中的对象。

坏处：闭包会致使变量不能释放，引发内存泄露。

三、类的三大特性？

答：继承、封装、多态

四、JS的Typeof的返回数据类型有哪些？

答：Object、number、function、boolean、string、undefined。

五、JS获得DOM的方法？

答：根据ID获取对象：document.getElementById（ID）；

根据Tag获取对象数组：document.getElementsByTagName（“p”）；

根据Name获取对象数组：document.getElementsByName（NAME）；

根据Class获取对象数组：document.getElementsByClass（.Class）。

六、IE与火狐事件机制有什么区别；阻止冒泡事件的代码？

答：function stopEvent(){ //阻止冒泡事件

//取消事件冒泡

var e=arguments.callee.caller.arguments[0]||event; //若省略此句，下面的e改成event， IE运行能够，可是其余浏览器就不兼容

if (e && e.stopPropagation) {

// this code is for Mozilla and Opera

e.stopPropagation();

} else if (window.event) {

// this code is for IE

window.event.cancelBubble = true;

}

通常在IE环境下能够省略掉（var e=arguments.callee.caller.arguments[0]||event;）直接运行便可，可是在FF下不行了，它会报e.stopPropagation没有定义，因此要事先定义，才能兼容。

七、Document.onload（）和Document.ready（）的区别？

答：onload：是在整个文档加载完成后就能够直接对DOM进行操做；

ready：是在DOM加载完成后就能够直接对DOM进行操做；

在原生JS中并无Document.ready的直接方法。

八、JS中split（）与join（）的区别？

答：split（）：用于把一个字符串分割成字符串数组；

join（）：用于把数组中的全部元素放入一个字符串，元素经过指定的分隔符进行分割；例如：join（“#”），#是任意的。

AJAX篇：

1、AJAX何时调用？

答：AJAX主要用于提高用户体验，可是不能滥用。多用于提交Form表单或一些不用刷新整个页面而须要获取后台数据的时候。下降服务器压力。

2、JsonP的原理及优缺点？

答：JsonP全称是JSON with Padding，是为了解决跨域请求资源而产生的解决方案。

原理：利用<script>标签没有跨域限制的“漏洞”来达到与第三方通信的目的。当须要通信时，本站脚本建立一个 <script>元素，地址指向第三方的API网址，形如<script src="http://www.example.net/api?param1=1¶m2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或经过地址参数传递）。

优势：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要 XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用 callback的方式回传结果。

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行 JavaScript调用的问题。

3、GET请求与POST请求差异？

答：GET：1）Get是向服务器发索取数据的一种请求；

2）Get是获取信息，而不是修改信息，相似数据库查询功能同样，数据不会被修改；

3）Get传输的数据有大小限制，由于GET是经过URL提交数据，那么GET可提交的数据量就跟URL的长度有直接关系了，不一样的浏览器对URL的长度的限制是不一样的。

4）Get请求的参数会跟在url后进行传递，请求的数据会附在URL以后，以?分割 URL和传输数据，参数之间以&相连,％XX中的XX为该符号以16进制表示的 ASCII，若是数据是英文字母/数字，原样发送，若是是空格，转换为+，若是是中文/其余字符，则直接把字符串用BASE64加密。

POST：1）Post是向服务器提交数据的一种请求；

2）Post请求做为HTTP消息的实际内容发送给web服务器，数据放置在HTML Header 内提交，Post没有限制提交的数据；

3）Post比Get安全，对于敏感数据和不是中文字符的数据，用post；

4）POST表示可能修改变服务器上的资源的请求，在服务器端，用Post方式提交的数据只能用Request.Form来获取。

4、NodeJS？

答：Node.js 是服务器端的JavaScript运行环境，它具备无阻塞(non-blocking)和事件驱动(event-driven)等的特点，Node.js 采用V8引擎，实现了相似Apache和 nginx的web服务，能够经过它来搭建基于 JavaScript的Web App。NodeJS 被设计用来解决服务端阻塞问题.

开发篇：

一、啥子是模块化开发及优势？

答：在软件开发过程当中，把一个源代码的结构分割成一个元系统和一系列的模块；元系统是指一个可以保持系统运行的最小系统；模块是一个较大系统的独立部件，能独立出来，又能够在总体中运转。

1）便于维护，在不影响整个系统运转的状况下将一些旧版本的模块替换掉；

2）方便分工，提升开发效率；

3）开发者可根据某种特定功能进行独立开发而不用去协调与其它模块之间的关系；

4）便于用户根据我的需求选择适合本身的模块安装。

框架：

一、LESS与SASS的特性？

答：less是基于JS在客户端运行；sass是基于rubu环境在服务器端运行。

声明：less：@；sass：$。

1）结构清晰，便于扩展。

2）能够方便地屏蔽浏览器私有语法差别。封装对浏览器语法差别的重复处理，减少无心义的劳动。

3）能够轻松实现多重继承。

4）彻底兼容 CSS 代码，能够方便地应用到老项目中。