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

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

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

相关推荐

小白初学linux之无法修改系统分辨率

/*此文是做为自己的一个总结还有就是最好也可以给大家提供一些帮助。*/时间：2020年7月14日11:28:41我安装的是Ubuntu20.04LTS，昨天处理的是，grub的引导问题，因为是...

Ubuntu 如何启动、停止或重启服务

在本文中，我们向您介绍在Ubuntu中启动、停止和重启服务的方法。列出Ubuntu中的所有服务在开始之前，先获取计算机上所有服务的列表，因为我们需要知道服务名称来管理服务。service--...

Win11学院:如何在Windows 11上使用WSL安装Ubuntu

IT之家2月18日消息，科技媒体pureinfotech昨日（2月17日）发布博文，介绍了3中简便的方法，让你轻松在Windows11系统中，使用WindowsSubs...

Linux安装中文输入法-Google拼音输入法，搜狗输入法

主要步骤，选择适合自己的尝试：1)卸载之前没装好的搜狗输入法。@:~/Downloads$sudoapt-getremovefcitx*删除依赖库@:~/Downloads$sudoap...

Ubuntu 22.04 请谨慎使用搜狗输入法，可能是你当机原因

在Ubunutu下没有什么有名的输入法，也就听说搜狗输入法有Linux版本，所以特意到官网去找了下载。在Ubuntu新版本里,他仍然用的是fcitx框架的输入引擎，而不是默认的ibus，所以要先把i...

前钢后胶!徐工XMR403VT小型压路机有点意思

【第一工程机械网原创】在越来越注重施工品质，对项目管理越来越精细化的今天，施工方在施工设备选择上，也越来越讲究设备的配套分工，因此小型压路机的应用场景也越来越多。徐工XMR403VT小型压路机高度集...

图大明白 | 404错误为什么是Not Found?为什么是404?

“404错误”大家都不陌生吧？常规来讲它长这样或者长这样艺术一点的长这样404NotFound意思就是所请求的页面不存在或者已被删除被称为“互联网最后一个界面”有很多同学发出疑问：为什么是404？...

Nginx负载均衡安全配置说明2（nginx负载均衡部署）

上一节，我们对Nginx安全配置的几个知识点做了一个说明，例如限制IP访问、文件目录禁止访问限制、需要防止DOS攻击、请求方法的限制和限制文件上传的大小这个进行了一个分析说明，详细的文章请关注我的头条...

惊艳写真系列第403期，本期主人公—叶青

惊艳写真系列第403期，本期主人公—叶青制作不易，欢迎各位看官提供宝贵意见。如果您喜欢记得关注，么么哒。您的每一份点赞和关注都是对作者的最大认可（图片素材均来源于网络，如有侵权联系删除。）本篇是写惊艳...

先秦布币之尖足布、圆足布、方足布，今年圆足最高拍卖价16万一枚

在战国魏、韩地区诞生桥足平首布、锐角平首布之后，赵也诞生了尖足平首布，并且在尖足布的基础上，后来相继派生出了圆足布、三孔布，以及类圆足布和类方足布。一尖足布尖足布是从耸肩尖足空首布演变而来的，是黄河...

403 禁止访问错误的全面排查与解决方案

当遇到403Forbidden错误时，意味着服务器已接收并理解请求，但拒绝执行访问操作。以下从用户端、服务器端等多个维度，提供分步排查与解决方法。一、用户端基础排查1.检查URL准确性确认...

这才是2019年夏最高颜值的泳装（2019夏季泳装秀）

最近的天气是越来越热了，又到了暑期泳衣勇闯海滩的时刻了，打开ins，微博满满地都是各大博主晒的泳装照，明星们也纷纷跑到海边去度假了。虽然我们没有超模般地身材，但是到了海边我们也要成为人群中最亮眼的那颗...

朋友圈爆火!这组《衡中班主任的一天》漫画，感动了无数人!

很多人觉得做老师很轻松他们说有些老师一天一节课就下班了有双休，还有寒暑假，真让人羡慕呀······但事实真是这样吗？最近衡水中学的赵心扬同学画了一组漫画形象地还原了衡中班主任一天的生活那么衡中班主任一...

国家安全教育 | 一组漫画，带你走进国家安全!

当前，我国面临哪些安全威胁？下面带你来看一组漫画！①你要配合，注意保密。我绝不对别人讲。②这件事，千万别对别人讲。③咱单位的…喂！老k！你要当心，有风声了！④你的泄密行为已触犯了国家法律！①请你协助了...

400、403、404、405，访问网页时出现这些代码是什么意思?

今天小泽访问一个页面时，出现了403，很抱歉，您的访问请求被禁止的提示。相信经常用电脑访问网页的朋友都遇到过这种情况，有的网页提示错误代码403，有的提示404，那这些代码都代表了什么呢？有什么含义呢...

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

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