前端面试题-HTML、HTTP、web综合问题(一)

这篇具有很好参考价值的文章主要介绍了前端面试题-HTML、HTTP、web综合问题(一)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

⼀、HTML、HTTP、web综合问题

1 前端需要注意哪些SEO

  • 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减⼩, title值强调重点即可,重要关键词出现不要超过2次,⽽且要靠前,不同⻚⾯ title 要有所不同; description 把⻚⾯内容⾼度概括,⻓度合适,不可过分堆砌关键词,不同⻚⾯description 有所不同; keywords 列举出重要关键词即可
  • 语义化的 HTML 代码,符合W3C规范:语义化代码让搜索引擎容易理解⽹⻚
  • 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下,有的搜索引擎对抓取⻓度有限制,保证重要内容⼀定会被抓取重要内容不要⽤ js 输出:爬⾍不会执⾏js获取内容
  • 少⽤ iframe :搜索引擎不会抓取 iframe 中的内容
  • ⾮装饰性图⽚必须加 alt
  • 提⾼⽹站速度:⽹站速度是搜索引擎排序的⼀个重要指标

2 的 title 和 alt 有什么区别

  • 通常当⿏标滑动到元素上的时候显示
  • alt 是 的特有属性,是图⽚内容的等价描述,⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性,除了纯装饰图⽚外都必须设置有意义的值,搜索引擎会重点分析。

3 HTTP的⼏种请求⽅法⽤途

  • GET ⽅法
    • 发送⼀个请求来取得服务器上的某⼀资源
  • POST ⽅法
    • 向 URL 指定的资源提交数据或附加新的数据
  • PUT ⽅法
    • 跟 POST ⽅法很像,也是想服务器提交数据。但是,它们之间有不同。 PUT 指定了资源在服务器上的位置,⽽ POST 没有
  • HEAD ⽅法
    • 只请求⻚⾯的⾸部
  • DELETE ⽅法
    • 删除服务器上的某资源
  • OPTIONS ⽅法
    • 它⽤于获取当前 URL 所⽀持的⽅法。如果请求成功,会有⼀个 Allow 的头包含类似 “GET,POST” 这样的信息
  • TRACE ⽅法
    • TRACE ⽅法被⽤于激发⼀个远程的,应⽤层的请求消息回路
  • CONNECT ⽅法
    • 把请求连接转换到透明的 TCP/IP 通道

4 从浏览器地址栏输⼊url到显示⻚⾯的步骤

基础版本
  • 浏览器根据请求的 URL 交给 DNS 域名解析,找到真实 IP ,向服务器发起请求;
  • 服务器交给后台处理完成后返回数据,浏览器接收⽂件( HTML、JS、CSS 、图象等);浏览器对加载到的资源( HTML、JS、CSS 等)进⾏语法解析,建⽴相应的内部数据结构(如 HTML 的 DOM );
  • 载⼊解析到的资源⽂件,渲染⻚⾯,完成。
