待总结的前端知识点

原创已于 2022-05-14 09:10:49 修改 · 283 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

于 2022-05-10 23:38:20 首次发布

前端面试准备专栏收录该内容

51 篇文章

订阅专栏

本文探讨了多页应用与单页应用的区别，包括首屏速度、SEO、页面切换、资源加载和SEO优化。同时讲解了对称加密与非对称加密，以及从URL到内容展示的过程。关键词涉及前端、后端、加密技术、路由机制和开发工具。

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

1、多页应用和单页应用的区别
多页面：
每次页面刷新都会返回新HTML 优点：

首屏时间快（只发送一个http请求，响应接受了，页面就能展示出来）

SEO（搜索引擎排名）效果好，搜索引擎是识别html内容，根据内容排名的缺点：

页面切换慢：每次切换都需要发起一个http请求

**单页面**
只有一个首页，js感知到url变化后使用js把当前页面内容替换成新的，而不会每次跳转都请求新的html文件

第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。

优点：

页面切换快，因为不需要去做html请求缺点：
首屏时间稍慢慢，（没有后端返回html）需要前端渲染。 SEO差： seo是根据html内容排名的，单页应用是通过js请求的，因此不能直接识别排名，需要做处理。

1、页面切换非常快，不会出现白屏，还可以作出过渡效果

2、公用的js和css一次性加载，不浪费

3、良好的前后端分离，服务器端只管响应数据请求，不用关心页面渲染，压力小，API重用性高

缺点：
1、首次加载慢。不难理解，这么多东西要一下子加载，当然慢了。加载出来就好了。

2、不利于SEO。其实，如果不是互联网项目，可忽略不计

3、复杂，对开发要求高。也好理解，这么多东西，都挤在一个页面上，怎么控制，怎么加载，十分考验工夫。

对比点	单页应用模式SPA	多页应用模式MPA
结构组成	一个主页面+多个模块的组件	多个完整的页面
路由模式	可以使用hash，也可以使用history a.com/#/pageone a.com/#/pagetwo	html链接地址 a.com/pageone.html a.com/pagetwo.html
资源文件加载	组件公用的资源只需要加载一次	每个页面都要自己加载公用的资源
内容更新	根据路由的变化，加载相对应的组件，是组件的切换，即局部更新，页面切换快，体检比较好	整体 HTML 的切换，重新请求加载页面，页面切换慢，网速慢的时候，页面间来回跳转，可能出现明显的卡顿，体验尤其不好
刷新方式	页面局部刷新或者更改	整页刷新
过渡动画	转场动画容易实现	较难实现
数据传递	因为单页面，可以使用数据状态管理，集中维护和下发数据	依赖URL 参数，cookie 、localStorage 等缓存方案
适用场景	对体验度和流畅度有较高要求的应用，不过不利于SEO（可借助SSR优化SEO）	适用于对SEO要求比较高的应用
开发维护	常需要借助专业的框架，后期维护相对容易	开发成本较低，容易导致页面重复代码过多，后期维护相对不太容易

2、对称加密和非对称加密
3、从输入url到浏览器展示内容经历了什么
4、垃圾回收机制
5、常用的设计模式：订阅发布模式，单例模式
6、js实现常用的方法，bind，apply，call，promise
7、乾坤微应用相关内容
8、formGeneter内容
9、小程序相关内容复习
10、webpack实际应用，结合工程代码的提效
11、关于webpack的面试题
https://blog.csdn.net/Crazy_GirlLL/article/details/114657663