⼀、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 );
- 载⼊解析到的资源⽂件,渲染⻚⾯,完成。
详细版
-
在浏览器地址栏输⼊URL
-
浏览器查看缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
2.1. 如果资源未缓存,发起新请求
2.2. 如果已缓存,检验是否⾜够新鲜,⾜够新鲜直接提供给客户端,否则与服务器进⾏验证。
2.3. 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control :
* HTTP1.0提供Expires,值为⼀个绝对时间表示缓存新鲜⽇期
* HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间 -
浏览器解析URL获取协议,主机,端⼝,path
-
浏览器组装⼀个HTTP(GET)请求报⽂
-
浏览器获取主机ip地址,过程如下:
5.1. 浏览器缓存
5.2. 本机缓存
5.3. hosts⽂件
5.4. 路由器缓存
5.5. ISP DNS缓存
5.6. DNS递归查询(可能存在负载均衡导致每次IP不⼀样) -
打开⼀个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 -
TCP链接建⽴后发送HTTP请求
-
服务器接受请求并解析,将请求转发到服务程序,如虚拟主机使⽤HTTP Host头部判断请求的服务程序
-
服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜,返回304等对应状态码
-
处理程序读取完整请求并准备HTTP响应,可能需要查询数据库等操作
-
服务器将响应报⽂通过TCP连接发送回浏览器
-
浏览器接收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报⽂ -
浏览器检查响应状态吗:是否为1XX,3XX, 4XX, 5XX,这些情况处理与2XX不同
-
如果资源可缓存,进⾏缓存
-
对响应进⾏解码(例如gzip压缩)
-
根据资源类型决定如何处理(假设资源为HTML⽂档)
-
解析HTML⽂档,构件DOM树,下载资源,构造CSSOM树,执⾏js脚本,这些操作没有严
格的先后顺序,以下分别解释 -
构建DOM树:
18.1. Tokenizing:根据HTML规范将字符流解析为标记
18.2. Lexing:词法分析将标记转换为对象并定义属性和规则
18.3. DOM construction:根据HTML标记关系将对象组成DOM树 -
解析过程中遇到图⽚、样式表、js⽂件,启动下载
-
构建CSSOM树:
20.1. Tokenizing:字符流转换为标记流
20.2. Node:根据标记创建节点
20.3. CSSOM:节点创建CSSOM树 -
根据DOM树和CSSOM树构建渲染树 :
21.1. 从DOM树的根节点遍历所有可⻅节点,不可⻅节点包括:1) script , meta 这样本身不可⻅的标签。2)被css隐藏的节点,如 display: none
21.2. 对每⼀个可⻅节点,找到恰当的CSSOM规则并应⽤
21.3. 发布可视节点的内容和计算样式 -
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事件 -
显示⻚⾯(HTML解析过程中会逐步显示⻚⾯)
详细简版
23.1. 从浏览器接收 url 到开启⽹络请求线程(这⼀部分可以展开浏览器的机制以及进程与线程之间的关系)
23.2. 开启⽹络线程到发出⼀个完整的 HTTP 请求(这⼀部分涉及到dns查询, TCP/IP 请求,五层因特⽹协议栈等知识)
23.3. 从服务器接收到请求到对应后台接收到请求(这⼀部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
23.4. 后台和前台的 HTTP 交互(这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识,可以提下静态资源的 cookie 优化,以及编码解码,如 gzip 压缩等)文章来源:https://www.toymoban.com/news/detail-526361.html
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模板网!