前端面试题---持续更新

)，然后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//当使用3.基本订阅和发布letpublisher={handlers:{},subscribe:function(name,handler){this.handlers[name]=handler},publish:function(name,args){lethandler=this.handlers[name]if(handler){handler(args)}}}publisher.subscribe('say',函数(something){console.log(something)})publisher.publish("say","Hello")4.浏览器输入地址回车后会发生什么1.浏览器查找域名的IP地址（DNS查找通过域名注册IP地址）2.通过三次握手建立TCP连接3.浏览器向web服务器发送http请求4.服务器收到请求后，web服务器（准确的说是http服务器）处理请求，如Apache、ngnix、iis等web服务器分析用户请求，知道需要调度哪些资源文件，通过相应的资源文件处理用户请求和参数，调用数据库信息，最后返回结果通过web服务器传给浏览器客户端5.当双方都没有请求或响应通过时，任何一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接需要4次握手。6、浏览器解析HTML，包括css、js、图片、视频、音频等资源加载，浏览器布局渲染5、减少回流和重绘次数，需要对渲染树进行简单操作。1、直接使用ClassName修改样式，使用lessstyle设置样式2、让要操作的元素“离线处理”，处理完成后一起更新（使用display:none技术减少数量重排和重绘）3.需要对多次重排的元素，将position属性设置为absolute或fixed，使该元素脱离文档流，其变化不会影响到其他HTML元素animated，比如动画，所以修改他们的CSS的好处大大降低小回流4.尽量不要在for循环中进行样式获取操作5.使用translate代替left/top等，translate只是触发重绘，会不触发回流，节省一次回流的时间6.用opacity代替visibility，改变透明度渲染效率更高7.不要使用表格布局，因为表格每一行甚至每个单元格的样式更新都会导致整个表格重新布局8.合并多个更改样式属性的操作为一个操作支持