前端面试题---持续更新
时间:2023-04-02 11:18:23
HTML
1、html前后端渲染的区别,单页开发和多页开发的区别?前端页面渲染分为三种:纯后端渲染、纯前端渲染、服务端js渲染结合前端渲染、纯后端渲染、纯后端渲染。端服务器程序会将各种数据填充到DOM中生成DOM树,并转化为字节流作为HTTP响应的body返回给浏览器纯前端渲染纯前端渲染可以解决纯后端渲染体验问题出现的问题。纯前端渲染把DOM生成的逻辑放在前端,也就是说后端只会返回一个frame的DOM结构,比如只有一个容器元素的DOM(一个
),然后js代码将页面内容渲染到这个容器元素中。服务端js渲染和前端渲染的结合,主要是将前两个阶段的一部分交给纯后端DOM渲染,逻辑上分离不好。但是,交给纯前端DOM渲染,会导致延迟较高的部分被单独分离出来,形成一个独立的DOM渲染阶段,在代码中保留了自然显示层和数据层的分离,减少了累积API请求延迟很多。从SEO的角度来看,渲染结果对搜索引擎也很友好。当然,这样的做法需要在整体架构中增加一个独立的单元,这给开发和部署都带来了更多的复杂性。单页应用程序(SPA),通俗地说,是指只有一个主页面的应用程序。浏览器必须在开始时加载所有必要的html、js和css。所有的页面内容都包含在这个所谓的主页面中,但是写的时候还是会单独写(页面碎片),然后在交互的时候由路由程序动态加载,单页页面跳转只是刷新本地资源.多用于PC端的多页应用程序(MPA),即一个应用程序中有多个页面。页面跳转时,刷新整个页面。单页面的优点:1.用户体验好,速度快,内容变化不需要重新加载整个页面页面,只基于一点点SPA,对服务器的压力更小。2、前后端分离。3、页面效果会更炫(剪切页面内容时可以有特殊动画)。单页的缺点:1.不利于SEO。使用导航需要自己实现前进后退。(因为是单页应用,不能使用浏览器的前进后退功能,所以需要自己建立栈管理)3.初始加载时间比较长,会有一个白屏4.页面复杂度增加很多。使用input元素实现双向数据绑定,前端有个contenteditable属性。当元素将contenteditable属性设置为true时,该元素具有可编辑功能。但是我们在div上写v-model是不行的。首先我们来看一下v-model是如何实现的。//使用输入组件base-input
//当使用
来使用div时,我们只需要将input中的方法移植到div中即可。//使用contenteditabledivbase-div