随时记|生疏的前端知识点（一）_前端页面的切换用到了哪个知识点-CSDN博客

本文链接：https://blog.csdn.net/weixin_49179577/article/details/123129860

本文详细介绍了HTML的title和alt属性区别，以及它们在不同浏览器中的行为。同时，讨论了iframe的优缺点，指出在现代Web开发中已逐渐被Ajax取代。另外，文章还探讨了RGBA与opacity的透明效果差异，以及JavaScript的同源策略、闭包概念和内存回收机制。此外，还阐述了MVVM模式、SPA单页面应用的优缺点，以及虚拟DOM的工作原理及其优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签title与alt属性的区别

alt是html标签的属性，title既是html标签，又是html属性

title

（1）作为标签

<title>这里写网页的标题</title>

在这里插入图片描述

（2）作为属性

可以为元素提供额外说明信息

比如：给超链接a标签添加了title属性，把鼠标移动到该链接上面的时候，就会显示title的内容，以达到补充说明或者提示的作用

alt

alt属性只能用在img、area、input元素中，用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息
alt是代替图形作用而不是提供额外说明文字的
alt属性具有搜索引擎优化效果，因为搜索引擎是无法直接读取图像的信息的，alt可以为其提供文字信息

混淆

title和alt同时用于img标签的时候，在旧版的IE浏览器中，鼠标经过图像时显示的提示文字时alt的内容，而忽略title属性，若想在IE中显示title的内容，要么title和alt一致，要么alt内容为空（""，不能有空格）。不过在新版的IE（IE8及以上）中，已经不会再出现这种情况。
a标签嵌套img标签时，起作用的是img的title属性

iframe的优缺点

iframe标记指定一个内联框架
基本使用方法为
<iframe src="https://www.w3schools.com" title="W3Schools Free Online Web Tutorials"></iframe>

iframe的优点：

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。

4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

iframe的缺点：

1.会产生很多页面，不容易管理。

2.iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。

3.代码复杂，无法被一些搜索引擎索引到，这一点很关键，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

4.很多的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

5.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。分析了这么多，现在基本上都是用Ajax来代替iframe，所以iframe已经渐渐的退出了前端开发。

这部分转载来源于：iframe有那些优缺点？

rgba和opacity的透明效果有什么不同？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

HTML5新增了哪些新特性

见博客：html5新增及删除标签

CSS3新增了哪些新特性？

见博客：css有哪些新特性

常见兼容性问题

见博客：常见兼容性问题

document.write和innerHTML的区别

document.write是直接写入到页面的内容流，会导致页面全部重绘，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写
innerHTML则是DOM页面元素的一个属性，代表该元素的html内容，不会导致页面全部重绘。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分

什么是ajax过程

创建XIALHttpRequest对象，也就是创建一个异步调用对象
创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的函数
使用JavaScript和DOM实现局部刷新

请解释一下JavaScript的同源策略

同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性

介绍一下闭包和闭包常用场景

闭包是指有权访问另一个函数作用域中变量的函数,内部的函数存在外部作用域的引用就会导致闭包

闭包使用场景见博客：JS闭包的9大经典使用场景

JavaScript的内存回收机制

JS会在创建变量时自动分配内存，在不使用的时候会自动周期性的释放内存，释放的过程就叫 “垃圾回收”

这个机制有好的一面，当然也也有不好的一面。一方面自动分配内存减轻了开发者的负担，开发者不用过多的去关注内存使用，但是另一方面，正是因为因为是自动回收，所以如果不清楚回收的机制，会很容易造成混乱，而混乱就很容易造成"内存泄漏".由于是自动回收，所以就存在一个 “内存是否需要被回收的” 的问题，但是这个问题的判定在程序中意味着无法通过某个算法去准确完整的解决，后面探讨的回收机制只能有限的去解决一般的问题

垃圾回收对是否需要回收的问题主要依赖于对变量的判定是否可访问，由此衍生出两种主要的回收算法：

标记清理
引用计数

标记清理

其策略是：
变量进入上下文，也可理解为作用域，会加上标记，证明其存在于该上下文
将所有在上下文中的变量以及上下文中被访问引用的变量标记去掉，表明这些变量活跃有用
在此之后再被加上标记的变量标记为准备删除的变量，因为上下文中的变量已经无法访问它们
执行内存清理，销毁带标记的所有非活跃值并回收之前被占用的内存
局限：
由于是从根对象(全局对象)开始查找，对于那些无法从根对象查询到的对象都将被清除
回收后会形成内存碎片，影响后面申请大的连续内存空间

引用计数

其思路是：
对每个值记录它被引用的次数，通过最后对次数的判断(引用数为0)来决定是否保留
具体的规则有：

声明一个变量，赋予它一个引用值时，计数+1
同一个值被赋予另外一个变量时，引用+1
保存对该值引用的变量被其他值覆盖，引用-1
引用为0，回收内存
局限
最重要的问题就是，循环引用的问题

function refProblem () {
    let a = new Object();
    let b = new Object();
    a.c = b;
    b.c = a;  //互相引用
}

根据之前提到的规则，两个都互相引用了，引用计数不为0，所以两个变量都无法回收。如果频繁的调用改函数，则会造成很严重的内存泄漏。

谈谈你对MVVM模式的理解

MVVM（model-view-viewmodel）:本质上是mvc的改进版

model 模型：数据访问层
view 视图层：结构布局外观，比如html css h5 c3 响应式
viewmodel 公共属性和命令： mvvm没有控制器，有一个绑定器，在视图和模型之间进行通信

小结：将结构布局和业务逻辑分开，通过viewmodel在结构布局和业务逻辑之间进行通信
优势：

低耦合
可重用性高
分层开发，便于维护

说说你对SPA单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载
优点：
用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
基于上面一点，SPA 相对对服务器压力小；
前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。