前端 基础面试问题汇总

1>、html5有哪些新标签？
	<article> 标签定义外部的内容（外部内容如blog,news）。
	<aside> 标签定义article以外的内容（可用做文章的侧栏）。
	<canvas>使用JavaScript在网页上绘制图形图像。
	<details> 用于描述某个文档部分的内容。
	<summary> 定义<details>元素标题。
	<datalist> 定义选项列表.。
	<figure> 对元素进行组合。<figcaption> 定义figure的标题。
	<header>定义页眉。 <nav>定义导航。 <footer>定义页脚。
	<progress>定义运行中的进度。<audio>标签定义音乐。 <video> 定义视频。
	<time> 定义时间。 <section>定义文档中的区段。 <output> 定义输出类型。
2>、选用标签的标准
	1、如果要支持比较老的浏览器（通常是桌面版网页）则不使用新标签
	2、手机平板等网页开发可以使用新标签
	3、不管什么情况下，都应该优先根据语义来选用标签
	4、根据搜索引擎优化的要求和建议选用标签
3>、简述一下你对HTML语义化的理解？
	1、用正确的标签做正确的事情。
	2、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
	3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
	4、html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
	5、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
4>、你能描述一下当你制作一个网页的工作流程吗？
	1、内容分析：分清展现在网络中内容的层次和逻辑关系
	2、结构设计：写出合理的html结构代码
	3、布局设计：使用html+css进行布局
	4、样式设计：首先要使用reset.css
	5、交互设计：鼠标特效。行为设计：js代码，ajax页面行为和从服务器获取数据。最后测试兼容性。优化性能
5>、你如何对网站的文件和资源进行优化？
	1、文件合并； 
	3、使用 CDN 托管；
	4、缓存的使用；
	5、其他
6>、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
	1).使用CDN
	2).服务器开启gzip压缩
	3).css样式的定义放置在文件头部
	4).Javascript脚本放在文件末尾
	5).压缩Javascript、CSS代码
	6).尽可能减少DOM元素
	7).尽量减少页面中重复的HTTP请求数量
	8).使用多域名负载网页内的多个文件、图片
	9).在服务器配置Entity-Tag if-none-match
	10).在服务器端配置control-cache last-modify-date
7>、23条Web性能优化最佳实践和规则
	1).尽可能减少HTTP请求次数
	2).使用CDN
	3).避免使用src和href标签
	4).加入Expires或Cache-Control Header
	5).使用Gzip压缩
	6).在html文件顶部放置样式表
	7).在html文件底部放置Javascript脚本
	8).避免使用CSS表达式
	9).使用外部Javascript和CSS外部文件
	10).减少使用DNS查找次数
	11).精简Javascript和CSS
	12).避免重定向
	13).移除重复的脚本
	14).配置ETag
	15).缓存AJAX
	16).使用GET完成AJAX请求
	17).减少DOM元素数量
	18).避免404
	19).减少Cookie大小
	20).使用无Cookie的域
	21).避免使用滤镜
	22).不要在HTML中缩放图片
	23).使用小favicon.ico文件，并让其可缓存
8>、如何进行网站性能优化

	content方面
	1) .减少HTTP请求：合并文件、CSS精灵、inline Image
	2) .减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
	3) .避免重定向：多余的中间访问
	4) .使Ajax可缓存
	5) .非必须组件延迟加载
	6) .未来所需组件预加载
	7) .减少DOM元素数量
	8) .将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
	9) .减少iframe数量
	10) .不要404
	
	Server方面
	11) .使用CDN
	12) .添加Expires或者Cache-Control响应头
	13) .对组件使用Gzip压缩
	14) .配置ETag
	15) .Flush Buffer Early
	16) .Ajax使用GET进行请求
	17) .避免空src的img标签
	
	Cookie方面
	18) .减小cookie大小
	19) .引入资源的域名不要包含cookie
	
	css方面
	20) .将样式表放到页面顶部 　　
	21) .不使用CSS表达式
	22) .使用不使用@import　　　
	23) .不使用IE的Filter
	
	Javascript方面
	24) .将脚本放到页面底部　　
	25) .将javascript和css从外部引入
	26) .压缩javascript和css　　
	27) .删除不需要的脚本
	28) .减少DOM访问 　　　　
	29) .合理设计事件监听器
	
	图片方面
	30) .优化图片：根据实际颜色需要选择色深、压缩 　　
	31) .优化css精灵
	32) .不要在HTML中拉伸图片 　　　　　　　　　　　
	33) .保证favicon.ico小并且可缓存
	
	移动方面
	34) .保证组件小于25k 　　　
	35) .Pack Components into a Multipart Document