详细版
  1. 在浏览器地址栏输⼊URL

  2. 浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
    2.1. 如果资源未缓存,发起新请求
    2.2. 如果已缓存,检验是否⾜够新鲜,⾜够新鲜直接提供给客户端,否则与服务器进⾏验证。
    2.3. 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control :
    * HTTP1.0提供Expires,值为⼀个绝对时间表示缓存新鲜⽇期
    * HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间

  3. 浏览器解析URL获取协议,主机,端⼝,path

  4. 浏览器组装⼀个HTTP(GET)请求报⽂

  5. 浏览器获取主机ip地址,过程如下:
    5.1. 浏览器缓存
    5.2. 本机缓存
    5.3. hosts⽂件
    5.4. 路由器缓存
    5.5. ISP DNS缓存
    5.6. DNS递归查询(可能存在负载均衡导致每次IP不⼀样)

  6. 打开⼀个socket与⽬标IP地址,端⼝建⽴TCP链接,三次握⼿如下:
    6.1. 客户端发送⼀个TCP的SYN=1,Seq=X的包到服务器端⼝
    6.2. 服务器发回SYN=1, ACK=X+1, Seq=Y的响应包
    6.3. 客户端发送ACK=Y+1, Seq=Z

  7. TCP链接建⽴后发送HTTP请求

  8. 服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使⽤HTTP Host头部判断请求的服务程序

  9. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码

  10. 处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作

  11. 服务器将响应报⽂通过TCP连接发送回浏览器

  12. 浏览器接收HTTP响应,然后根据情况选择关闭TCP连接或者保留重⽤,关闭TCP连接的四次握⼿如下:
    12.1. 主动⽅发送Fin=1, Ack=Z, Seq= X报⽂
    12.2. 被动⽅发送ACK=X+1, Seq=Z报⽂
    12.3. 被动⽅发送Fin=1, ACK=X, Seq=Y报⽂
    12.4. 主动⽅发送ACK=Y, Seq=X报⽂

  13. 浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同

  14. 如果资源可缓存,进⾏缓存

  15. 对响应进⾏解码(例如gzip压缩)

  16. 根据资源类型决定如何处理(假设资源为HTML⽂档)

  17. 解析HTML⽂档,构件DOM树,下载资源,构造CSSOM树,执⾏js脚本,这些操作没有严
    格的先后顺序,以下分别解释

  18. 构建DOM树:
    18.1. Tokenizing:根据HTML规范将字符流解析为标记
    18.2. Lexing:词法分析将标记转换为对象并定义属性和规则
    18.3. DOM construction:根据HTML标记关系将对象组成DOM树

  19. 解析过程中遇到图⽚、样式表、js⽂件,启动下载

  20. 构建CSSOM树:
    20.1. Tokenizing:字符流转换为标记流
    20.2. Node:根据标记创建节点
    20.3. CSSOM:节点创建CSSOM树

  21. 根据DOM树和CSSOM树构建渲染树 :
    21.1. 从DOM树的根节点遍历所有可⻅节点,不可⻅节点包括:1) script , meta 这样本身不可⻅的标签。2)被css隐藏的节点,如 display: none
    21.2. 对每⼀个可⻅节点,找到恰当的CSSOM规则并应⽤
    21.3. 发布可视节点的内容和计算样式

  22. js解析如下:
    22.1. 浏览器创建Document对象并解析HTML,将解析到的元素和⽂本节点添加到⽂档中,此时document.readystate为loading
    22.2. HTML解析器遇到没有async和defer的script时,将他们添加到⽂档中,然后执⾏⾏内或外部脚本。这些脚本会同步执⾏,并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序,他们可以遍历和操作script和他们之前的⽂档内容
    22.3. 当解析器遇到设置了async属性的script时,开始下载脚本并继续解析⽂档。脚本会在它下载完成后尽快执⾏,但是解析器不会停下来等它下载。异步脚本禁⽌使⽤document.write(),它们可以访问⾃⼰script和之前的⽂档元素
    22.4. 当⽂档完成解析,document.readState变成interactive
    22.5. 所有defer脚本会按照在⽂档出现的顺序执⾏,延迟脚本能访问完整⽂档树,禁⽌使⽤document.write()
    22.6. 浏览器在Document对象上触发DOMContentLoaded事件
    22.7. 此时⽂档完全解析完成,浏览器可能还在等待如图⽚等内容加载,等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏,document.readState变为complete,window触发load事件

  23. 显示⻚⾯(HTML解析过程中会逐步显示⻚⾯)
    详细简版
    23.1. 从浏览器接收 url 到开启⽹络请求线程(这⼀部分可以展开浏览器的机制以及进程与线程之间的关系)
    23.2. 开启⽹络线程到发出⼀个完整的 HTTP 请求(这⼀部分涉及到dns查询, TCP/IP 请求,五层因特⽹协议栈等知识)
    23.3. 从服务器接收到请求到对应后台接收到请求(这⼀部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
    23.4. 后台和前台的 HTTP 交互(这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识,可以提下静态资源的 cookie 优化,以及编码解码,如 gzip 压缩等)

23.5. 单独拎出来的缓存问题, HTTP 的缓存(这部分包括http缓存头部, ETag , catch-control 等)
23.6. 浏览器接收到 HTTP 数据包后的解析流程(解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树,然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等)
23.7. CSS 的可视化格式模型(元素的渲染规则,如包含块,控制框, BFC , IFC 等概念)
23.8. JS 引擎解析过程( JS 的解释阶段,预处理阶段,执⾏阶段⽣成执⾏上下⽂, VO ,作⽤域链、回收机制等等)
23.9. 其它(可以拓展不同的知识模块,如跨域,web安全, hybrid 模式等等内容)文章来源地址https://www.toymoban.com/news/detail-526361.html

5 如何进⾏⽹站性能优化

  • content ⽅⾯
    • 减少 HTTP 请求:合并⽂件、 CSS 精灵、 inline Image
    • 减少 DNS 查询: DNS 缓存、将资源分布到恰当数量的主机名
    • 减少 DOM 元素数量
  • Server ⽅⾯
    • 使⽤ CDN
    • 配置 ETag
    • 对组件使⽤ Gzip 压缩
  • Cookie ⽅⾯
    • 减⼩ cookie ⼤⼩
  • css ⽅⾯
    • 将样式表放到⻚⾯顶部
    • 不使⽤ CSS 表达式
    • 使⽤ 不使⽤ @import
  • Javascript ⽅⾯
    • 将脚本放到⻚⾯底部
    • 将 javascript 和 css 从外部引⼊
    • 压缩 javascript 和 css
    • 删除不需要的脚本
    • 减少 DOM 访问
  • 图⽚⽅⾯
    • 优化图⽚:根据实际颜⾊需要选择⾊深、压缩
    • 优化 css 精灵
    • 不要在 HTML 中拉伸图⽚
      6 HTTP状态码及其含义
  • 1XX :信息状态码
    • 100 Continue 继续,⼀般在发送 post 请求时,已发送了 http header 之后服务端将返回此信息,表示确认,之后发送具体参数信息
  • 2XX :成功状态码
    • 200 OK 正常返回信息
    • 201 Created 请求成功并且服务器创建了新的资源
    • 202 Accepted 服务器已接受请求,但尚未处理
  • 3XX :重定向
    • 301 Moved Permanently 请求的⽹⻚已永久移动到新位置。
    • 302 Found 临时性重定向。
    • 303 See Other 临时性重定向,且总是使⽤ GET 请求新的 URI 。
    • 304 Not Modified ⾃从上次请求后,请求的⽹⻚未修改过。
  • 4XX :客户端错误
    • 400 Bad Request 服务器⽆法理解请求的格式,客户端不应当尝试再次使⽤相同的内容发起请求。
    • 401 Unauthorized 请求未授权。
    • 403 Forbidden 禁⽌访问。
    • 404 Not Found 找不到如何与 URI 相匹配的资源。
  • 5XX: 服务器错误
    • 500 Internal Server Error 最常⻅的服务器端错误。
    • 503 Service Unavailable 服务器端暂时⽆法处理请求(可能是过载或维护)。

7 语义化的理解

  • ⽤正确的标签做正确的事情!
  • HTML 语义化就是让⻚⾯的内容结构化,便于对浏览器、搜索引擎解析;
  • 在没有样式 CSS 情况下也以⼀种⽂档格式显示,并且是容易阅读的。
  • 搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重,利于 SEO 。
  • 使阅读源代码的⼈对⽹站更容易将⽹站分块,便于阅读维护理解

8 介绍⼀下你对浏览器内核的理解?

  • 主要分成两部分:渲染引擎( layout engineer 或 Rendering Engine )和 JS 引擎
  • 渲染引擎:负责取得⽹⻚的内容( HTML 、 XML 、图像等等)、整理讯息(例如加⼊CSS 等),以及计算⽹⻚的显示⽅式,然后会输出⾄显示器或打印机。浏览器的内核的不同对于⽹⻚的语法解释会有不同,所以渲染的效果也不相同。所有⽹⻚浏览器、电⼦邮件客户端以及其它需要编辑、显示⽹络内容的应⽤程序都需要内核
  • JS 引擎则:解析和执⾏ javascript 来实现⽹⻚的动态效果
  • 最开始渲染引擎和 JS 引擎并没有区分的很明确,后来JS引擎越来越独⽴,内核就倾向于只指渲染引擎

9 html5有哪些新特性、移除了那些元素?

  • HTML5 现在已经不是 SGML 的⼦集,主要是关于图像,位置,存储,多任务等功能的增加
    • 绘画 canvas
    • ⽤于媒介回放的 video 和 audio 元素
    • 本地离线存储 localStorage ⻓期存储数据,浏览器关闭后数据不丢失
    • sessionStorage 的数据在浏览器关闭后⾃动删除
    • 语意化更好的内容元素,⽐如 article 、 footer 、 header 、 nav 、 section
    • 表单控件, calendar 、 date 、 time 、 email 、 url 、 search
    • 新的技术 webworker 、 websocket 、 Geolocation
  • 移除的元素:
    • 纯表现的元素: basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
    • 对可⽤性产⽣负⾯影响的元素: frame 、 frameset 、 noframes
  • ⽀持 HTML5 新标签:
    • IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签
    • 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签
    • 浏览器⽀持新标签后,还需要添加标签默认的样式
  • 当然也可以直接使⽤成熟的框架、⽐如 html5shim

10 HTML5 的离线储存怎么使⽤,⼯作原理能不能解释⼀下?

  • 在⽤户没有与因特⽹连接时,可以正常访问站点或应⽤,在⽤户与因特⽹连接时,更新⽤户机器上的缓存⽂件
  • 原理: HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技术),通过这个⽂件上的解析清单离线存储资源,这些资源就会像 cookie ⼀样被存储了下来。之后当⽹络在处于离线状态下时,浏览器会通过被离线存储的数据进⾏⻚⾯展示
  • 如何使⽤:
    • ⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性;
    • 在 cache.manifest ⽂件的编写离线存储的资源
    • 在离线状态时,操作 window.applicationCache 进⾏需求实现

