百度360必应搜狗淘宝本站头条
tomcat 乱码无法与服务器建立安全连接是什么意思sysv-rc-confdocker映射容器目录到宿主机internet explorer 增强的安全配置已启用
当前位置：网站首页 > 技术文章 > 正文

github最火，近5千star的前端必备知识点汇总(一)，前端开发必备

nanshan 2024-10-21 06:02 10 浏览 0 评论

本文资料来源于

https://github.com/qiu-deqing/FE-interview

目前已在github获得4700个star，在前端知识项目中名列第一。

本文主要分享该项目中的HTML， HTTP，web综合问题的知识点及面试题部分，后续分享剩余5个章节。

目录

  • 前端需要注意哪些SEO
  • web开发中会话跟踪的方法有哪些
  • <img>的title和alt有什么区别
  • doctype是什么,举例常见doctype及特点
  • HTML全局属性(global attribute)有哪些
  • 什么是web语义化,有什么好处
  • HTTP method
  • 从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
  • HTTP request报文结构是怎样的
  • HTTP response报文结构是怎样的
  • 如何进行网站性能优化
  • 什么是渐进增强
  • HTTP状态码及其含义

欢迎关注笔者，优质文章都在这里等你。

常见排序算法的时间复杂度,空间复杂度

前端需要注意哪些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. 提高网站速度：网站速度是搜索引擎排序的一个重要指标

web开发中会话跟踪的方法有哪些

  1. cookie
  2. session
  3. url重写
  4. 隐藏input
  5. ip地址

<img>的title和alt有什么区别

  1. title是global attributes之一，用于为元素提供附加的advisory information。通常当鼠标滑动到元素上的时候显示。
  2. alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

doctype是什么,举例常见doctype及特点

  1. <!doctype>声明必须处于HTML文档的头部，在<html>标签之前，HTML5中不区分大小写
  2. <!doctype>声明不是一个HTML标签，是一个用于告诉浏览器当前HTMl版本的指令
  3. 现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。
  4. 在HTML4.01中<!doctype>声明指向一个DTD，由于HTML4.01基于SGML，所以DTD指定了标记规则以保证浏览器正确渲染内容
  5. HTML5不基于SGML，所以不用指定DTD

HTML全局属性(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, link
  • hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
  • 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

  1. 一台服务器要与HTTP1.1兼容，只要为资源实现GET和HEAD方法即可
  2. GET是最常用的方法，通常用于请求服务器发送某个资源。
  3. HEAD与GET类似，但服务器在响应中值返回首部，不返回实体的主体部分
  4. PUT让服务器用请求的主体部分来创建一个由所请求的URL命名的新文档，或者，如果那个URL已经存在的话，就用干这个主体替代它
  5. POST起初是用来向服务器输入数据的。实际上，通常会用它来支持HTML的表单。表单中填好的数据通常会被送给服务器，然后由服务器将其发送到要去的地方。
  6. TRACE会在目的服务器端发起一个环回诊断，最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断，用于验证请求是否如愿穿过了请求/响应链。
  7. OPTIONS方法请求web服务器告知其支持的各种功能。可以查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。
  8. DELETE请求服务器删除请求URL指定的资源

从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

  1. 在浏览器地址栏输入URL
  2. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
  3. 如果资源未缓存，发起新请求
  4. 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。
  5. 检验新鲜通常有两个HTTP头进行控制Expires和Cache-Control：
  • HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期
  • HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
  1. 浏览器解析URL获取协议，主机，端口，path
  2. 浏览器组装一个HTTP（GET）请求报文
  3. 浏览器获取主机ip地址，过程如下：
  4. 浏览器缓存
  5. 本机缓存
  6. hosts文件
  7. 路由器缓存
  8. ISP DNS缓存
  9. DNS递归查询（可能存在负载均衡导致每次IP不一样）
  10. 打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
  11. 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
  12. 服务器发回SYN=1， ACK=X+1， Seq=Y的响应包
  13. 客户端发送ACK=Y+1， Seq=Z
  14. TCP链接建立后发送HTTP请求
  15. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
  16. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
  17. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作
  18. 服务器将响应报文通过TCP连接发送回浏览器
  19. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：
  20. 主动方发送Fin=1， Ack=Z， Seq= X报文
  21. 被动方发送ACK=X+1， Seq=Z报文
  22. 被动方发送Fin=1， ACK=X， Seq=Y报文
  23. 主动方发送ACK=Y， Seq=X报文
  24. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同
  25. 如果资源可缓存，进行缓存
  26. 对响应进行解码（例如gzip压缩）
  27. 根据资源类型决定如何处理（假设资源为HTML文档）
  28. 解析HTML文档，构件DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释
  29. 构建DOM树：
  30. Tokenizing：根据HTML规范将字符流解析为标记
  31. Lexing：词法分析将标记转换为对象并定义属性和规则
  32. DOM construction：根据HTML标记关系将对象组成DOM树
  33. 解析过程中遇到图片、样式表、js文件，启动下载
  34. 构建CSSOM树：
  35. Tokenizing：字符流转换为标记流
  36. Node：根据标记创建节点
  37. CSSOM：节点创建CSSOM树
  38. 根据DOM树和CSSOM树构建渲染树:
  39. 从DOM树的根节点遍历所有可见节点，不可见节点包括：1）script,meta这样本身不可见的标签。2)被css隐藏的节点，如display: none
  40. 对每一个可见节点，找到恰当的CSSOM规则并应用
  41. 发布可视节点的内容和计算样式
  42. js解析如下：
  43. 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading
  44. HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容
  45. 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用document.write()，它们可以访问自己script和之前的文档元素
  46. 当文档完成解析，document.readState变成interactive
  47. 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()
  48. 浏览器在Document对象上触发DOMContentLoaded事件
  49. 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete,window触发load事件
  50. 显示页面（HTML解析过程中会逐步显示页面）

