前端概括面试题

时间  2019-11-15
标签 前端 概括 面试 栏目 快乐工作 繁體版
原文   原文链接
  1. 1.       怎么学习前端开发？求推荐学习路线？

http://www.zhihu.com/question/30180100javascript

http://www.zhihu.com/question/22951927css

 

             学习网站：w3cschool的教程 或者 慕课网前端视频教程 ，Learn to codehtml

           书籍：  HTML5+CSS3：
                    《HTML5高级程序设计》
                    《CSS权威指南》 前端

            《HTML之路：XHTML和CSS最佳实践指南》java

      JavaScript：《JavaScript 高级程序设计》jquery

     《面向对象的Javascript》（Object-Oriented JavaScript）web

      jQuery ：《锋利jQuery》面试

      一些大牛博客ajax

  1. 2.  前端相关面试题目

html 中经常使用的标签和相应属性知识点须要熟悉掌握编程

1）Doctype做用? 严格模式与混杂模式如何区分？它们有何意义

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签以前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。

严格模式的排版和 JS 运做模式是  以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。

 DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

2）xhtml和html有什么区别？

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不一样：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

 

3）CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外联 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1如下浏览器不支持
Link 支持使用javascript改变样式，后者不可

 

4）css中 的选择器有哪些？

经常使用的有元素选择器，类选择器，id选择器，属性选择器

高级： 后代选择器，子元素选择器，相邻兄弟选择器，伪类，伪元素

 

5）前端页面有哪三层构成，分别是什么?做用是什么?

结构层 Html ：由 HTML 或 XHTML 之类的标记语言搭建文档的结构，标签对网页内容的语义含义作出了描述

表示层 CSS ：处理网页内容的布局显示问题，设置文档的呈现效果

行为层 js：经过JavaScript 和Dom 对网页内容的事件作出响应，实现文档的行为。

 

6）经常使用的浏览器有哪些？它们的内核是什么？

IE（IE内核/Trident内核）  火狐（Gecko） 谷歌（webkit） opera(Presto), Safari(webkit)

 

7) 描述css reset的做用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不一样，样式不一样，而后重置，让他们统一

 

8) 清除浮动的几种方式，各自的优缺点（http://www.jb51.net/css/173023.html）

1.使用空标签清除浮动 clear:both（理论上能清除任何标签的浮动，但增长了无心义的标签）

2. 父级div定义 伪类:after 和 zoom （效果好，但难理解）

3．对父级设置适合的css（设置的高度固定不可变）                                   

4.使用overflow：hidden（能够清除父级内使用float产生浮动，必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ，不能和position配合使用，由于超出的尺寸的会被隐藏）

9）什么是盒子模型？

 

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分能够显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一块儿构成了css中元素的盒模型。

 

10）简述一下src与href的区别

 

href 是指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，用于超连接。

 

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此

 

11)常遇到的浏览器兼容问题有哪些？如何解决？（https://www.douban.com/group/topic/4629864/）

1.不一样的浏览器的标签默认的内边距和外边距不一样 

    解决方案：CSS里    *{margin:0;padding:0;}

2. 块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大

     解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

3.图片默认有间距   解决方案：使用float属性为img布局

4. 手形光标. cursor: pointer. 而hand 只适用于 IE

                等等

12）div+css的布局较table布局有什么优势？

 

改版的时候更方便 只要改css文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

13）.a：img的alt与title有何异同？b：strong与em的异同？

答案：

a:

alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

b:

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

 

14)css 选择器的优先级

派生选择器<类选择器<id选择器

id 选择器的优先级低于内联样式

15）行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？常见的块级元素和行内元素？

 

块级元素(block)特性：

老是独占一行，表现为另起一行开始，并且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)均可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是能够设置的），就是里面文字或图片的大小。

 

块级元素(block element)

div -最经常使用的块级元素            dl - 和dt dd搭配使用的块级元素

form - 交互表单                      h1 - 大标题

hr - 水平分隔线                        ol - 排序表单

p - 段落                                    ul - 非排序列表



内联元素(inline element)

a - 锚点            b - 粗体(不推荐)              br - 换行

em - 强            i - 斜体                           img - 图片

input - 输入框                                        label - 表格标签

select - 项目选择                                    small - 小字体文本

span - 经常使用内联容器，定义文本内区块    strike - 中划线

strong - 粗体强调                                  sub - 下标

sup - 上标                                              textarea - 多行文本输入框

tt - 电传文本                                           u - 下划线

 

16）浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

17）外边距重叠时的计算规则：

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值。

两个外边距一正一负时，折叠结果是二者的相加的和。

答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

18）rgba()和opacity的透明效果有什么不一样？

rgba()和opacity都能实现透明效果，但最大的不一样是opacity做用于元素，以及元素内的全部内容的透明度，

而rgba()只做用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

19）.px和em的区别。

 

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小。

 

浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

20）你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

21）css hack