11 浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢

  • 在线的情况下,浏览器发现 html 头部有 manifest 属性,它会请求 manifest ⽂件,如果是第⼀次访问 app ,那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过 app 并且资源已经离线存储了,那么浏览器就会使⽤离线的资源加载⻚⾯,然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件,如果⽂件没有发⽣改变,就不做任何操作,如果⽂件改变了,那么就会重新下载⽂件中的资源并进⾏离线存储。
  • 离线的情况下,浏览器就直接使⽤离线存储的资源。
 CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html
json

12 请描述⼀下 cookies , sessionStorage 和 localStorage 的区别?

  • cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端(Client Side)上的数据(通常经过加密)
  • cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递
  • sessionStorage 和 localStorage 不会⾃动把数据发给服务器,仅在本地保存
    *存储⼤⼩:
    • cookie 数据⼤⼩不能超过4k
    • sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制,但⽐ cookie ⼤得多,可以达到5M或更⼤
  • 有期时间:
    • localStorage 存储持久数据,浏览器关闭后数据不丢失除⾮主动删除数据
    • sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除
    • cookie 设置的 cookie 过期时间之前⼀直有效,即使窗⼝或浏览器关闭

13 iframe有那些缺点?

  • iframe 会阻塞主⻚⾯的 Onload 事件
  • 搜索引擎的检索程序⽆法解读这种⻚⾯,不利于 SEO
    iframe 和主⻚⾯共享连接池,⽽浏览器对相同域的连接有限制,所以会影响⻚⾯的并⾏加载
  • 使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ,最好是通过javascript 动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题