HTTP request报文结构是怎样的

rfc2616中进行了定义：

  1. 首行是Request-Line包括：请求方法，请求URI，协议版本，CRLF
  2. 首行之后是若干行请求头，包括general-header，request-header或者entity-header，每个一行以CRLF结束
  3. 请求头和消息实体之间有一个CRLF分隔
  4. 根据实际请求需要可能包含一个消息实体 一个请求报文例子如下：
GET /Protocols/rfc2616/rfc2616-sec5.html HTTP/1.1
Host: www.w3.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Referer: https://www.google.com.hk/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
Cookie: authorstyle=yes
If-None-Match: "2cc8-3e3073913b100"
If-Modified-Since: Wed, 01 Sep 2004 13:24:52 GMT
name=qiu&age=25

HTTP response报文结构是怎样的

rfc2616中进行了定义：

  1. 首行是状态行包括：HTTP版本，状态码，状态描述，后面跟一个CRLF
  2. 首行之后是若干行响应头，包括：通用头部，响应头部，实体头部
  3. 响应头部和响应实体之间用一个CRLF空行分隔
  4. 最后是一个可能的消息实体 响应报文例子如下：
HTTP/1.1 200 OK
Date: Tue, 08 Jul 2014 05:28:43 GMT
Server: Apache/2
Last-Modified: Wed, 01 Sep 2004 13:24:52 GMT
ETag: "40d7-3e3073913b100"
Accept-Ranges: bytes
Content-Length: 16599
Cache-Control: max-age=21600
Expires: Tue, 08 Jul 2014 11:28:43 GMT
P3P: 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方面
  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS查询完成之前浏览器不能从这个主机下载任何任何文件。方法：DNS缓存、将资源分布到恰当数量的主机名，平衡并行下载和DNS查询
  3. 避免重定向：多余的中间访问
  4. 使Ajax可缓存
  5. 非必须组件延迟加载
  6. 未来所需组件预加载
  7. 减少DOM元素数量
  8. 将资源放到不同的域下：浏览器同时从一个域下载资源的数目有限，增加域可以提高并行下载量
  9. 减少iframe数量
  10. 不要404
  • Server方面
  1. 使用CDN
  2. 添加Expires或者Cache-Control响应头
  3. 对组件使用Gzip压缩
  4. 配置ETag
  5. Flush Buffer Early
  6. Ajax使用GET进行请求
  7. 避免空src的img标签
  • Cookie方面
  1. 减小cookie大小
  2. 引入资源的域名不要包含cookie
  • css方面
  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用不使用@import
  4. 不使用IE的Filter
  • Javascript方面
  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问
  6. 合理设计事件监听器
  • 图片方面
  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片
  4. 保证favicon.ico小并且可缓存
  • 移动方面
  1. 保证组件小于25k
  2. Pack Components into a Multipart Document

什么是渐进增强

渐进增强是指在web设计时强调可访问性、语义化HTML标签、外部样式表和脚本。保证所有人都能访问页面的基本内容和功能同时为高级浏览器和高带宽用户提供更好的用户体验。核心原则如下:

  • 所有浏览器都必须能访问基本内容
  • 所有浏览器都必须能使用基本功能
  • 所有内容都包含在语义化标签中
  • 通过外部CSS提供增强的布局
  • 通过非侵入式、外部javascript提供增强功能
  • end-user web browser preferences are respected

HTTP状态码及其含义

参考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等厂家面试题解读，编程语言理论或者互联网圈逸闻趣事这些感兴趣，欢迎关注笔者，没有错，干货文章都在这里。

相关推荐

服务器数据恢复—Raid5数据灾难不用愁，Raid5数据恢复原理了解下

