|
% W" E, | ?2 S8 l. s/ e 本文资料来源于https://github.com/qiu-deqing/FE-interview目前已在github获得4700个star，在前端知识项目中名列第一本文主要分享该项目中的HTML， HTTP，web综合问题的知识点及面试题部分，后续分享剩余5个章节。
7 }& _' w! I- z3 n, i, h1 a0 n 目录前端需要注意哪些SEOweb开发中会话跟踪的方法有哪些的title和alt有什么区别doctype是什么,举例常见doctype及特点HTML全局属性(global attribute)有哪些 4 Z' h5 S, B' ]6 r3 R# j! X
什么是web语义化,有什么好处HTTP method从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)HTTP request报文结构是怎样的HTTP response报文结构是怎样的如何进行网站性能优化
f' {- L d; _) R. S+ I7 L 什么是渐进增强HTTP状态码及其含义欢迎关注笔者，优质文章都在这里等你。常见排序算法的时间复杂度,空间复杂度 
) Y% }# S1 s! H3 G7 E0 ` 前端需要注意哪些SEO合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
) k/ c9 n+ c. a 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取重要内容不要用js输出：爬虫不会执行js获取内容
- y- N- x% |2 Q. P 少用iframe：搜索引擎不会抓取iframe中的内容非装饰性图片必须加alt提高网站速度：网站速度是搜索引擎排序的一个重要指标web开发中会话跟踪的方法有哪些cookiesessionurl重写隐藏input
4 c1 s4 A! J8 v3 U& `7 F ip地址的title和alt有什么区别title是global attributes之一，用于为元素提供附加的advisory information通常当鼠标滑动到元素上的时候显示alt是的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。
/ ^- k( e6 A: O! d! G 可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析doctype是什么,举例常见doctype及特点声明必须处于HTML文档的头部，在标签之前，HTML5中不区分大小写
' @7 R5 m, X. {: Y 声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。 6 }4 L$ Z$ P& }
在HTML4.01中声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容HTML5不基于SGML，所以不用指定DTDHTML全局属性(global attribute)有哪些 , @0 ]; V# C3 k- g5 Y% H, n
参考资料：MDN: html global attribute或者W3C HTML global-attributesaccesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素 ) ?# |5 N0 E j
class:为元素设置类标识，多个类名用空格分开，CSS和javascript可通过class属性获取元素contenteditable: 指定元素内容是否可编辑contextmenu: 自定义鼠标右键弹出菜单内容 # D( L& z( o1 v$ L
data-*: 为元素增加自定义属性dir: 设置元素文本方向draggable: 设置元素是否可拖拽dropzone: 设置元素拖放类型： copy, move, linkhidden: 表示一个元素是否与文档。
7 K. G1 z9 j% |: B) O& w2 G" z 样式上会导致元素不显示，但是不能用这个属性实现样式效果id: 元素id，文档内唯一lang: 元素内容的的语言spellcheck: 是否启动拼写和语法检查style: 行内css样式tabindex: 设置元素可以获得焦点，通过tab可以导航
, g% D u3 J2 G; A title: 元素相关的建议信息translate: 元素和子孙节点内容是否需要本地化什么是web语义化,有什么好处web语义化是指通过HTML标记表示页面包含的信息，包含了HTML标签的语义化和css命名的语义化。 + M& q0 T9 D5 g4 g( N& O
HTML标签的语义化是指：通过使用包含语义的标签（如h1-h6）恰当地表示文档结构 css命名的语义化是指：为html标签添加有意义的class，id补充未表达的语义，如Microformat通过添加符合规则的class描述信息 为什么需要语义化：。
* H B, i! x, e# p, x* \0 Z 去掉样式后页面呈现清晰的结构盲人使用读屏器更好地阅读搜索引擎更好地理解页面，有利于收录便团队项目的可持续运作及维护 
9 S$ |9 ^0 A2 `6 d: p" w5 k HTTP method一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可GET是最常用的方法，通常用于请求服务器发送某个资源HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分。
" i& [3 e5 E z! z# K$ s PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它POST起初是用来向服务器输入数据的实际上，通常会用它来支持HTML的表单表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
; X8 i4 @& Q2 g% d9 l( ?# l- b TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链OPTIONS方法请求web服务器告知其支持的各种功能。 ; H' a( T" x. r6 Q* k ?
可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法DELETE请求服务器删除请求URL指定的资源从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)在浏览器地址栏输入URL浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
. O0 h1 c$ E1 M( ` 如果资源未缓存，发起新请求如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期。
# q) g6 ]5 G2 Y HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间浏览器解析URL获取协议，主机，端口，path浏览器组装一个HTTP（GET）请求报文浏览器获取主机ip地址，过程如下：
! w l+ z, O! `" p3 \6 K. ? 浏览器缓存本机缓存hosts文件路由器缓存ISP DNS缓存DNS递归查询（可能存在负载均衡导致每次IP不一样）打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
% N$ W* V S- \' M 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包客户端发送ACK=Y+1， Seq=ZTCP链接建立后发送HTTP请求服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序 ; w t0 ^$ C [. `1 M2 r* P5 H) y+ B
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作服务器将响应报文通过TCP连接发送回浏览器浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下： 2 S7 p2 L" a4 p. e8 W0 k5 L* R; G
主动方发送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不同
+ j w$ e3 h, {( i' F$ ]4 v5 J 如果资源可缓存，进行缓存对响应进行解码（例如gzip压缩）根据资源类型决定如何处理（假设资源为HTML文档）解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释 7 ^; l' ], O, L% A( R
构建DOM树：Tokenizing：根据HTML规范将字符流解析为标记Lexing：词法分析将标记转换为对象并定义属性和规则DOM construction：根据HTML标记关系将对象组成DOM树解析过程中遇到图片、样式表、js文件，启动下载 , K% l( f6 F* E, w- ^
构建CSSOM树：Tokenizing：字符流转换为标记流Node：根据标记创建节点CSSOM：节点创建CSSOM树根据DOM树和CSSOM树构建渲染树:从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。 . ?6 E' V; m7 ]7 o
2)被css隐藏的节点，如display: none对每一个可见节点，找到恰当的CSSOM规则并应用发布可视节点的内容和计算样式js解析如下：浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
2 F8 @" c. Y' P5 `1 N HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停这样就可以用document.write()把文本插入到输入流中。 : S- h4 U, E6 P9 A% R
同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。 8 x; s! |& X2 S. l; H) S& p
异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素当文档完成解析，document.readState变成interactive所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
. e' C( k6 [8 `/ \+ I: F 浏览器在Document对象上触发DOMContentLoaded事件此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件 ' J* |& P! J+ J/ p0 Y1 E
显示页面（HTML解析过程中会逐步显示页面）HTTP request报文结构是怎样的rfc2616中进行了定义：首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
) T% `: t: P' |1 k% W# v1 q F% C 请求头和消息实体之间有一个CRLF分隔根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1& n, e: C+ b- W0 h7 p
Host: www.w3.org
6 b0 F( I9 j+ {! m Connection: keep-alive
; d E- t! ~* E: J Cache-Control: max-age=0 P( K7 C) g9 z. k8 Z* K
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
! @9 S$ G& R- U, Y4 X8 E$ d User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
! m( K; l) `: L! \ Referer: https://www.google.com.hk/
# B3 B3 V e( m6 h7 [9 `/ r& b Accept-Encoding: gzip,deflate,sdch
6 H0 q6 N+ _& |& H Accept-Language: zh-CN,zh;q=0.8,en;q=0.6- v$ b$ m! D0 K3 ]/ X9 ?: i& f7 h
Cookie: authorstyle=yes
+ s; [ e+ J% Q$ S- t5 Y If-None-Match: "2cc8-3e3073913b100"+ Q7 P1 \5 Z0 T# Y
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT" ^ s; `* k; g* y# F' }* e1 {) |
name=qiu&age=259 D$ {4 c, n7 f& y
; N, m. l2 x+ p. f `3 U" {9 V HTTP response报文结构是怎样的rfc2616中进行了定义：首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF首行之后是若干行响应头，包括：通用头部，响应头部，实体头部响应头部和响应实体之间用一个CRLF空行分隔 ' T3 e" `' m- ?- n' o/ I' ` ?
最后是一个可能的消息实体 响应报文例子如下：HTTP/1.1 200 OK
" L" |* P$ v, i: Q$ }4 F Date: Tue, 08 Jul 2014 05:28:43 GMT
2 i' N7 U9 U* N( L* z Server: Apache/2
9 o w/ q1 B. P/ F1 Y: x Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT; ^% E4 K1 W( m7 H+ g z% _
ETag: "40d7-3e3073913b100"& H0 t2 E, v/ M% n" p
Accept-Ranges: bytes
4 G4 W m# ]$ V6 ]/ J# F# x* r! O Content-Length: 165995 h7 O, ?$ ]" ~. K$ ^- w! J: \, ~
Cache-Control: max-age=21600* g) A6 @! a% o Q; Y
Expires: Tue, 08 Jul 2014 11:28:43 GMT& ]. {" Y# u- Q9 L* W( c# W2 ?" ^
P3P: policyref="http://www.w3.org/2001/05/P3P/p3p.xml"/ \3 l; I& T& W. I3 A
Content-Type: text/html; charset=iso-8859-1/ X: y. J5 }: J+ o: e# n5 X- a9 n0 I
{"name": "qiu", "age": 25}
; Y9 V8 \! Y" Q; l( {: t( ^ $ ^3 w" R( y$ ?7 H- C! t% `
如何进行网站性能优化雅虎Best Practices for Speeding Up Your Web Site：content方面减少HTTP请求：合并文件、CSS精灵、inline Image减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。 ) @9 Z. H& f9 ^2 U3 I) _
方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询避免重定向：多余的中间访问使Ajax可缓存非必须组件延迟加载未来所需组件预加载减少DOM元素数量将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
% l2 P B, p2 W6 Y/ j 减少iframe数量不要404Server方面使用CDN添加Expires或者Cache-Control响应头对组件使用Gzip压缩配置ETagFlush Buffer EarlyAjax使用GET进行请求
5 |6 f' ?# s# z 避免空src的img标签Cookie方面减小cookie大小引入资源的域名不要包含cookiecss方面将样式表放到页面顶部不使用CSS表达式使用不使用@import不使用IE的FilterJavascript方面 3 P% c! a" q' X# M9 g
将脚本放到页面底部将javascript和css从外部引入压缩javascript和css删除不需要的脚本减少DOM访问合理设计事件监听器图片方面优化图片：根据实际颜色需要选择色深、压缩优化css精灵不要在HTML中拉伸图片 7 t) E/ ]6 d* j5 n& c
保证favicon.ico小并且可缓存移动方面保证组件小于25kPack Components into a Multipart Document什么是渐进增强渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。 ) P3 @& ~3 ?9 _( t( `3 {) O
保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验核心原则如下:所有浏览器都必须能访问基本内容所有浏览器都必须能使用基本功能所有内容都包含在语义化标签中通过外部CSS提供增强的布局 ( s2 x W( k2 C0 W
通过非侵入式、外部javascript提供增强功能end-user web browser preferences are respectedHTTP状态码及其含义参考RFC 26161XX：信息状态码 & O1 M L: f( H! G X
100 Continue：客户端应当继续发送请求这个临时相应是用来通知客户端它的部分请求已经被服务器接收，且仍未被拒绝客户端应当继续发送请求的剩余部分，或者如果请求已经完成，忽略这个响应服务器必须在请求万仇向客户端发送一个最终响应。
" M, J# }$ w9 K7 G5 c. L- V 101 Switching Protocols：服务器已经理解力客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求在发送完这个响应最后的空行后，服务器将会切换到Upgrade消息头中定义的那些协议。 + L/ k1 ?4 w% m& Z7 S) }3 S' v7 I
2XX：成功状态码200 OK：请求成功，请求所希望的响应头或数据体将随此响应返回201 Created：202 Accepted：203 Non-Authoritative Information：204 No Content：
$ ^2 E* ]3 F, l" H m6 V# G 205 Reset Content：206 Partial Content：3XX：重定向300 Multiple Choices：301 Moved Permanently：302 Found：303 See Other：
& S( Z& m7 Y6 a# e 304 Not Modified：305 Use Proxy：306 （unused）：307 Temporary Redirect：4XX：客户端错误400 Bad Request:401 Unauthorized: # ` l2 \; U5 u
402 Payment Required:403 Forbidden:404 Not Found:405 Method Not Allowed:406 Not Acceptable:407 Proxy Authentication Required: 9 I$ b8 |* L" P
408 Request Timeout:409 Conflict:410 Gone:411 Length Required:412 Precondition Failed:413 Request Entity Too Large:
$ v3 ?' o# o' d% p0 m 414 Request-URI Too Long:415 Unsupported Media Type:416 Requested Range Not Satisfiable:417 Expectation Failed: % Z" q- Q _, h- N
5XX: 服务器错误500 Internal Server Error:501 Not Implemented:502 Bad Gateway:503 Service Unavailable:504 Gateway Timeout: ( B8 \. ^6 ~' V( l+ y! y# F! R
505 HTTP Version Not Supported:您的转发+关注就是对笔者最大的支持，欢迎关注对大厂架构设计，BAT等厂家面试题解读，编程语言理论或者互联网圈逸闻趣事这些感兴趣，欢迎关注笔者，没有错，干货文章都在这里。  4 G* [6 J" Q; m2 b: N: l
1 f! q; f0 b/ G2 `9 q7 Y; i' j2 Z; n
6 C' P% a2 f A( o
) R, T$ l8 R8 N1 Y; r7 E6 m! `9 @/ Y) O2 A: c; A% U. O
| 
