WEB面试题

Alun丶0902

已于 2022-10-27 09:33:36 修改

阅读量527

点赞数 2

文章标签： css html css3 javascript html5

于 2022-10-10 20:34:20 首次发布

本文链接：https://blog.csdn.net/LHLKKK/article/details/127251601

版权

一、display:none和visibility:hidden的区别

二、cookie、sessionStorage和localStorage的区别

九、Node.js 的理解、优缺点、应用场景

十、nodejs中关于module.exports和exports的区别和使用方法

十一、请使用node.js起一个Http服务器，并给客户带返回信息helloworld监听端口为3000

十二、简述ajax,为什么会出现跨域问题

十三、请写出jQuery如何使用ajax

十四、简述ajax中get请求和post请求的区别

十五、在根目录下的app.js配置路由，当浏览器访问localhost:3000时渲染views文件夹下的index.ejs页面

十六、阐述mvvm的主要特性、优点

十七、简述v-if和v-show的区别

十八、计算属性与方法的区别

十九、Vue\React\Angular的区别

一、display:none和visibility:hidden的区别

display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同

1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。

2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。

二、cookie、sessionStorage和localStorage的区别

1.相同点是都是保存在浏览器端、且同源的。

2.cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径(path）的概念，可以限制cookie只属于某个路径下。

3.存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。这里需要注意的是cookie的数据大小是指单个cookie的大小，而localStorage的大小是单个域名localStorage所占用的大小总和。

4.数据有效期不同，sessionStorage:仅在当前浏览器窗口关闭之前有效; localStorage:始终有效，窗口或浏览器关闭也—直保存，因此用作持久数据，除非用户主动删除; cookie:只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭。

5.作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面; localstorage在所有同源窗口中都是共享的; cookie也是在所有同源窗口中都是共享的。

三、C/S和B/S两种架构区别

一、C/S 架构

优点：

C/S架构的界面和操作可以很丰富。
安全性能可以很容易保证，实现多层认证也不难。
由于只有一层交互，因此响应速度较快。

缺点：

用面窄，通常用于局域网中。
用户群固定。由于程序需要安装才可使用，因此不适合面向一些不可知的用户。
维护成本高，发生一次升级，则所有客户端的程序都需要改变。

一、B/S 架构

优点：

客户端无需安装，有Web浏览器即可。
BS架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强.
BS架构无需升级多个客户端，升级服务器即可。

缺点：

在跨浏览器上，BS架构不尽如人意。
表现要达到CS程序的程度需要花费不少精力。
在速度和安全性上需要花费巨大的设计成本，这是BS架构的最大问题。
客户端服务器端的交互是请求-响应模式，通常需要刷新页面，这并不是客户乐意看到的。

四、Html5 常见的新增API详解

getElementsByClassName()方法
classList 属性
自定义数据属性
outerHTML 属性
insertAdjacentHTML()方法

五、使用面向对象写一个选项卡

<body>
    <div id="div1">
        <input class="active" type="button" value="A">
        <input type="button" value="B">
        <input type="button" value="C">

        <div style="display: block;">AAAAA</div>
        <div>BBBBB</div>
        <div>CCCCC</div>
    </div>
</body>

<style>
    #div1>input{background: white;}
    #div1 input.active{
        background: yellow;
    }
    #div1 div{
        width: 200px;
        height: 200px;
        background-color: #CCC;
        display: none;
    }
</style>

<script>
    window.onload=function(){
        var oDiv = document.getElementById('div1');
        var btn = oDiv.getElementsByTagName('input');
        var aDiv = oDiv.getElementsByTagName('div');

        for(var i=0;i<btn.length;i++){
            btn[i].index=i;
            btn[i].onclick=function(){
                for(var j=0;j<btn.length;j++){
                    btn[j].className='';
                    aDiv[j].style.display='none';
                } 
                this.className='active';
                aDiv[this.index].style.display='block';
            }
        }
    }
</script>