9>、请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
	1） 把URL分割成几个部分：协议、网络地址、资源路径。
	　　其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；
	　　协议是从该计算机获取资源的方式，常见的是HTTP、FTP，不同协议有不同的通讯内容格式；
	　　资源路径指示从服务器上获取哪一项资源。
	　　例如：http://www.guokr.com/question/554991/
	　　协议部分：http 　　网络地址：www.guokr.com 　　资源路径：/question/554991/
	2） 如果地址不是一个IP地址，通过DNS（域名系统）将该地址解析成IP地址。
	　　IP地址对应着网络上一台计算机，DNS服务器本身也有IP，你的网络设置包含DNS服务器的IP。
	　　例如：www.guokr.com 不是一个IP，向DNS询问请求www.guokr.com 对应的IP，获得IP： 111.13.57.142。
	　　这个过程里，你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP，就会向它的上级服务器询问，上级服务器同样可能没有，就依此一层层向上找，最高可达根节点，找到或者全部找不到为止。
	3） 如果地址不包含端口号，根据协议的默认端口号确定一个。
	　　端口号之于计算机就像窗口号之于银行，一家银行有多个窗口，每个窗口都有个号码，不同窗口可以负责不同的服务。
	　　端口只是一个逻辑概念，和计算机硬件没有关系。 例如：www.guokr.com 不包含端口号，http协议默认端口号是80。
	　　如果你输入的url是http://www.guokr.com:8080/ ，那表示不使用默认的端口号，而使用指定的端口号8080。
	4） 向2和3确定的IP和端口号发起网络连接。 例如：向111.13.57.142的80端口发起连接
	5） 根据http协议要求，组织一个请求的数据包，里面包含大量请求信息，包括请求的资源路径、你的身份 例如：用自然语言来表达这个数据包，大概就是：请求 /question/554991/ ，我的身份是xxxxxxx。
	6） 服务器响应请求，将数据返回给浏览器。数据可能是根据HTML协议组织的网页，里面包含页面的布局、文字。
	　　数据也可能是图片、脚本程序等。现在你可以用浏览器的“查看源代码”功能，感受一下服务器返回的是什么东东。
	　　如果资源路径指示的资源不存在，服务器就会返回著名的404错误。
	7） 如果（6）返回的是一个页面，根据页面里一些外链的URL，例如图片的地址，按照（1）－（6）再次获取。
	8） 开始根据资源的类型，将资源组织成屏幕上显示的图像，这个过程叫渲染，网页渲染是浏览器最复杂、最核心的功能。
	9） 将渲染好的页面图像显示出来，并开始响应用户的操作。
		以上只是最基本的步骤，实际不可能就这么简单，一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。
	　　即使基本步骤本身也有很复杂的子步骤，TCP/IP、DNS、HTTP、HTML：每一个都可以展开成庞大的课题，而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复杂。
	　　不是计算机专业的同学看了上面的解释完全不明白是很正常的，可能会问为什么要搞得那么复杂，但我保证这每一个步骤都经过深思熟虑和时间的考验。
	　　你输入URL即可浏览互联网，而计算机系统在背后做了无数你看不到的工作，计算机各个子领域无数工程师为此付出你难以想象的努力。

10> 、html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
	1、HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
	绘画 canvas 用于媒介回放的 video 和 audio 元素
	sessionStorage 的数据在浏览器关闭后自动删除
	本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
	语意化更好的内容元素，比如 article、footer、header、nav、section
	表单控件，calendar、date、time、email、url、search
	新的技术：webworker, websockt, Geolocation
	2、移除的元素
	纯表现的元素：basefont，big，center，font, s，strike，tt，u；
	对可用性产生负面影响的元素：frame，frameset，noframes；
	支持HTML5新标签；
	3、兼容性：
	IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，
	浏览器支持新标签后，还需要添加标签默认的样式：
	当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架
	<!--[if lt IE 9]>
	<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>;;
	<![endif]-->
	4、如何区分： DOCTYPE声明\新增的结构元素\功能元素
