一 前端需要注意那些SEO? (7.20)
- 合理的页面结构:使用语义化的HTML标签,确保页面结构清晰,有助于搜索引擎理解页面内容
- 页面的标题和描述:每个页面必须拥有唯一的标题(<title>)和描述(<meta name="descriptiom">)标签,并包含关键词。
- URL结构:使用简介,有意义的URL结构,包含关键词,避免使用过长且含有特殊字符的URL
- 内部链接:在网站内部使用合适的内部链接,是搜索引擎能够更好的索引和理解网站结构和内容
- 图片优化:为图片添加'alt'属性,已便搜索引擎能够理解图片内容,同时,优化图片大小和加载速度,提高页面加载性能
- 响应式设计:确保网站在不同的平台都能使用,提高用户体验和搜索排名
- 页面加载速度:优化网站加载速度,包括压缩和缓存静态资源,减少HTTP请求,使用CDN等
- 合理的HTML结构:使用正确的HTML标签和结构来组织页面内容,使搜索引擎能够更好理解和索引页面
二 <img>的title和alt有什么区别(7.22)
- title属性提供了额外的描述信息,用于鼠标悬停时的提示文本
- alt属性提供了图像的替代文本,用于无法加载图像或使用复制技术的用户
三 HTTP的请求方式及用途(7.27)补7.23
- GET:用于获取指定资源的信息
- POST:用于向服务器提交数据,创建新资源
- PUT:用于向服务端更新指定资源
- DELETE:用于删除指定资源
- PATCH:用于更新部分指定资源
- HEAD:类似于GET,但是只返回请求头,不返回请求体
- OPTIONS:用户获取服务器支持的请求方法和资源通信选项
- TRACE:用于激发一个远程应用层的消息回路
- CONNECT:把请求链接到透明的TCP/IP的通道
四 从浏览器地址栏输入url到显示页面的步骤(7.27)补7.24
- 用户在浏览器的地址栏输入URL
- 浏览器解析URL,·提取协议(HTTP/HTTPS)、主机名和路径等信息
- 浏览器根据主机名使用DNS(域名系统)解析将主机名转换为IP地址
- 浏览器建立与服务器的TCP链接,这是通过三次握手来建立可靠的链接
- 浏览器向服务器发起HTTP请求。
- 服务器接到请求后,会生成HTTP响应,服务器会将响应返回给浏览器。
- 浏览器收到响应后,根据响应状态判断是否请求成功,如果成功,浏览器会解析响应内容
- 浏览器解析HTML,CSS,JS等内容,构建DOM树和渲染树
- 浏览器将渲染树中的元素进行布局和绘制,最终显示在用户界面上
五 如何进行网站性能优化?(7.27)补7.25
- 减少HTTP请求:减少页面中的资源文件数量,合并且压缩CSS和JS文件,使用CSS sprites来减少图片请求,使用字体图标代替小图标,以减少页面的HTTP请求
- 压缩和缓存:对CSS、JS和HTML等静态资源进行压缩,以减少文件大小,加快下载速度,同时设置适当的缓存策略,使浏览器能够缓存这些资源,减少重复请求
- 使用CDN:将静态资源部署待CDN上,使用户能够从离其最近的服务器获取资源,减少网路请求,加快加载速度
- 延迟加载:对于页面中的非关键资源,可以使用延迟加载的方式,即在页面完成之后在加载这些资源,例如:可以将图片的src属性设置为data-src,并使用js在适当时机将其替换成实际的src值
- 图片优化:使用适当的图片格式,根据实际要求选择适当的图片大小,使用图片压缩工具对图片进行压缩,以减少图片文件大小
- 前端缓存:使用浏览器缓存和本地存储来缓存部分页面或全部内容,减少服务器请求,提供页面加载速度
- 异步加载:将页面中的一些资源和功能进行异步加载,以提高页面响应速度
- 响应式设计:使用响应式设计来适应不同大小的屏幕,以提供更好的用户体验和页面加载速度
- 优化CSS和JS:减少CSS和JS的文件大小,删除不必要的代码,使用压缩工具进行压缩,将CSS放在头部,js放在底部等,以提高页面加载速度
六 HTTP状态码及其含义?(7.27)补7.26
- 1xx(信息状态码):表示请求已被接收,继续处理
- 100 continue:服务器已收接到初始部分,客户端应继续发送剩余部分
- 2xx(成功状态码):表示请求已成功被服务器接收,理解和处理
- 200 OK:请求成功,服务器返回所需资源
- 201 created:请求成功,服务器创建新的资源
- 204 No Content:请求成功,但是服务端并没有返回任何资源
- 3xx(重定向状态码):表示需要进一步操作完成请求
- 301 Moved Permanently:请求资源已永久移动到新的URL
- 302 Found:请求资源临时移动到新的URL
- 304 Not Modified:客户端缓存的资源未被修改,可以直接使用缓存
- 4xx(客户端错误状态码):表示客户端发送请求错误
- 400 Bad Requirest:服务端无法理解请求的语法
- 401 Unauthorized:请求需要验证身份
- 403 Forbidden:服务端拒绝请求,权限不足
- 404 Not Found:请求资源不存在
- 5xx(服务端错误状态码):表示服务器在处理请求时发送了错误
- 500 Internal Serve Error:服务端在处理请求时内部发送错误
- 501 Not Implemented:服务器不支持当前请求所需要的功能或无法完成请求
- 502 Bad Gateway:服务器作为网关或代理,从上游服务器接收到无效的响应
- 503 Service Unavailable:服务器无法处理请求,通常由于过载或维护导致的
七 语义化的理解?(7.27)
- 结构清晰:语义化的HTML可以将网页内容划分为不同的区块,使用合适的标签来表示页面不同的内容,使页面的结构更加清晰。
- 有意义的标签:使用具有语义的HTML标签可以更准确地描述内容的含义。
- 无障碍性:语义化HTML标签可以提高网页的访问性
- SEO优化:搜索引擎可以通过分析网页的语义化结构更好地理解和索引网页内容,从而提高网页在搜索结果的排名
- 可维护性和可拓展性:语义化标签使网页结构更加清晰,易于理解和维护
- 语义化标签:<header>、<nav>、<main>、<footer>、<section>、<aside>、<article>等
八 介绍⼀下你对浏览器内核的理解?(7.28)
- 浏览器内核指的是浏览器中用于解析和渲染网页的核心引擎。他负责将HTML,CSS和JS等网页资源转化为可视化内容。
- 浏览器内核主要分两部分:
- 渲染引擎:
- JavaScript引擎 :负责解析JavaScript代码,不同浏览器用不同的JavaScript引擎,如Chrome使用V8引擎,Firefox使用SpiderMonkey引擎。JavaScript主要功能包括:
- 词法分析:将JavaScript代码分解为词法单元(token)
- 语法分析:将词法单元转换为抽象语法树(AST)
- 代码生成:将AST转换为可执行的机器或字节码
- 常见的浏览器内核
- Trident:IE浏览器
- Gecko:Firefox浏览器
- Webkit:Safari
- Blink:谷歌浏览器
九 html5有哪些新特性、移除了那些元素?(7.29)
- 新特性:
- 语义化标签:例如<header>、<nav><、main>等,用于更清晰地描述网页的结构和内容
- 表单增强:例如<input>元素新类型,表单验证,自动填充等,是表单处理更加灵活和方便
- 视频和音频支持:HTML5引入 <vidio>,<audio>等元素,使得在网页中嵌入视频播放和音频播放变得更加简单和直观
- 画布(Canvas):允许通过JS绘制图形,动画和图像,为开发者提供了更多的绘图和图像处理能力
- 地理定位:HTML5提供了`navigatar.geolocation`接口,可以通过浏览器获取用户的地理位置信息,用于实现基于位置的应用和服务
- 本地存储:HTML引入localStorage和sessionStorage等本地存储机制,可以在浏览器存储和读取数据,用于实现离线应用和持久化存储
- Web Workers:允许后台运行脚本,已提高网页的性能和响应能力,一般用于处理复杂的计算任务
- WebSockets:提供了一种全双工的通信机制,是的浏览器和服务器之间可以进行实时的双向通信,用于实时聊天,游戏等应用
- 移出元素
- 纯表观元素:
<acronym>
、<applet>
、<basefont> <s>等
- 对可用性产生负面影响的元素:frame,frameset,noframes
- 纯表观元素:
十 HTML5 的离线储存怎么使用, 工作原理能不能解释⼀下(7.31)补7.30
- HTML5的离线存储是通过使用Web应用程序缓存(Application Cache)来实现的,它允许前端开发者将Web应用程序的资源缓存到用户的浏览器中,使得用户在离线状态下任然能够访问和使用程序
- 使用离线存储需要一下几个步骤
- 在HTMl文档的<html>标签中添加manifest属性,指定一个描述离线存储的清单文件
<html manifest="cache.manifest">
- 创建一个清单文件,该文件列出了需要离线缓存的资源,清单文件是一个纯文本文件,可以使用任何文本编辑器编辑,例如
CACHE MANIFEST # 版本号 CACHE MANIFEST_VERSION # 需要缓存的资源 CACHE: /css/styles.css /js/main.js /images/logo.png # 需要在线访问的资源 NETWORK: * # 在离线时使用的回退页面 FALLBACK: /offline.html
- 在清单文件中,以CACHE开头的部分列出了需要离线缓存的资源,以NETWORK开头的部分列出了需要在线访问的资源,已FALLBACK开头的部分列出了在离线是回退的页面
- 将清单文件部署到服务器上,并确保可以通过URL来访问它
- 当用户首次访问Web应用程序时,浏览器会下载清单文件和清单文件中列出的资源,并将他们存储在本地的应用程序缓存中
- 当用户再次访问Web应用程序时,浏览器会检查清单文件是否有更新,如果有更新,浏览器会下载新的资源并更新应用程序缓存
- 当用户处于离线状态时,浏览器会从应用程序缓存加载资源,而不是从服务器上请求资源,这样,即使没有网络,用户仍然可以访问已缓存的页面和资源
- 在HTMl文档的<html>标签中添加manifest属性,指定一个描述离线存储的清单文件
- 工作原理:基于浏览器的应用程序的缓存机制
- 注意:它是一个全局缓存,它对整个Web应用程序有效。因此,在使用离线缓存时,需要确保清单文件列出资源是正确的,并且能够正确地更新清单文件以及缓存的资源
十一 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的 (7.31)
- 注册应用程序缓存:在HTML文档的<html>标签中,通过添加manifest属性来指定清单文件的URL,这样浏览器就知道该页面是不是使用了离线缓存
- 创建清单文件:开发者需要创建一个清单文件,该文件是一个纯文本文件,列出了需要缓存的文件
- 缓存资源:在清单文件中,使用CACHE来列出需要缓存的资源,例如
CACHE MANIFEST CACHE: index.html styles.css script.js image.jpg
- 浏览器会根据清单文件列出的资源URL,将这些资源下载并存储在应用程序缓存中
- 更新缓存
- 加载缓存资源
- 清理缓存:浏览器会根据一定的策略来管理应用程序缓存的大小和内容,当缓存空间不足或者过期,浏览器会自动清理,删除不在需要的资源
十二 请描述⼀下 cookies , sessionStorage 和 localStorage 的区别(8.1)
- cookies:
- 存储容量:4KB,一个域名下最多20个cookies
- 生命周期:可以设置cookies的过期时间,可以在浏览器关闭后失效或持久性
- 用途:主要用于客户端和服务器之间传递数据
- 限制:cookies会随着每个HTTP请求自动发送到服务器,会增加网络流量,且有安全隐患
- sessionStorage:
- 存储容量:5M
- 生命周期:关闭页面后数据失效
- 用途:用于在同一页面存储数据
- 限制:只能在同一页面使用数据,不同页面之间的sessionStorage无法公用
- localStorage:
- 存储容量:5M
- 生命周期:自动清除或者过期
- 用途:用于客户端长期存储数据,数据在不同页面是共享的
- 限制:可以被所有同源页面使用,需要注意数据的安全
十三 iframe有那些缺点和优点?(8.2)
- 优点:
- 分离内容和主页面:使用<iframe>可以将不同的内容分离开来,使得页面结构更加清晰,对于需要嵌入的独立应用和第三方应用的情况非常有用
- 提供独立的浏览环境:<iframe>提供了一个独立的浏览环境,嵌入的内容可以在自己的上下文中运行,不会受到主页面的影响。对于需要加载 外部应用或者提供沙箱环境的情况非常有用
- 实现跨域通信:虽然无法直接访问来自不同域的内容,但是可以通过postMessage Api实现跨域通信,这对于需要与嵌入的内容产生交互非常有用
- 支持动态加载内容:可以通过修改src属性来动态加载不同的内容,这可以在不刷新整个页面的情况下更新嵌入的内容
- 缺点:
- 安全性问题:由于iframe可以加载其他网页的内容,存在安全风险,恶意网站可以通过iframe来加载恶意内容,例如钓鱼网站,恶意广告
- SEO问题:搜索引擎不会对iframe嵌入的内容进行搜索,这意味着嵌入的内容不会被搜索引擎所收录和展示
- 页面加载性能问题:每个iframe都会独立加载在页面上,会增加页面的加载时间和带宽消耗,如果有较大的iframe会对页面造成负面影响
- 难以控制样式和布局:iframe中的内容是独立的网页,其样式和布局与主页面不一致。
十四 WEB标准以及W3C标准是什么(8.3)
- WEB标准是指由W3C制定的一系列规范和指南,用于确保Web程序在不同浏览器和设备保持一致的行为和表现
- WEB标准和W3C标准包括一下几种:
- HTML标准
- CSS标准
- JS标准
- WEB API标准
十五 xhtml和html有什么区别? (8.4)
- 词法要求:XHTML是基于XML的标记语言,要求标记必须符合XML的需求,包括标签必须正确嵌套,属性必须用引号包围。HTML的语法相对宽松,对于一些语法错误会进行自动修复
- 元素闭合:XHTML要求元素必须闭合,HTML中有一些元素可以省略标签
- 元素命名规范:XHTML要求元素命名必须为小写。HTML可以混合,大小写都可以
- 文档类型声明:XHTML文档必须包含文档声明,指定使用XHTML的版本。HTML可以不声明文档类型,浏览器会根据内容自动解析
- 兼容性:由于XHTML的词法要求更严格,一些老旧的HTML的代码无法兼容需要修改。HTML相对宽松可以更好兼容旧版HTML
十六 Doctype作用? 严格模式与混杂模式如何区分? 它们有何意义?(8.5)
- Doctype是一种在HTML文档中指定文档类型的标记。他的作用是告诉浏览器使用那个HTML版本来解析文档,并以相应规则进行渲染吧
- 严格模式(strict):在严格模式下,浏览器会按照HTML和CSS的标准规范进行解析和渲染。要求文档结构和样式表的书写符合规范。
- 混杂模式(quirks):在混杂模式下,浏览器会以一种更宽松的方式解析,容忍一些不符合规范的写法。在混杂模式下,浏览器会根据不同的浏览器厂商和版本,采用不同的解析和渲染规则,会导致在不同的浏览器显示不用的样式
- 意义:
- 标准化:提供一致的渲染结果,减少浏览器之间的差异
- 兼容性:声明正确的Doctype,可以确保网页在不同的浏览器中以一致的方式呈现,提高网页跨浏览器兼容性
- 性能优化:严格模式下的解析和渲染规则更加严格,可以帮助浏览器更高效的解析和渲染网页,提升性能
- 错误检测:严格模式要求文档结构和样式表的书写符合规范,可以帮助开发者及时发现和修复代码中的错误
十七 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?行内元素和块级元素有什么区别?(8.7)补8.6
- 行内元素:span,a,strong,em,img,input,button,label,select,textarea等
- 块级元素:div,p,h1-h6,ul,ol,li,table等
- 空元素:br,hr,img,input,link,meta,area,base等
- 区别:
- 行内元素默认不会独占一行,而块级元素独占一行
- 行内元素的大小由内容决定,而块级元素可以设置宽,高
- 行内元素不能设置上下边距,而块级元素可以
十八 HTML全局属性(global attribute)有哪些(8.7)
- class:指定一个或多个元素的类名,用于样式和js操作
- id:指定元素唯一标识
- style:指定元素内联样式
- title:指定元额外信息
- lang:指定元素语言
- data-*:用于存储自定义数据
- aria-*:同于定义元素可访问性属性
- tabindex:指定元tab建顺序
- accesskey:指定元素的快捷键
- contenteditable:指定元素是否可编辑
- draggable:指定元素是否可拖动
- hidden:指定元素是否隐藏
- spellcheck:指定元素是否启用拼写检查
十九 canvas和SVG有什么区别?(8.8)
- 绘制方式:canvas是基于像素的绘制方式,而SVG基于矢量的绘制方式
- 渲染方式:canvas使用JS代码直接操作像素,绘制的图形是位图,渲染性能较高,而SVG是浏览器内置的渲染引擎将描述的图形转换为矢量图形来渲染,可以无损放大和缩小,但渲染性能较低
- 动态性:canvas是静态的,一旦绘制完成,就无法直接修改。而SVG可以通过JS动态地修改图形的属性和结构
- 交互性:由于SVG是基于矢量的,每个图形元素都是独立的,可以通过事件监听来实现交互效果。而canvas绘制的图形是位图,无法直接监听修改,需要通过计算像素位置来实现交互
- 兼容性:SVG相较于canvas兼容性较好
二十 HTML5 为什么只需要写 <!DOCTYPE HTML>(8.9)
- 向后兼容性:HTML5的设计目标是想后兼容,即能够正确解析和渲染之前的版本的HTML文档。HTML5引入了一种宽松解析模式。即在文档类型声明只写<!DOCTYPE HTML>,而不需要指定具体的DTD。这样旧版本依旧能解析
- 简化文档类型声明:在之前的版本,需要使用不同的DTD来指定类型和版本,增加了开发量,而在HTML5中,为了简化文档类型声明,需要写<!DOCTYPE HTML>,就能确定是HTML5,这样开发者就不需要去关注具体的DTD文件路径和版本信息,减少了开发的复杂性
- 提高解析效率:由于不需要解析DTD文件,浏览器可以更快地确定文档类型,并解析和渲染内容
二十一 viewport(8.10)
- viewport是指浏览器显示网页的内容区域。在移动设备中,由于屏幕尺寸较小,为了适应不同设备的屏幕大小和分辨率,需要对网页进行适配和响应式设计。viewport的概念和设置就是为了实现这一目的
- 常用属性
- width
- initial-scale:设置初始缩放比例
- minimum-scale:设置最小缩放比例
- miximun-scale:设置最大缩放比例
- user-scalable:设置用户是否可以手动缩放网页
- 可以实现效果
- 自适应屏幕
- 禁止缩放
- 控制缩放范围
- 例子
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
二十二 渐进增强和优雅降级之间的不同吗(8.11)
- 都用于处理不同浏览器或设备的兼容性问题
- 渐进增强是一种从基本功能出发,逐步增加更高级功能的策略
- 优雅降级是一种从高级功能出发,逐步降低到基本功能的策略
二十三 为什么利用多个域名来存储网站资源会更有效?(8.12)
- 并行加载:浏览器在加载网页时,会对同一个域名下的资源有并发请求限制。通过将资源分散到多个域名下,可以突破这个限制,实现更多的并行下载
- 提高资源请求的并发度:每个域名都有自己的连接池,通过使用多个域名,可以增加浏览器与服务器之间的并发连接。这样可以提高资源请求的并发度,减少请求的排队等待时间,从而加快资源的加载速度
- 利用浏览器的并行下载能力:浏览器在下载资源时,会为每个域名维护一个连接池,通过多个域名,可以充分利用浏览器并行下载能力,提高下载速度
- 利用CDN加速:通过将资源分布到多个域名下,可以更好的利用CDN的加速能力
二十四 简述⼀下src与href的区别(8.14)补8.13
- src用于指定外部资源的地址,必需属性,立即加载和执行
- herf用于指定链接到目标资源的地址,可选属性,根据属性值进行资源的加载和处理,不会立即执行
二十五 简述一下图片格式webp和Apng(8.14)
- webp是有Google开发的图像格式,提供更高的压缩率和图像质量,适用于静态图像
- APNG是一种支持动画的图像格式,具有更好的图像质量和压缩率,适用于动画的效果展示
- WebP格式在现代浏览器中得到广泛的支持,而APNG格式在一些旧版本的浏览器中可能不被完全支持
二十六 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页 开始, ⼀次js请求⼀般情况下有哪些地方会有缓存处理?(8.15)
- 浏览器缓存
- CDN缓存
- 代理服务器缓存
- 操作系统缓存
- DNS缓存
二十七 web开发中会话跟踪的方法有哪些(8.16)
- Cookie:通过在客户端存储一个唯一标识符来跟踪会话。服务器在每个响应中发送一个会话标识的Cookie,客户端在后续请求中该Cookie发送回服务器
- URL重写:将会话标识符作为URL的一部分传递
- 隐藏表单字段:将会话标识符添加到HTML表单中的隐藏字段,以便在提交表单时将其发送回服务器
- HTTP头:将会话标识符添加到HTTP请求头中
- Web存储:使用Web存储API(如localStorage或sessionStorage)在客户端存储会话标识符
- 数据库:将会话信息存储在服务器端的数据库中,并将唯一标识符发送给客户端,以便在后续请求中进行检索
二十八 HTTP request报文结构是怎样的(8.17)
- <请求行>:包含了请求方法,请求的URL和HTTP协议。
- <请求头部>:包含了一系列的键值对,用于描述请求的各种属性和要求
- <空行>:用于分隔请求头部和请求体
- <请求体>:可选,用于传输请求的数据
二十九 HTTP response报文结构是怎样的(8.18)
- <状态行>:包含了响应状态和状态信息,用于表示清除的处理结果
- <响应头部>:包含了一系列的键值对,用于描述响应的各种属性和信息
- 空行:用于分隔响应头部和响应体,在前端总,是隐形的
- <响应体>:用于传输响应的数据