　　<!--[if IE 6]--><![end if]-->

　　_marging \\IE 6

　　+margin \\IE 7

　　Marging:0 auto \9 全部Ie

Margin \0 \\IE 8

             22）常见HTTP协议的状态消息都有哪些?

100：continue（继续）初始的请求已经接受，客户应当继续发送请求的其他部分

200：Ok 请求成功  get和post请求的请求应答文档跟在后面

304：not modified  自从上次请求后请求网页的内容未被修改过

400：错误请求，请求出现语法错误

401：未受权   用户试图未经受权访问受密码保护的页面

403：forbidden  资源不可用  服务器理解客户的请求可是拒绝处理

404：Not Found  没法找到指定位置的资源

408：request time out （请求超时）

500：服务器内部出错，没法完成请求

502：网关错误

503：服务器不可用，服务器因为维护或者负载太重未能应答

504：网关超时

505：http 版本不支持请求中使用的http 协议的版本

23）css样式是什么？

分别是内联样式（<a style="">）,内部样式(<style></style>),

外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；

按照其来源优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式

按照选择器优先级为id >class>元素选择器

若是有important,important优先级最高。

         元素的最终样式是累加的结果，其中属性若是有冲突则以优先级高的为准

js:

1）ajax请求的方法有哪些？简要描述它们的区别？

Query对Ajax操做进行了封装，在jQuery中$.ajax()方法属于最底层的方法，

第2层是load(),$.get()和$.post()方法 第三层是$.getScript()和$.getJSON()

方法。

load（）方法是jquery中最为简单和经常使用的Ajax方法 能载入远程的HTML代码并插入DOM中 结构，它的回调函数不管成功或者失败都会被调用，$.get()方法和$.post()方法在response的状态为成功时 ，才能调用回调函数

2）.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等能够new实例化
内置对象为gload Math 等不能够实例化的
宿主为浏览器自带的document,window 等

 

3）怎样添加、移除、移动、复制、建立和查找节点？

 

1．建立新节点

 

createDocumentFragment()//建立一个DOM片断

createElement() //建立一个具体的元素

createTextNode() //建立一个文本节点

2．添加、移除、替换、插入

 

appendChild() //添加

removeChild() //移除

replaceChild() //替换

insertBefore() //插入

3.查找

 

getElementsByTagName() //经过标签名称

getElementsByName() //经过元素的Name属性的值

getElementById() //经过元素Id，惟一性

 

4）JavaScript中的5种主要的数据类型？

Number、String、Object、Array、Boolean

 

5）sessionstorage，localstorage和cookie之间的区别

共同点：都是保存在浏览器端，且同源的。

 

区别：cookie数据始终在同源的http请求中携带（即便不须要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，能够限制cookie只属于某个路径下。存储大小限制也不一样，cookie数据不能超过4k，同时由于每次http请求都会携带cookie，因此cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，能够达到5M或更大。

数据有效期不一样，sessionStorage：仅在当前浏览器窗口关闭前有效，天然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，所以用做持久数据；cookie只在设置的cookie过时时间以前一直有效，即便窗口或浏览器关闭。做用域不一样，sessionStorage不在不一样的浏览器窗口中共享，即便是同一个页面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知机制，能够将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

6）如何获取字符串长度，截取字符串？

获取字符串长度：string.length

截取字符串：

substring(start,end)

开始和结束的位置，从零开始的索引，返回值：一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的全部字符，其长度为 stop 减 start。

substr(start [, length ])  start   必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。length 可选。在返回的子字符串中应包括的字符个数。

 

7）body中的onload()函数和jQuery中的document.ready()有什么区别？

 

回答：onload()和document.ready()的区别有如下两点：

 

一、咱们能够在页面中使用多个document.ready()，但只能使用一次onload()。

 

二、document.ready()函数在页面DOM元素加载完之后就会被调用，而onload()函数则要在全部的关联资源（包括图像、音频）加载完毕后才会调用

 

8）请使用jQuery将页面上的全部元素边框设置为2px宽的虚线？

 

回答：这正是jQuery选择器上场的时候了，代码以下：

 

<script language="javascript" type="text/javascript">

 

         $("*").css("border", "2px dotted red");

 

</script>

 

9）  变量做用域与闭包：

a)   做用域：就是变量可以起做用的范围；

b)   局部变量：定义在一个函数里，只能在这个函数里用；

c)   全局变量： 不定义在任何一个函数里，能够在任何地方去用；

d)   闭包：是另外一种做用域；子函数可使用父函数的局部变量；

 

10）=== 与 ==区别

　　=== 是严格相等，不会进行类型转换，而 == 是不严格相等，会进行类型转换。有些js的书中，建议开发人员永远不要用 == 或者 != 。

可是jquery源码中，有用到“==”或者“!=”的状况 —— 判断 undefined 和 null 的时候。

              11）检测obj是否为window对象（http://www.jb51.net/article/61640.htm）

复制代码 代码以下:

