https://github.com/qiu-deqing/FE-interview
目前已在github得到4700个star，在前端知识项目中名列第一。
本文紧张分享该项目中的HTML， HTTP，web综合问题的知识点及口试题部分，后续分享剩余5个章节。
欢迎关注笔者，优质文章都在这里等你。
常见排序算法的韶光繁芜度,空间繁芜度前端须要把稳哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，主要关键词涌现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度得当，不可过分堆砌关键词，不同页面description有所不同；keywords列举出主要关键词即可语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎随意马虎理解网页主要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限定，担保主要内容一定会被抓取主要内容不要用js输出：爬虫不会实行js获取内容少用iframe：搜索引擎不会抓取iframe中的内容非装饰性图片必须加alt提高网站速率：网站速率是搜索引擎排序的一个主要指标web开拓中会话跟踪的方法有哪些cookiesessionurl重写隐蔽inputip地址<img>的title和alt有什么差异
title是global attributes之一，用于为元素供应附加的advisory information。常日当鼠标滑动到元素上的时候显示。alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置故意义的值，搜索引擎会重点剖析。doctype是什么,举例常见doctype及特点
<!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写<!doctype>声明不是一个HTML标签，是一个用于见告浏览器当前HTMl版本的指令当代浏览器的html布局引擎通过检讨doctype决定利用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个靠近标准模型。在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，以是DTD指定了标记规则以担保浏览器精确渲染内容HTML5不基于SGML，以是不用指定DTDHTML全局属性(global attribute)有哪些参考资料：MDN: html global attribute或者W3C HTML global-attributes
accesskey:设置快捷键，供应快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素contenteditable: 指定元素内容是否可编辑contextmenu: 自定义鼠标右键弹出菜单内容data-: 为元素增加自定义属性dir: 设置元素文本方向draggable: 设置元素是否可拖拽dropzone: 设置元素拖放类型： copy, move, linkhidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果id: 元素id，文档内唯一lang: 元素内容的的措辞spellcheck: 是否启动拼写和语法检讨style: 行内css样式tabindex: 设置元素可以得到焦点，通过tab可以导航title: 元素干系的建议信息translate: 元素和子孙节点内容是否须要本地化什么是web语义化,有什么好处web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 HTML标签的语义化是指：通过利用包含语义的标签（如h1-h6）恰当地表示文档构造 css命名的语义化是指：为html标签添加故意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么须要语义化：
去掉样式后页面呈现清晰的构造盲人利用读屏器更好地阅读搜索引擎更好地理解页面，有利于收录便团队项目的可持续运作及掩护HTTP method一台做事器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可GET是最常用的方法，常日用于要求做事器发送某个资源。HEAD与GET类似，但做事器在相应中值返回顾部，不返回实体的主体部分PUT让做事器用要求的主体部分来创建一个由所要求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它POST起初是用来向做事器输入数据的。实际上，常日会用它来支持HTML的表单。表单中填好的数据常日会被送给做事器，然后由做事器将其发送到要去的地方。TRACE会在目的做事器端发起一个环回诊断，末了一站的做事器会弹回一个TRACE相应并在相应主体中携带它收到的原始要求报文。TRACE方法紧张用于诊断，用于验证要求是否如愿穿过了要求/相应链。OPTIONS方法要求web做事器奉告其支持的各种功能。可以查询做事器支持哪些方法或者对某些分外资源支持哪些方法。DELETE要求做事器删除要求URL指定的资源从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
在浏览器地址栏输入URL浏览器查看缓存，如果要求资源在缓存中并且新鲜，跳转到转码步骤如果资源未缓存，发起新要求如果已缓存，考验是否足够新鲜，足够新鲜直接供应给客户端，否则与做事器进行验证。考验新鲜常日有两个HTTP头进行掌握Expires和Cache-Control：HTTP1.0供应Expires，值为一个绝对韶光表示缓存新鲜日期HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜韶光浏览器解析URL获取协议，主机，端口，path浏览器组装一个HTTP（GET）要求报文浏览器获取主机ip地址，过程如下：浏览器缓存本机缓存hosts文件路由器缓存ISP DNS缓存DNS递归查询（可能存在负载均衡导致每次IP不一样）打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：客户端发送一个TCP的SYN=1，Seq=X的包到做事器端口做事器发回SYN=1， ACK=X+1， Seq=Y的相应包客户端发送ACK=Y+1， Seq=ZTCP链接建立后发送HTTP要求做事器接管要求并解析，将要求转发到做事程序，如虚拟主机利用HTTP Host头部判断要求的做事程序做事器检讨HTTP要求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码处理程序读取完全要求并准备HTTP相应，可能须要查询数据库等操作做事器将相应报文通过TCP连接发送回浏览器浏览器吸收HTTP相应，然后根据情形选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：主动方发送Fin=1， Ack=Z， Seq= X报文被动方发送ACK=X+1， Seq=Z报文被动方发送Fin=1， ACK=X， Seq=Y报文主动方发送ACK=Y， Seq=X报文浏览器检讨相应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情形处理与2XX不同如果资源可缓存，进行缓存对相应进行解码（例如gzip压缩）根据资源类型决定如何处理（假设资源为HTML文档）解析HTML文档，构件DOM树，下载资源，布局CSSOM树，实行js脚本，这些操作没有严格的先后顺序，以下分别阐明构建DOM树：Tokenizing：根据HTML规范将字符流解析为标记Lexing：词法剖析将标记转换为工具并定义属性和规则DOM construction：根据HTML标记关系将工具组成DOM树解析过程中碰着图片、样式表、js文件，启动下载构建CSSOM树：Tokenizing：字符流转换为标记流Node：根据标记创建节点CSSOM：节点创建CSSOM树根据DOM树和CSSOM树构建渲染树:从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐蔽的节点，如display: none对每一个可见节点，找到恰当的CSSOM规则并运用发布可视节点的内容和打算样式js解析如下：浏览器创建Document工具并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loadingHTML解析器碰着没有async和defer的script时，将他们添加到文档中，然后实行行内或外部脚本。这些脚本会同步实行，并且在脚本下载和实行时解析器会停息。这样就可以用document.write()把文本插入到输入流中。同步脚本常常大略定义函数和注册事宜处理程序，他们可以遍历和操作script和他们之前的文档内容当解析器碰着设置了async属性的script时，开始下载脚本并连续解析文档。脚本会在它下载完成后尽快实行，但是解析器不会停下来等它下载。异步脚本禁止利用document.write()，它们可以访问自己script和之前的文档元素当文档完成解析，document.readState变成interactive所有defer脚本会按照在文档涌现的顺序实行，延迟脚本能访问完全文档树，禁止利用document.write()浏览器在Document工具上触发DOMContentLoaded事宜此时文档完备解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和实行，document.readState变为complete,window触发load事宜显示页面（HTML解析过程中会逐步显示页面）HTTP request报文构造是若何的rfc2616中进行了定义：
首行是Request-Line包括：要求方法，要求URI，协议版本，CRLF首行之后是多少行要求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束要求头和实体之间有一个CRLF分隔根据实际要求须要可能包含一个实体 一个要求报文例子如下：GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1Host: www.w3.orgConnection: keep-aliveCache-Control: max-age=0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,/;q=0.8User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36Referer: https://www.google.com.hk/Accept-Encoding: gzip,deflate,sdchAccept-Language: zh-CN,zh;q=0.8,en;q=0.6Cookie: authorstyle=yesIf-None-Match: \"大众2cc8-3e3073913b100\"大众If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMTname=qiu&age=25
HTTP response报文构造是若何的
rfc2616中进行了定义：
首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF首行之后是多少行相应头，包括：通用头部，相应头部，实体头部相应头部和相应实体之间用一个CRLF空行分隔末了是一个可能的实体 相应报文例子如下：HTTP/1.1 200 OKDate: Tue, 08 Jul 2014 05:28:43 GMTServer: Apache/2Last-Modified: Wed, 01 Sep 2004 13:24:52 GMTETag: \"大众40d7-3e3073913b100\公众Accept-Ranges: bytesContent-Length: 16599Cache-Control: max-age=21600Expires: Tue, 08 Jul 2014 11:28:43 GMTP3P: policyref=\公众http://www.w3.org/2001/05/P3P/p3p.xml\公众Content-Type: text/html; charset=iso-8859-1{\"大众name\"大众: \公众qiu\公众, \"大众age\"大众: 25}如何进行网站性能优化
雅虎Best Practices for Speeding Up Your Web Site：
content方面减少HTTP要求：合并文件、CSS精灵、inline Image减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询避免重定向：多余的中间访问使Ajax可缓存非必须组件延迟加载未来所需组件预加载减少DOM元素数量将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量减少iframe数量不要404Server方面利用CDN添加Expires或者Cache-Control相应头对组件利用Gzip压缩配置ETagFlush Buffer EarlyAjax利用GET进行要求避免空src的img标签Cookie方面减小cookie大小引入资源的域名不要包含cookiecss方面将样式表放到页面顶部不该用CSS表达式利用不该用@import不该用IE的FilterJavascript方面将脚本放到页面底部将javascript和css从外部引入压缩javascript和css删除不须要的脚本减少DOM访问合理设计事宜监听器图片方面优化图片：根据实际颜色须要选择色深、压缩优化css精灵不要在HTML中拉伸图片担保favicon.ico小并且可缓存移动方面担保组件小于25kPack Components into a Multipart Document什么是渐进增强渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。担保所有人都能访问页面的基本内容和功能同时为高等浏览器和高带宽用户供应更好的用户体验。核心原则如下:
所有浏览器都必须能访问基本内容所有浏览器都必须能利用基本功能所有内容都包含在语义化标签中通过外部CSS供应增强的布局通过非侵入式、外部javascript供应增强功能end-user web browser preferences are respectedHTTP状态码及其含义参考RFC 2616
1XX：信息状态码100 Continue：客户端应该连续发送要求。这个临时相应是用来关照客户端它的部分要求已经被做事器吸收，且仍未被谢绝。客户端应该连续发送要求的剩余部分，或者如果要求已经完成，忽略这个相应。做事器必须在要求万仇向客户端发送一个终极相应101 Switching Protocols：做事器已经理解力客户真个要求，并将通过Upgrade头关照客户端采取不同的协议来完成这个要求。在发送完这个相应末了的空行后，做事器将会切换到Upgrade头中定义的那些协议。2XX：成功状态码200 OK：要求成功，要求所希望的相应头或数据体将随此相应返回201 Created：202 Accepted：203 Non-Authoritative Information：204 No Content：205 Reset Content：206 Partial Content：3XX：重定向300 Multiple Choices：301 Moved Permanently：302 Found：303 See Other：304 Not Modified：305 Use Proxy：306 （unused）：307 Temporary Redirect：4XX：客户端缺点400 Bad Request:401 Unauthorized:402 Payment Required:403 Forbidden:404 Not Found:405 Method Not Allowed:406 Not Acceptable:407 Proxy Authentication Required:408 Request Timeout:409 Conflict:410 Gone:411 Length Required:412 Precondition Failed:413 Request Entity Too Large:414 Request-URI Too Long:415 Unsupported Media Type:416 Requested Range Not Satisfiable:417 Expectation Failed:5XX: 做事器缺点500 Internal Server Error:501 Not Implemented:502 Bad Gateway:503 Service Unavailable:504 Gateway Timeout:505 HTTP Version Not Supported:您的转发+关注便是对笔者最大的支持，欢迎关注。对大厂架构设计，BAT等厂家口试题解读，编程措辞理论或者互联网圈逸闻趣事这些感兴趣，欢迎关注笔者，没有错，干货文章都在这里。
