前端面试知识总结

html部分

• 合理的title、description、keywords：搜索对这三项的权重逐个减小，title值强调重点即可，重要的关键字出现不要超过2次，而且要靠前，不同页面的title要有所不同；description把页面内容高度概括，长度合适，不同页面要有所不同；keywords列举出重要关键词即可
• 语义化的html代码符合w3c规范，语义化代码让搜索引擎容易理解网页
• 重要的内容的html代码放在最前面：搜索引擎抓取html顺序是从上到下，保证重要内容一定会被抓取
• 重要的内容不要用js输出，爬虫不会执行js获取的内容
• img中title和alt的区别：title是html元素的属性，鼠标移到元素上时候显示，
  alt是img特有的属性，是图片内容的等价描述，用于图片无法加载时显示，除了纯修饰图片外都必须设置有意义的值，搜索引擎会重点分析
• doctype声明必须处于html文档头部，在html标签前，html5不区分大小写。它是用于告诉浏览器以哪种模式对文档进行渲染，其中有兼容模式和标准模式
• html全局属性class data-* contenteditable dir draggable hidden id lang style title translate tabindex spellcheck
• web语义化好处：1.去掉样式后页面呈现清晰的结构 2.盲人使用读屏器更好的阅读 3.搜索引擎更好的理解页面，有利于seo 4.便于团队项目的可持续运作及维护

css部分

javascript部分

网络部分

从浏览器地址栏输入url到显示页面的步骤

1. 浏览器地址栏输出地址
2. 浏览器查看缓存，如果请求资源在缓存中且新鲜，跳转到转码步骤
   1. 如果资源未缓存，发起新请求
   2. 如果已缓存，检验是否新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证
      3.检验新鲜通过有两个http头进行控制expires 和cache-control:
      * expires值位一个绝对时间表示缓存新鲜日期
      * cache-control: max-age=,值为以秒为单位的最大新鲜时间
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个HTTP（GET）请求报文
5. 浏览器获取主机ip地址
   • 浏览器缓存
   • 本机缓存
   • hosts文件
   • 路由器缓存
   • isp dns缓存
   • dns递归查询
6. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
   • 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
   • 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
   • 客户端发送ACK=Y+1， Seq=Z
7. tcp连接建立后发送http请求
   8.服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
8. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
9. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
10. 服务器将响应报文通过TCP连接发送回浏览器
11. 浏览器接收http响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
    • 主动方发送Fin=1， Ack=Z， Seq= X报文
    • 被动方发送ACK=X+1， Seq=Z报文
    • 被动方发送Fin=1， ACK=X， Seq=Y报文
    • 主动方发送ACK=Y， Seq=X报文
12. 浏览器检查响应状态码：是否为1xx 3xx 4xx 5xx，这里情况和2xx不同
13. 如果资源可以缓存，进行缓存
14. 对响应进行解码（gzip压缩）
15. 根据资源类型决定如何处理（假定为html）
16. 解析html文档，构建dom树，下载资源，构建cssom树，执行js脚本
17. 构建dom树:根据html标记关系将对象组成dom树
18. 解析过程中遇到图片，样式表，js文件启动下载
19. 构建cssom树：从根节点开始遍历所有节点，构建dom树
20. 根据dom和cssom树，利用渲染引擎渲染出来
21. 利用js引擎渲染js脚本
22. 显示页面。（html在解析过程中会逐步显示页面）

http request报文结构

1. 首行是request-line包括：请求方法、请求url、协议版本、CRLF
2. 首行后是若干行请求头，包括general-header，request-header等
3. 请求头和消息实体之间有一个CRLF分隔
4. 根据实际请求需要可能包含一个消息实体

http respose报文结构

1. 首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
2. 首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
3. 响应头部和响应实体之间用一个CRLF空行分隔
4. 最后是一个可能的消息实体