11>、iframe 有哪些缺点？
	1)iframe 会阻塞主页面的 Onload 事件；
	2)搜索引擎的检索程序无法解读这种页面，不利于SEO；
	3)iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载；
		　使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。
12>、如何实现浏览器内多个标签页之间的通信? (阿里)
	WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；
	localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；
	注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；
13>、webSocket如何兼容低浏览器？(阿里)
	Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
14>、常见的浏览器内核有哪些？
	Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]。bug多，对w3c标准的支持不是很好。
	Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。支持很多复杂网页效果，但是能耗高，占内存。
	Webkit内核：Safari,Chrome等。[ Chrome的：Blink（WebKit的分支）]。速度仅次于presto，兼容性较好。
	Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink;]。公认的浏览网页速度最快的内核，处理js时比其他内核快3倍左右。但是网页兼容性不太好。
15>、前端需要注意哪些SEO
	SEO是由英文Search Engine Optimization缩写而来，中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。
	1、合理的title、description、keywords：
	　 搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；
	　 description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
	2、语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
	3、重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
	4、重要内容不要用js输出：爬虫不会执行js获取内容
	5、少用iframe：搜索引擎不会抓取iframe中的内容
	6、非装饰性图片必须加alt
	7、提高网站速度：网站速度是搜索引擎排序的一个重要指标

15>、HTTP 请求方式有哪些?
	常用的是GET和POST
	1、GET是最常用的方法，通常用于请求服务器发送某个资源。
	2、HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分
	3、PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它
	4、POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
	5、TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
	6、OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
	7、DELETE请求服务器删除请求URL指定的资源
17>、GET和POST的区别，何时使用POST？
	1) get是从服务器获取数据 ---"取"; post是向服务器提交数据 ---“发”
	2) form表单默认的method为"GET"
	3) get将参数按照variable=value 的形式，加在URL的后面，中间用"?"连接，多个参数之间用"&"连接;
	　比如：http://www.zhiyou100.com/login?username=Tom&password=123
	post将数据不像get方式那样，post 发给服务器的参数全部放在请求体中
	4) 参照上面3的数据传输方式，可以得出：post安全性相对比get方式要高
	5) URL不存在参数上限的问题，HTTP协议没有对URL长度进行限制，限制的是部分浏览器和服务器的限制。
	　 IE对URL长度的限制为2083KB
	6) get方式是通过URL传输的数据的，数据量一般在2KB左右，但是执行效率比post高
	7) 理论上post方式没有大小限制，HTTP协议规范也没进行大小限制。post数据没有限制，限制的是服务器处理程序的能力

18>、HTTP请求报文和响应报文都包括什么？
	1、http请求：客户端向服务器索要数据
	请求行：请求方法，请求资源路径，http协议版本
	请求头：包含了对客户端的环境描述，客户端请求的主机地址等信息。
	请求体：客户端发给服务器的具体数据。
	2、http响应：服务器返回给客户端数据
	状态行：http协议的版本、状态码、状态码的英文名称
	响应头：包含了对服务器的一些描述，对返回数据的描述。
	响应体：服务器返回给客户端的具体数据。
19>、HTTP状态码
	状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
	1XX: 信息响应类 表示 接收到请求并且继续处理
	2XX: 处理成功响应类 表示动作被成功接，理解和接受
	3XX: 重定向响应类 为了完成指宝的动作 必须接受进一步处理
	4XX: 客户端错误， 客户请求包含的语法错误或者是不能正确执行
	5XX: 服务器端错误，服务器不能正确定执行一个正确的请求
	常见状态代码、状态描述、说明：
	200 OK 正常返回信息
	400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
	401 Unauthorized 请求未授权。
	403 Forbidden 禁止访问。
	404 Not Found 找不到如何与 URI 相匹配的资源。
	500 Internal Server Error 最常见的服务器端错误。
	503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。
20>、前端页面有哪三层构成，分别是什么？作用是什么？
	最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
	网页的结构层:（structural layer） 由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：这是一个文本段。
	网页的表示层:（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
	网页的行为层:（behavior layer） 负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
