我的前端面试大全HTML/HTML5

1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5.未来三到五年的规划是怎样的？

 

http://gold.xitu.io/post/57d4ef360e3dd90069d84be9

http://gold.xitu.io/post/57d13876165abd005f160bf0

HTML&CSS：  对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应。

JavaScript：   数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。

其他：  HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
http://ourjs.com/detail/572160b688feaf2d031d24e4

 

 

一、W3C标准是什么？

W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：
结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

例如：

1.同一个页面当中，同名的ID会产生冲突。所以以ID定义样式的必须改成类引用。
2.所有的标签都使用小写。

二、Doctype作用？标准模式与兼容模式各有什么区别?

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD,但是需要 doctype 来规范浏览器的行为。

其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

提示：请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

Q：标准模式与兼容模式（怪异模式）各有什么区别?
A：标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。

三、HTML中的元素分类

Q：HTML中行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？区别在哪里？
A：行内元素（内联元素）： 只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。
      常用的有：a b span img input select strong（强调的语气）
      块级元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。
      常用的有：div
                       ul ol li 
                       dl dt dd 
                       h1 h2 h3 h4…
                       p

　　空元素：没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。
                   <br /> 就是没有关闭标签的空元素（<br /> 标签定义换行）。
                   在 XHTML、XML 以及未来版本的 HTML 中，所有元素必须被关闭。
       常用的有：<br> <hr> <img> <input> <link> <meta>

　　鲜为人知的是：
     <area>：<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）。area 元素总是嵌套在 <map> 标签中。
     <base>：<base> 标签为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
                     使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。
                     这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
     <col>：<col> 标签为表格中一个或多个列定义属性值。
     <command> ：command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。
     <embed>:<embed> 标签定义嵌入的内容，比如插件。
     <keygen>:<keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
     <param>:param 元素允许您为插入 XHTML 文档的对象规定 run-time 设置，也就是说，此标签可为包含它的 <object> 或者 <applet> 标签提供参数
     <source>:<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
                     <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
     <track>：<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
     <wbr>：Word Break Opportunity (<wbr>) 规定在文本中的何处适合添加换行符。

四、HTML中，link和@import有什么区别？

Q：页面导入样式时，使用link和@import有什么区别？
A：最根本区别就是，link是一个html的一个标签，而@import是css的一个标签
（link属于XHTML标签（功能不局限于导入CSS），而@import则是CSS提供的一种规则（CSS2.1以后，要考虑兼容））

1.使用link方式，浏览器会先装载完CSS文件再装载HTML的主体部分，所以显示出来的页面从开始就是带样式效果的。 
而采用@import方式，浏览器则会先装载完整个HTML文件后再装载CSS文件。这样加载大页面的时候容易闪烁而且看到渲染前的“丑态”。
2.link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!-- Edited by XMLSpy® -->
<rss version="2.0">
<channel>
  <title>W3Cschool Home Page</title>
  <link>http://www.w3cschool.cc</link>
  <description>Free web building tutorials</description>
</channel>
</rss>

3.当使用Javascript控制DOM去改变样式的时候，只能使用link方式，因为@import眼里只有CSS，不是DOM可以控制的
PS.说了那么多，貌似link完虐@import，其实用link还是有缺点的：
link会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用

五、浏览器内核

Q：浏览器的组成和作用？
A:浏览器可以分为两部分，shell+内核。其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块,包括渲染引擎和JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎：解析和执行javascript来实现网页的动态效果。

Q:常见的浏览器内核有哪些？
A:Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]   Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
    Presto内核：Opera7及以上。      [Opera内核原为：Presto，现为：Blink;]   Webkit内核：Safari,Chrome等。   [ Chrome的：Blink（WebKit的分支）]
优缺点：
Trident内核：Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决，占有大量的市场份额
Presto内核：Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的   速度而丢掉了一部分网页兼容性。
Gecko内核：优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。
Webkit内核：优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

相关资料详细地址：http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html

六、浏览器加载

Q1:浏览器加载过程？
Q2：加载时候容易遇到哪些问题？产生的原因？如何解决？
A1：
1.用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。（解析域名成ip，发送请求）
2.网络服务器解析请求，并发送请求给数据库服务器。（解析请求，发送数据库请求）
3.数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器。（返回一个response）
4.浏览器解析 http response。
5.下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件。（下载文件）
访问服务器端可能遭遇的问题：
网络服务器无法获取数据库服务器返回的资源文件（http response 404），或者由于并发原因暂时无法处理用户的http请求（http response 500）

