web前端面试题

Posted 2020-09-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端面试题相关的知识，希望对你有一定的参考价值。

怎么理解MVC设计模式？
答：

　　简单的来说，MVC是一种设计模式，它将应用划分为3个部分：数据（模型）、表现层（视图层）和用户交互（控制器）

　　M-MODEL（模型）

　　V-VIEW（视图）

　　C-CONTROLLER（控制器）

总结：

View：只管页面的显示和样式展示

Control：进行页面节点事件的注册和控制，以及页面加载性能的实现（例如方荣的硬盘缓存）。

Model：真正的逻辑处理，例如jslib库中的form、popup、drag等功能组件都属于model模块。

web数据交互方式？
答：

　　web数据交互简单的讲，是客户端与服务器端的数据交互，通过HTTP协议交互的。

　　首先看一下传统的页面请求的生命周期：

1、浏览器发送一个HTTP请求到web服务器。

2、web服务器解析请求，然后读取数据存储层，制定一个html文件，并用一个HTTP响应吧它发送到客户端
3、HTTP响应通过互联网传送到浏览器。
4、浏览器解析web服务器的响应，使用HTML文件构建了一个DOM树，并且下载引用的CSS和javascript文件
5、CSS资源下载后，浏览器解析并执行它们，并将它们应用到DOM树。
6、javaScript资源下载后，浏览器解析并执行它们。y

web数据交互，从服务器的角度讲：主要有pull、push两个，一个是拉，一个是推。
1）pull是拉，客户端向服务器主动的拉去数据，采用的集市ajax和XSS（跨站脚本）

2）push是服务器向客户端主动的推动数据第一中方式是长链接，客户端与服务器之间一直保持着链接，如果有数据更新，服务器向客户端推送数据，客户端接收服务器端的数据，可以理解为长轮询，客户端与服务器端必须一直是链接状态/另外还有一种是伪长链接。
有2种实现方式，一种是基于ajax，它与传统的ajax的方式不同在于，服务器端会阻塞客户端的请求直到有数据穿点或者超时才返回。客户端jjavaScript响应处理函数会在处理完服务器返回的信息后，再次发送请求，重新建立链接。当客户端接收的数据，重新建立链接时，服务器端可能有新的数据到达；这些信息会被服务器保存直到客户端重新建立链接，客户端会一次把当前服务器端所有的信息取回。

有哪些优化方法?

答：　

　　以下简单的写几条，具体优化类容可以看（雅虎14天性能优化原则）

　　1）减少HTTP请求，

　　2）使用GZIP压缩工具
　　3）使用CDN（分发网络类容）
　　4）用inner HTML代替DOM操作，减少DOM操作次数，优化javaScript性能。
　　5）少用全局变量、缓存DOM节点查找的结果，减少IO读取操作。

　怎么上下左右居中？

　答：

　　　　下面简单的写一种方式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
　　　　　　　　　　margin:0;
　　　　　　　　　　padding:0;
　　　　　　　　}
        #box{
                position: absolute;
                top: 50%;
                margin-top: -100px;
                width: 100%;

　　　　　　　}
        #box1{
            　　height:200px;
            　　width:200px;
            　　border:1px solid red;
            　　margin:0 auto;

        　　}
    </style>
</head>
<body>
    <div id="box">
            <div id="box1"></div>
    </div>
</body>
</html>