21>、浏览器本地存储与服务器端存储之间的区别
	1、其实数据既可以在浏览器本地存储，也可以在服务器端存储。
	2、浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
	3、服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
	4、服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。
	5、服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。
	6、服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
	7、浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。
	8、服务器存储数据安全一些，浏览器只适合存储一般数据。
21>、请描述一下cookies,sessionStorage和localStorage的区别？
	1) cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
	2) cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。
	3) sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
	存储大小：cookie数据大小不能超过4k。
	sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
	有效时间：localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
	sessionStorage 数据在当前浏览器窗口关闭后自动删除。
	cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
22>、谈谈你对预加载的理解？
	Web预加载指的是在网页全加载完成之前，在页面优先显示一些主要内容，以提高用户体验。对于一个较庞大的网站，如果没有使用预加载技术，用户界面就会长时间显示一片空白，直到资源加载完成，页面才会显示内容。
	例如：可以通过js预先从服务加载图片资源(动态创建Image，设置src属性)，只要浏览器把图片下载到本地，就会被缓存，再次请求相当的src时就会优先寻找浏览器缓存，提高访问速度。
23>、缓存和预加载的区别是什么？
	缓存就是把请求过的数据缓存起来，下次请求的时候直接使用缓存内容，提高响应速度；
	预加载指的是提前把需要的内容加载完成，访问的时候可以明天提高响应效率，比如图片的预加载
	（可以提前加载一定数量的图片，当用户访问图片的时候一般只看前几张，由于是预加载好的，所以速度比较快）
24>、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？有多少种Doctype文档类型？
	1，<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。
	2，严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
	3，在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
	4，DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
	5，可声明三种文档类型，分别表示严格版本、过渡版本以及基于框架的类型。
	HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
	XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
	Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，
	Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
25>、在制作一个Web应用或Web站点的过程中，你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的？
	1、UI：界面美观，要有个性，考虑用户使用的逻辑要简单，用起来舒适自由。使用习惯要符合大部分用户的习惯，比如少让用户输入，采用选择的方式，提供搜索和提示功能。
	2、安全性：对输入进行有效性验证（非法字符，特殊字符）如PHP中的方法htmlspecialchars()将特殊字符（>）转化为html实体，trim()去掉用户输入的不必要字符，stripslashes()去掉用户输入的反斜杠等等。
	3、对交互操作进行身份验证和授权（api-key,authtoken）,异常错误处理（向用户反馈单额错误提示不要让攻击者分析出一些网络环境和配置），内存溢出，注入攻击等。
	4、高性能：
	a. DNS负载均衡
	b. HTTP重定向（通过使客户端重定向，来分散和转移请求压力，比如一些下载服务通常都有几个镜像服务器）
	c. 分布式缓存
	d. 负载均衡：反向代理负载均衡,
	e. 数据库扩展：读写分离，垂直分区，水平分区。
	f. SEO:选好关键字，描述语言，修饰性图片换成文本，合理使用h1-h6，对图片添加alt属性，链接添加target属性。
	g. 可维护性：代码是否容易被理解，是否容易被修改和增加新的功能，当出现问题时是否能快速定位到问题代码。

css部分

1>、CSS3有哪些新特性（包含哪些模块）？
	1、圆角border-radius、阴影box-shadow,text-shadow、渐变gradients、过渡transitions、
	动画animations、布局multi-columns, flex box, grid layout, Opacity,color(rgb,rgba,hsl,hsla )
	2、子串匹配的属性选择器:E[attribute^="value"], E[attribute$="value"], E[attribute="value"]
	3、新的伪类：
	:target, :enabled 和 :disabled,:checked,:indeterminate,:root,:nth-child 和 :nth-last-child,
	:nth-of-type和 :nth-last-of-type,:last-child,:first-of-type 和 :last-of-type,
	:only-child 和 :only-of-type,:empty,和 :not
	4、伪元素使用两个冒号而不是一个来表示：
	:after 变为 ::after, :before 变为 ::before,
	:first-letter 变为 ::first-letter, :first-line 变为 ::first-line。
	Css3:CSS即层叠样式表。
	在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式
2>、为什么要初始化CSS样式。
	因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
	最简单的初始化方法就是： {padding: 0; margin: 0;} （不建议）
	淘宝的样式初始化：
	body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
	body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
	h1