1、前端页面有哪三层构成？
(1) 网页结构层。由HTML 或XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出这些标签不包含任何关于如何显示有关内容的信息。
(2) 网页表达层。由css创建
2、 Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
(1) <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档、使用哪个版本的 HTML 规范来渲染文档。
(2) 严格模式、标准模式（Standards mode）的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
(3) 在混杂模式（Quirks mode）中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4) DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
3、你知道多少种Doctype文档类型？
(1) 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2）载入后，初始化新标签的css：
13、优雅降级和渐进增强
(1) 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
(2) 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
§ 渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
§ 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
14、浏览器是如何渲染页面的？
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
15、说说TCP传输的三次握手四次挥手策略
为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
断开一个TCP连接则需要“四次握手”：
§ 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
§ 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
§ 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
§ 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
16、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
（2）， 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦`TCP/IP`连接建立，浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，`Web`服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块
17、输入网址到现实的过程
3、DNS解析，获取IP地址
18、FOUC，什么是无样式内容闪烁?如何避免?
如果使用@import 方法对CSS进行导入，会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象：以无样式显示页面内容的瞬间闪烁，这种现象称之为文档样式短暂失效（Flash of Unstyled Content），简称为FOUC。
有几个样式表，放在html结构的不同位置。
当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
使用 link 标签加载CSS样式文件。因为 link 是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现 FOUC 问题。
19、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
20、label 的作用是什么? 是怎么用的?
label 标签用来定义表单控件间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
for属性功能：表示 label 标签要绑定的 HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。
accesskey属性功能：表示访问 label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
原因：浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的，所以在当浏览器在渲染HTML遇到了<script>标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行)，在这个过程中，页面渲染和交互都会被阻塞。所以将<script>放在</body>之前，当页面渲染完成再去执行<script>。
（1）内部的盒子会在垂直方向，一个个地放置；
（2）盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
（3）每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
（4）BFC的区域不会与float重叠；
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
（6）计算BFC的高度时，浮动元素也参与计算。
（1）内部的盒子会在水平方向，一个个地放置；
（2）IFC的高度，由里面最高盒子的高度决定；
（3）当一行不够放置的时候会自动切换到下一行；
在重合元素外包裹一层容器，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠。
24、HTML5的离线储存怎么使用，以及工作原理？
（1）原理：在线情况下，浏览器发现 HTML 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问，那么浏览器就会根据 manifest 文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。
然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。
24、如何实现浏览器内多个标签页之间的通信?
（2）可以调用 localstorge、cookie 等本地存储方式。localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
共同点：都是保存在浏览器端，且是同源的。
a、cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密），始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
a、localStorage：始终有效，存储持久数据，浏览器关闭数据不丢失，除非主动删除数据，否则数据是永远不会过期的。
b、sessionStorage：用于本地存储一个会话（session）中的数据。数据在当前浏览器窗口关闭后自动删除，不是一种持久化的本地存储，仅仅是会话级别的存储。
c、Cookie： 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。cookie还需要指定作用域，不可以跨域调用
a、sessionStorage：不在不同浏览器中共享，即使是同一页面
a、将登陆信息等重要信息存放为SESSION
b、其他信息如果需要保留，可以放在COOKIE中
(1) 每个特定的域名下最多生成的cookie个数有限制
(3) cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节
(4) 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。
cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。
第一：每个特定的域名下最多生成20个cookie
2、IE7和之后的版本最后可以有50个cookie。
cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。
IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。
优点：极高的扩展性和可用性
1、通过良好的编程，控制保存在cookie中的session对象的大小。
2、通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3、只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4、控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
1、`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉.
2、安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3、有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能、考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
1）将时间设为当前时间往前一点。
setDate()方法用于设置一个月的某一天。
<strong>标签和 <em>标签一样，用于强调文本，但它强调的程度更强一些。
< b >< i >是视觉要素，分别表示无意义的加粗，无意义的斜体。
HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 BadRequest 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
32、从前端角度谈谈seo(搜索引擎优化)需要考虑什么？
1）meta 标签，这个是重中之重
2）logo，给logo图片添加 h1 标签、a 链接连接到首页以及alt
// 这个href应该是要写线上的首页地址，比项目目录地址要好
4）a 标签，a 标签增加 title 属性，不可以有 href="#" 这种空指向写法，另外大量的 title 感觉体验也不是很好，不需要的地方可以不用。
a、h1 要分配给网站名称或给带 alt 标签的logo使用（这个前面也提到了），用以强调网站名称。
b、h2 标签用来定义站点副标题。如果没有副标题，h2 标签最好也空着，以备不时之需。
c、h3 标签用来定义导航栏目名称。
d、h4 标签用来定义文章列表标题，但大多数内容系统，文章列表输出用UL标签，所以h4可能就派不上用场，这里只是以此类推。浏览器会自动地在标题的前后添加空行。请确保将HTML heading标签只用于标题。不要仅仅是为了产生粗体或大号文本而使用标题因为搜索引擎使用标题为你的网页的结构和内容标志索引。
6）添加 robots.txt ，搭建网站与搜索引擎对话的桥梁
在项目根目录添加 robots.txt 文件，robots.txt 文件可以告诉搜索引擎哪些是重点，哪些又是可以忽略的，节约搜索引擎蜘蛛抓取网页的时间，也在一定程度上节省了服务器资源。
即是对方没有和你链接，你也是可以链接别人的，大概搜索引擎的算法体现了互联网“分享”的精神吧，通过外链网站的活跃度蹭点seo度。
33、对Web标准的理解
web标准简单来说可以分为结构、表现和行为。其中结构主要是有HTML标签组成。或许通俗点说，在页面body里面我们写入的标签都是为了页面的结构。
表现即指css样式表，通过css可以是页面的结构标签更具美感。
行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成。
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点
1）对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO很有帮助）
c、标签不允许随意嵌套
a、尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
b、样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版
c、不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。
34、很多网站不常用table iframe这两个元素，知道原因吗？
答：因为浏览器页面渲染的时候是从上至下的，而table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。
35、什么是渐进式渲染？
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
（1）图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。
（2）确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
（3）异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。
}
点击联系发帖人