到了这里,关于前端面试题-HTML、HTTP、web综合问题(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【学姐面试宝典】—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)

    前言 博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天开始学习前端面试题相关的知识! 感兴趣的小伙伴一起来看看吧~🤞 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服 务器端请求和应答的标准(TCP),用于从 WW

    2024年02月19日
    浏览(46)
  • web前端综合案例——小兔鲜首页(html+css)

    前言:我这里只使用了html和css,js没有使用 项目源代码:https://pan.baidu.com/s/1alnekYEu5F9XwHTW7dO5RA?pwd=qjhd 页面效果:   1.准备项目相应的图片素材,设计稿。 2.创建项目: 2.1 项目名字为:xtx-pc-client 2.2 css里面创建了三个分别为         base.css 这个是全局设置的元素       

    2024年02月07日
    浏览(47)
  • web前端面试-- http的各个版本的区别(HTTP/0.9、HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP/3.0)

    本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处 HTTP(超文本传输协议)是用于在网络上传输和接收超文本的协议。HTTP的各个版本有以下区别: HTTP/0.9 :这是最早的版本,

    2024年02月07日
    浏览(39)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(72)
  • 8.物联网LWIP,简要介绍http(超文本,URL),html(css,ajax),web实现打开灯

    一。HTTP详解 1.超文本:(HyperText) (1)超文本文件彼此链接,形成 网状 (web),内含有 超链接 (Link)与各种 媒体元素标记 (Markup)。 (2)超文本文件彼此 链接使用URL 表示。(下面解释URL) (3)常见超文本格式是 超文本标记 语言 HTML 。(下面解释HTML,代码) 综上

    2024年02月10日
    浏览(51)
  • 【朝夕教育】2023年03月 其他-Web前端基础面试题(http_20道)

    一、http/浏览器 1、说一下http和https https 的 SSL 加密是在传输层实现的。 (1)http 和 https 的基本概念 http: 超文本传输协议,是互联网上应用最为广泛的一种网络协议,是一个客户端和服 务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的传 输协议,它

    2023年04月09日
    浏览(41)
  • Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

    Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流: Windows上搭建Nginx RTMP服务器并使用FFmpeg实现本地视频推流_win nginx-rtmp最新版_霸道流氓气质的博客-CSDN博客 Vue中使用vue-video-player和videojs-flash插件实现播放rtmp视频文件流: Vue中使用vue-video-player和videojs-flash插件实现播放

    2024年02月03日
    浏览(45)
  • 前端基础第一天-html-综合案例

    通过综合案例,主要复习: 目录文件夹 今日所学标签 路径 锚点链接

    2024年02月14日
    浏览(45)
  • 前端面试题 ===> 【HTML】

    去掉或者丢失样式的时候能够让页面呈现出清晰的结构; 代码结构清晰,方便团队的管理和维护,并且语义化更具有可读性,减少差异化; 提升用户体验; 例如: title、alt 用于解释名词或者图片信息、 label 标签的活用 有利于SEO优化,提升搜索引擎排名; 和搜索引擎建立良

    2024年03月14日
    浏览(47)
  • html学习之路:简述html文档头部 <meta> 的 http-equiv 属性

    🧋当输入网址打开网页时,设置html头部 meta 的 http-equiv 属性,可以帮助浏览器更加精确和正常却的显示网页内容,比如设置网页多久自动刷新,设置网页在浏览器缓存中的时限,设置多少事件跳转到指定的网页地址,应对低版本浏览器的渲染兼容问题,以什么样动态的样式

    2024年02月02日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包