A2：
1.阻塞现象：在页面中我们通常会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，如果<head>中引用了一个a.js文件，而这个文件很大或  者有问题，需要2秒加载，那么浏览器会停止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染。
原因：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。
办法：可以将外部引用的js文件放在</body>前。
原因：可能会有 var width = $('#id').width()，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。这也是css阻塞后续js的根本原因。
办法：当js文件不需要依赖css文件时，可以将js文件放在头部css的前面

优化方法：
1.现代浏览器存在 prefetch 优化，浏览器会另外开启线程，提前下载js、css文件，需要注意的是，预加载js并不会改变dom结构，他将这个工作留给主加载。
2.预加载网页，利用空余时间来提前加载该网页的后续网页。<link rel="prefetch" href="http://">
3.为js脚本添加defer属性，使得浏览器不等js脚本加载执行完，就加载后面的图片。既然图片资源都已经加载出来了，就不要在js内写document.write啦。
<script defer="true" src="JavaScript.js" type="text/javascript"/>
4.不要在外部调用的js文件中调用运行时间较长的函数，如果一定要用，可以使用setTimeout函数

参考文章链接：1.http://www.jianshu.com/p/e141d1543143
                      2.http://www.cnblogs.com/soundcode/p/5767812.html
                      3.http://www.ruanyifeng.com/blog/2014/10/event-loop.html

七：浏览器解析，渲染

Q:浏览器加载完所有的文件后，如何进行页面的内容的解析和渲染？
A：
解析：1.浏览器会读取HTML文件，生成对应的DOM树
           （至于生成DOM的具体过程，涉及HTML解析器（HTML Parser）以及解析算法，暂时不讲）
          2.读取CSS文件，生成样式表对象，如下图。

渲染：会生成一个渲染树，最后是将dom树和css树结合的一个过程，好比女人的化妆。

具体：
渲染树和DOM树的关系，不可见的dom元素（<head>…</head> display=none）不会被插入渲染树中。
还有像一些节点的位置为绝对或浮动定位。
这些节点会在文本流之外，因此会在两棵树上的不同位置，渲染树标识出真实的位置，并用一个占位结构标识出他们原来的位置

渲染最大的一个困难就是为每一个dom节点计算符合他的最终样式。

为每一个元素查找到匹配的样式规则，需要遍历整个规则表。关于遍历规则表的方法，是自右向左。

例子：#test p{ color:#999999}：先查询到p元素，再找到上一级id为test的元素。这样遍历的效率很低。
为什么：如上图，生成的样式对象，遍历的顺序，自然是从树的低端向上遍历。

计算样式的一些困难：

1.样式数据是非常大的结构，保存这样是的数据是很耗内存的。
2.选择器迭代太深，造成太多的无用遍历。
3.样式规则涉及非常复杂的级联，定义了规则的层次
（理解：<head>里引用的外部样式表，会被局部样式表中同一属性的设置取代。
            还有例如body内对font的设置本来会应用于孩子元素，但是如果body的孩子元素定义font属性，则会被后者取代）。
解决办法：共享样式数据。（元素可以共享样式数据的条件就是他们的状态是”一致“的。）

面试问答Q&A：
1.浏览器解析过程？（生成DOM树和CSS样式表对象）
2.渲染过程？（通过CSS样式表对象，通过规则计算生成渲染树，结合DOM树进行渲染）
3.渲染树和DOM树的关系？（不可见的dom元素不会被插入渲染树中。还有像一些节点的位置为绝对或浮动定位。
                                              这些节点会在文本流之外，因此会在两棵树上的不同位置）
4.渲染时候的样式寻找规则？（从右向左，或是从css树底向上遍历寻找）
5.渲染最大的困难？  （计算效率很低。
                                    因为规则是从右向左，即计算的时候是从样式表树的底端向上遍历的，引起许多问题
                                    具体体现就是计算的时候耗内存，遍历太多导致冗余，级联复杂导致父子的样式替换）