Raid5数据恢复算法原理：分布式奇偶校验的独立磁盘结构（被称之为raid5）的数据恢复有一个“奇偶校验”的概念。可以简单的理解为二进制运算中的“异或运算”，通常使用的标识是xor。运算规则：若二者值...

服务器数据恢复—多次异常断电导致服务器raid不可用的数据恢复

服务器数据恢复环境&故障：由于机房多次断电导致一台服务器中raid阵列信息丢失。该阵列中存放的是文档，上层安装的是Windowsserver操作系统，没有配置ups。因为服务器异常断电重启后，rai...

服务器数据恢复-V7000存储更换磁盘数据同步失败的数据恢复案例

服务器数据恢复环境：P740+AIX+Sybase+V7000存储，存储阵列柜上共12块SAS机械硬盘（其中一块为热备盘）。服务器故障：存储阵列柜中有磁盘出现故障，工作人员发现后更换磁盘，新更换的磁盘...

「服务器数据恢复」重装系统导致XFS文件系统分区丢失的数据恢复

服务器数据恢复环境：DellPowerVault系列磁盘柜；用RAID卡创建的一组RAID5；分配一个LUN。服务器故障：在Linux系统层面对LUN进行分区，划分sdc1和sdc2两个分区。将sd...

服务器数据恢复-ESXi虚拟机被误删的数据恢复案例

服务器数据恢复环境：一台服务器安装的ESXi虚拟化系统，该虚拟化系统连接了多个LUN，其中一个LUN上运行了数台虚拟机，虚拟机安装WindowsServer操作系统。服务器故障&分析：管理员因误操作...

「服务器数据恢复」Raid5阵列两块硬盘亮黄灯掉线的数据恢复案例

服务器数据恢复环境：HPStorageWorks某型号存储；虚拟化平台为vmwareexsi；10块磁盘组成raid5(有1块热备盘)。服务器故障：raid5阵列中两块硬盘指示灯变黄掉线，无法读取...

服务器数据恢复—基于oracle数据库的SAP数据恢复案例

服务器存储数据恢复环境：某品牌服务器存储中有一组由6块SAS硬盘组建的RAID5阵列，其中有1块硬盘作为热备盘使用。上层划分若干lun，存放Oracle数据库数据。服务器存储故障&分析：该RAID5阵...

「服务器虚拟化数据恢复」Xen Server环境下数据库数据恢复案例

服务器虚拟化数据恢复环境：Dell某型号服务器；数块STAT硬盘通过raid卡组建的RAID10；XenServer服务器虚拟化系统；故障虚拟机操作系统：WindowsServer，部署Web服务...

服务器数据恢复—RAID故障导致oracle无法启动的数据恢复案例

服务器数据恢复环境：某品牌服务器中有一组由4块SAS磁盘做的RAID5磁盘阵列。该服务器操作系统为windowsserver，运行了一个单节点Oracle，数据存储为文件系统，无归档。该oracle...

服务器数据恢复—服务器磁盘阵列常见故障表现&amp;解决方案

RAID（磁盘阵列）是一种将多块物理硬盘整合成一个虚拟存储的技术，raid模块相当于一个存储管理的中间层，上层接收并执行操作系统及文件系统的数据读写指令，下层管理数据在各个物理硬盘上的存储及读写。相对...

「服务器数据恢复」IBM某型号服务器RAID5磁盘阵列数据恢复案例

服务器数据恢复环境：IBM某型号服务器；5块SAS硬盘组成RAID5磁盘阵列；存储划分为1个LUN和3个分区：第一个分区存放windowsserver系统，第二个分区存放SQLServer数据库，...

服务器数据恢复—Zfs文件系统下误删除文件如何恢复数据?

服务器故障：一台zfs文件系统服务器，管理员误操作删除服务器上的数据。服务器数据恢复过程：1、将故障服务器所有磁盘编号后取出，硬件工程师检测所有硬盘后没有发现有磁盘存在硬件故障。以只读方式将全部磁盘做...

服务器数据恢复—Linux+raid5服务器数据恢复案例

服务器数据恢复环境：某品牌linux操作系统服务器，服务器中有4块SAS接口硬盘组建一组raid5阵列。服务器中存放的数据有数据库、办公文档、代码文件等。服务器故障&检测：服务器在运行过程中突然瘫痪，...

服务器数据恢复—Sql Server数据库数据恢复案例

服务器数据恢复环境：一台安装windowsserver操作系统的服务器。一组由8块硬盘组建的RAID5，划分LUN供这台服务器使用。在windows服务器内装有SqlServer数据库。存储空间LU...

服务器数据恢复—阿里云ECS网站服务器数据恢复案例

云服务器数据恢复环境：阿里云ECS网站服务器，linux操作系统+mysql数据库。云服务器故障：在执行数据库版本更新测试时，在生产库误执行了本来应该在测试库执行的sql脚本，导致生产库部分表被tru...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表