//null == window.null为true

function isWindow(obj){

    return obj != null && obj == window.obj;

}

12）字符串拼接方法？

第一种方法  用链接符“+”把要链接的字符串连起来：

str="a";

str+="b";

第二种方法  将两个或多个字符串，并返回一个新的单字符串。

语法

string.concat(string2, string3[, ..., stringN]);

第三种方法

  join() 方法用于把数组中的全部元素放入一个字符串。

元素是经过指定的分隔符进行分隔的。

<script type="text/javascript">
 
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
 
document.write()arr.join(".")
 
</script>

输出：

George.John.Thomas

13）js 函数的调用（http://www.cnblogs.com/mq0036/p/3934867.html）

S函数调用的四种方法：方法调用模式，函数调用模式，构造器调用模式，apply,call调用模式

方法调用模式：
先定义一个对象，而后在对象的属性中定义方法，经过myobject.property来执行方法，this即指当前的myobject 
对象。

函数调用模式
定义一个函数，设置一个变量名保存函数，这时this指向到window对象。

构造器调用模式
定义一个函数对象，在对象中定义属性，在其原型对象中定义方法。在使用prototype的方法时，必须实例化该对象才能调用其方法。

apply,call调用模式
调用一个对象的一个方法，以另外一个对象替换当前对象。

var myobject={};
var sum = function(a,b){
　　return a+b;
};
var sum2 = sum.call(myobject,10,30); //var sum2 = sum.apply(myobject,[10,30]); 
alert(sum2);

14）对Js中this 的理解？（http://www.jb51.net/article/41656.htm）http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

1．纯粹的函数调用（this表明全局对象Global）

2. 做为对象方法的调用

 

15）什么是 AJAX ？同步和异步的区别？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于建立快速动态网页的技术。

经过在后台与服务器进行少许数据交换，AJAX 可使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某部分进行更新。

   同步：脚本会停留并等待服务器发送回复而后再继续

　 异步：脚本容许页面继续其进程并处理可能的回复

16)使用ajax 请求时 为何会出现跨域问题？如何处理？

由于js 同源策略的限制，同源策略是客户端脚本的重要安全度量标准，同源指的是同协  议，同域名，同端口号

 

1.经过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案多是最简单的一种跨域请求的方案，可是它一样是一种限制最大的方 案。首先，它只能实如今同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。

2.经过请求当前域 的代理，由服务器 代理去访问另外一个域的资源。XMLHttpRequest经过请求本域内的一个服务器资源 ，将要访问的目标资源提供给服务器，交由服务器 去代理访问目标资源。这种方案，能够实现彻底的跨域访问，可是开发，请求过程的消费会比较大。

3. 经过HTML中能够请求跨域资源的标签引用来达到目的，好比Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在 请求每个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或须要立刻执行的JavaScript代码，咱们能够经过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。

4. 经过jsonp  JSONP就是在客户端将要用来处理请求结果的函数名做为参数传递给服务器端，然服务器端将请求结果数据做为参数包装在这个函数中 并返回给客户端执行

 

17) js 封装的理解？（http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html）

js 是基于对象的语言，但不是真正的面向对象的编程语言，由于js 的语法中没有类的概念，封装是指现实世界的一切事物都是对象，由属性和方法组成

js 实现封装的办法

  1. 1.       生成实例对象的原始模式，直接建立对象
  2. 2.       原始模式的改进，写一个函数，解决代码重复的问题
  3. 3.       构造函数模式，其实就是一个普通函数，可是内部使用了this变量。对构造函数使用new运算符，就能生成实例，而且this变量会绑定在实例对象上。
  4. 4.       Prototype模式

Javascript规定，每个构造函数都有一个prototype属性，指向另外一个对象。这个对象的全部属性和方法，都会被构造函数的实例继承。

这意味着，咱们能够把那些不变的属性和方法，直接定义在prototype对象上。

18）js继承的两种形式 http://blog.csdn.net/unicode/article/details/5075606

对象冒充(call,apply)原型方式

类继承：在函数内部定义自身的属性的方法，子类继续时，用call或apply实现对象冒充，把类型定义的东西都复制过来，这样的继承子类与父类并无多少关联，不互相影响，有利于保护自身的一些私有属性

<script type="text/javascript">

function A()

{

    this.name='a';   

}

function B()

{

 

}

 

 

B.prototype=new A();

var obj=new B();

 

alert(obj.name);

</script>

原型链：每一个函数都有本身的原型（prototype）属性，这个属性实际上是隐藏对象，经过对这个对象的操做，子类能够一样持有这个对象的引用，间隔实现继承，这个的好处是大大节省了空间，由于下面的子类不用从新去实例化父类定义的属性和方法，而直接引用原型链上的属性与方法

 

<script type="text/javascript">

function A()

{

    this.name='a';   

}

function B()

{

   A.call(this);   

}

 

var obj=new B();

 

alert(obj.name);

</script>

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程