6.如何解决渲染计算的问题？条件是什么？（共享样式数据，条件是元素的状态一致）
7.针对渲染计算的问题，如何在编写css的时候就尽量避免？
（
1.dom深度尽量浅。
2.减少inline javascript、css的数量。
3.使用现代合法的css属性。
4.不要为id选择器指定类名或是标签，因为id可以唯一确定一个元素。
5.不要给类选择器指定标签，类，代表具有一类属性的标签，不仅是一个，虽然可以实现，但是降低了效率。
6.避免后代选择符，尽量使用子选择符。原因：子元素匹配符的概率要大于后代元素匹配符。后代选择符;#tp p{} 子选择符：#tp>p{}
7.避免使用通配符，举一个例子，.mod .hd *{font-size:14px;} 根据匹配顺序,将首先匹配通配符,也就是说先匹配出通配符,然后匹配.hd
（就是要对dom树上的所有节点进行遍历他的父级元素）,然后匹配.mod,这样的性能耗费可想而知.
）

参考文章链接：1.http://www.jianshu.com/p/e141d1543143

八、HTML页面优化

Q:如何提高HTML加载速度？
A：
1，页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥
2，减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并
3，减少域名查询
DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
4，缓存重用数据
使用缓存吧
5，优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6，减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
7，使用现代CSS和合法的标签
使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥
8，不要使用嵌套tables
9，指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
10，根据用户浏览器明智的选择策略（？）
IE、Firefox、Safari等等等等

Q：HTML解析和加载时，什么时候开始渲染，什么时候停止渲染，什么时候重新渲染？
A：加载完CSS后开始渲染，（dom树和render树已经形成）
     加载JS造成阻塞停止渲染，
     加载图片不会停止渲染，但是如果图片的尺寸没有规定，加载图片完成后要重新渲染
     加载新的CSS后要重新渲染
     JS操作改变dom树后要重新渲染

参考文章链接：http://www.51testing.com/html/38/225738-220986.html

九、用css让一个容器水平垂直居中？

http://www.cnblogs.com/ztfjs/p/5250405.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <style type="text/css">
            .div1{  width: 100px; height: 100px; border: 1px solid #000000;position: relative;} 
            .div2{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0;}
        </style>
        <div class="div1">
            <div class="div2">   
            </div>
        </div>        
    </body>
</html>

用margin-left和margin-top对半也可以

<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000; vertical-align:middle;display:table-cell;}
.div2{ width:40px ;height: 40px; margin:0 auto; background-color: green;}
</style>
</head>
<body>
<div id="div1" class="div1">
<div id="div2" class="div2"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .div1{ width:40px ; height: 40px; background-color: green; position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0;}
    </style>
</head>
<body>
    <div class="div1"></div>
</body>
</html>
    <style type="text/css">
        .div1{
            width: 100px;height: 100px;border:1px solid black;vertical-align: middle;display: table-cell;
        }
        .div2{
            width: 50px;margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2">article</div>
    </div>
</body>
<body>   
    <style type="text/css">   
        .div1{  width: 100px; height: 100px; border: 1px solid #000000;position: relative;}    
        .div2{ width:40px ; height: 40px; background-color: green;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}   
    </style>   
    <div class="div1">   
        <div class="div2">   
        </div>   
    </div>   
</body>

或者：.div2{ width:40px ; height: 40px; background-color: green;position: absolute;left: 50%;top: 50%;margin-left: -20px;margin-top: -20px;}   

 

在研究了规范和文档后，我总结出了“完全居中”的工作原理：

1. 在普通文档流里，margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。

W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.

2. 设置了position: absolute; 的元素会变成块元素，并脱离普通文档流。而文档的其余部分照常渲染，元素像是不在原来的位置一样。 Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space

3. 设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子，因此这个元素会填满它相对父元素的内部空间，这个相对父元素可以是是body标签，或者是一个设置了 position: relative; 样式的容器。 Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

4. 给元素设置了宽高以后，浏览器会阻止元素填满所有的空间，根据margin: auto; 的要求，重新计算，并包裹一层新的盒子。 Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.

5. 既然块元素是绝对定位的，又脱离了普通文档流，因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。 W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically

使用“完全居中”，有意遵照了标准margin: auto; 样式渲染的规定，所以应当在与标准兼容的各种浏览器中起作用。

 

posted @ 2016-09-11 23:26  chenxj  阅读(244)  评论(0)    收藏  举报