2021届Web前端面经积累（一）

最新推荐文章于 2021-08-09 16:26:35 发布

越来越棒鸭

最新推荐文章于 2021-08-09 16:26:35 发布

阅读量970

点赞数 5

本文链接：https://blog.csdn.net/weixin_43221323/article/details/105575444

版权

1. 拖拽会用到哪些事件

dragstart：拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.
dragenter：拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮
dragover：拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.
dragleave：拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.
drag：拖拽期间在被拖拽元素上连续触发
drop：鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.
dragend：鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

2. jquery中的选择器

1) 基本选择器

元素选择器 --> 匹配指定标签名
类选择器 .class --> 匹配class属性的标签
id选择器 #id --> 匹配指定id名称
通配符选择器 --> 匹配所有的选择器
组合选择器 selector1,selector2,selectorN --> 即可匹配多个

2) 层级选择器

ancestor descendant --> 在指定父元素下匹配所有的后代元素（不管是什么层级）
parent > child --> 在指定父元素下匹配所有的子元素（下一个层级）
prev + next --> 匹配所有紧挨着在 prev 元素后的 next 元素

3) 伪类选择器

:first --> 获取第一个元素
:last --> 获取最后一个元素
:not(selector) --> 用于筛选的选择器(即取反)
:even --> 匹配所有索引值为偶数的元素，从 0 开始计数
:odd --> 匹配所有索引值为奇数的元素，从 0 开始计数

4) 属性选择器

[属性名] --> 匹配包含给定属性的元素
[属性名=属性值] --> 匹配给定的属性是某个特定值的元素
[属性名],[属性名] --> 可匹配多个
ex：匹配属性有code1与code2的元素标签 --> $(“li[code1],li[code2]”);
[属性选择器][属性选择器][属性选择器] --> 复合属性选择器，需要同时满足多个条件时使用

3. undefined 和 null 区别

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当声明了一个变量未初始化时，得到的就是undefined。

null是javascript的关键字，可以认为是对象类型，它是一个空对象指针，和其它语言一样都是代表“空值”，不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的，为了区分空指针对象和未初始化的变量，它是一个预定义的全局变量。没有返回值的函数返回为undefined，没有实参的形参也是undefined。

4. 优雅降级和渐进增强

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容。

5. CSS sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置

6. ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换，实现网页的局部刷新。

原生AJAX请求的步骤：

创建XMLHttpRequest异步对象

var xmlHttp = new XMLHttpRequest ()

绑定监听–监听服务器是否已经返回对应数据（回调函数)

xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
         //5.接收相应数据
         console.log (xmlHttp.responseText)
}

绑定地址,及配置其他参数

xmlHttp.open ('POST', "ajaxServlet", true)

发送请求

xmlHttp.send ()

接收相应数据

console.log (xmlHttp.responseText)

在jq中的写法有三种，get,post和ajax，这里给出第三种，通用：

 function ajax() {
            var id=document.getElementById("id").value;
            $.ajax({
                url:"anli1",
                async:true,  //是否异步，默认true
                type:"post",
                data:{"id":id,"password":123},
                success:function (data) {   //数据	成功接受时的操作
                    if(data=="n"){
                        document.getElementById("tip").style.display="block";
                    }
                    else { 
                        document.getElementById("tip").style.display="none";
                    }
                },
                error:function () {            //数据未能成功接受时的操作
                    alert("出错了。。。");
                },

            })
        }

7. 请解释JSONP的工作原理，以及它为什么不是真正的AJAX

关于ajax跨域请求？
1). Ajax为什么不能跨域？到底是卡在哪个环节了？。（请求成功了，但客户端浏览器拿不到请求结果）

Ajax其实就是向服务器发送一个GET或POST请求，然后取得服务器响应结果，返回客户端。

理论上这是没有任何问题的，然而普通ajax跨域请求，在服务器端不会有任何问题，只是服务端响应数据返回给浏览器的时候，浏览器根据响应头的Access-Control-Allow-Origin字段的值来判断是否有权限获取数据，

一般情况下，服务器端如果没有在这个字段做特殊处理的话，跨域是没有权限访问的，所以响应数据被浏览器给拦截了，
所以在ajax回调函数里是获取不到数据的。所以现在ajax跨域的问题可以转化为数据怎么拿回客户端的问题。

2). html的script标签，img标签，iframe标签，可以请求第三方的资源（不受同源策略影响）

web页面可以加载放在任意站点的js、css、图片等资源，不会受到"跨域"的影响。

这个时候，我们会想到：既然我们可以调用第三方站点的js,那么如果我们将数据放到第三方站点的js中不就可以将数据带到客户端了吗？

JSONP

JSONP(JSON with Padding（填充）)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。

其核心思想是利用JS标签里面的跨域特性进行跨域数据访问，在JS标签里面存在的是一个跨域的URL，实际执行的时候通过这个URL获得一段字符串，这段返回的字符串必须是一个合法的JS调用，通过EVAL这个字符串来完成对获得的数据的处理。

即：

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript
callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

JSONP的粗糙实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>jsonp</div>
</body>
<script>
    function getremotedata(data) {
        console.log(data);
    }
    var div = document.getElementsByTagName('div');

    div[0].onclick = function(){
        var url = "./getdata.js";
        var script = document.createElement('script');
        script.setAttribute('src', url);
        document.getElementsByTagName('head')[0].appendChild(script);
    };
</script>
</html>

远程的getdata.js

getremotedata({
    code:0,
    result:'success'
});

得到的结果：
在这里插入图片描述

8. 怎样添加、移除、移动、复制、创建和查找节点？

1）创建新节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入

3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

9. 浏览器的内核

IE: trident内核

Firefox：gecko内核

Safari：webkit内核

Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核

Chrome：Blink(基于webkit，Google与Opera Software共同开发)

10. 简述cookie/session记住登录状态机制原理

用户登录验证成功后，

使用 Cookie 记住登录状态：服务器会将用户名等信息放在响应头的 Set-Cookie 属性中返回给服务器，之后的 HTTP 请求都会携带这个 Cookie ，实现记住登录。

使用Session 记住登录状态：则服务器会将用户名等信息存放在本地，再随机生成一个登录标识通过 Cookie 返回给浏览器，之后浏览器每次发送请求也会携带这个 Cookie，服务器收到后便通过这个标识得到已登录的用户信息。

特点：cookie存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但会占用服务器的资源。

11. 简述你对HTTP控制访问（CORS）的理解

首先要搞明白什么是同源，什么是跨域。

打一个简单的比方，你自己从你家里拿东西，不会有人说，这是同源；但是你要从隔壁的邻居的冰箱去拿可乐，你觉得可能吗，这就是跨域。

从比方中回来，事实其实没有那么简单。理解了概念后，得知道如何去判断同源还是跨域。web服务器有三要素：协议（http、https）、端口号（不过多说）、web服务器域名（比如https://github.com/mamba666
中https://github.com就是域名）。三要素必须全部一致才算同源

个人认为写完上面的东东后已经理解了同源跨域已经如何区分。接下来就来看看真正的干货，不讲同源，只讲跨域（以下参考MDN）

浏览器端
如果发现有一个请求是跨域，那么浏览器会自动先拦截一下，给它的http header加上Origin字段。比如 http://localhost:8080变为Origin:http://localhost:8080。这样一来，服务器端就可以区分这个请求是不是跨域了。

服务器端
当服务器端收到浏览器端发送过来的请求后，会有一个响应header。它会告诉请求的浏览器哪儿些域名可以请求我，哪儿些方法可以执行。

响应回到浏览器端
此时浏览器会根据这个响应自动判断，然后在做决定。

服务器端返回给浏览器端的东西

Access-Control-Allow-Origin 允许跨域的Origin列表
Access-Control-Allow-Methods 允许跨域的方法列表（GET、POST等）
Access-Control-Allow-Headers 允许跨域的Header列表
Access-Control-Expose-Headers 允许暴露给JavaScript代码的Header列表
Access-Control-Max-Age 最大的浏览器缓存时间，单位为s

跨域请求形式
有两种，简单和非简单请求。这里说说我常遇到的 application/json 。这就是一种非简单请求，在以上所写的浏览器端之前，会先进行一次预请求，根据这个结果再去判断是否正式请求。

12. mouseover和mouseenter的区别

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是mouseout
mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

13. 改变函数内部this指针的指向函数（bind，apply，call的区别）

通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2…这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。

14. eval是做什么的

它的功能是将对应的字符串解析成js并执行，应该避免使用js，因为非常消耗性能（2次，一次解析成js，一次执行）

15. CSS三列布局

实现目标：左右宽度已知(假如左右宽度为300px)，整个高度已知(假如高度为100px)，中间宽度自适应
常见的布局方式: float布局 / Position定位 / table布局 / flex布局 / 网格(grid)布局

方法一、float布局

浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。

该布局法的不足是三个元素的顺序，middle占据文档流位置，middle一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行。

HTML：

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="right">我是右边</div>
        <div class="middle">我是中间</div>
    </div>
</body>

CSS：

<style>
        .left {
            background-color: pink;
            width: 300px;
            height: 100px;
            float: left;
        }
        
        .right {
            background-color: blue;
            width: 300px;
            height: 100px;
            float: right;
        }

中间的样式

        .middle {
            background-color: yellow;
            margin-left: 300px;
            margin-right: 300px;
        }
</style>

这里为什么要设置margin-left和margin-right呢？如果动手写这个代码的小伙伴会发现不设置这两个属性效果在中间元素内容比较少的时候效果是正常的，但是如果如果中间元素的子元素内容特别多的时候会出现如下情况：
在这里插入图片描述
特别提醒由于我们使用了float，所以为了不影响其他元素的显示这里需要清除浮动，这里使用伪元素的方式：

.main::after{
    content:'';
    display: block;
    clear: both;
}

方法二、Position布局

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的middle会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，可以使中间元素自适应屏幕宽度。

优点：三个div顺序可以任意改变。
缺点：因为是绝对定位，如果页面上还有其他内容，top的值需要小心处理。

position其属性有5种 :

inherit: 继承父元素的position属性值

static: 默认值，没有定位

fixed: 生成绝对定位的元素,相对于浏览器窗口进行定位（不管屏幕内容怎么滑动,其位置不会改变）

relative:生成相对定位,相对于其正常位置进行定位

absolute:生成绝对定位的元素,相当于static定位以外的第一个父元素进行定位。

根据以上内容我们可以看出我们需要选择给左中右都使用 absolute 绝对定位，由于absolute 是相当于static定位以外的第一个父元素进行定位，所以我们要给其父元素添加 position:relative属性, 这样这三个子元素可以相对于父元素进行绝对定位。

<style>
        .main {
            position: relative;
        }
        
        .left {
            background-color: pink;
            width: 300px;
            height: 100px;
            position: absolute;
            left: 0
        }
        
        .right {
            background-color: blue;
            width: 300px;
            height: 100px;
            position: absolute;
            right: 0
        }
        
        .middle {
            background-color: yellow;
            position: absolute;
            left: 300px;
            right: 300px
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
</body>

方法三、table布局

table是一种常见的布局方式，他可以将整个页面按照表格的方式设置为多行多列，但是由于书写table标签比较麻烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的方式可以让我们方便的使用table布局, 设置子元素为列的属性为display: table-cell

    <style>
        .main {
            width: 100%;
            display: table;
        }
        
        .left,
        .right,
        .middle {
            display: table-cell;
        }
        
        .left {
            background-color: pink;
            width: 300px;
            height: 100px;
        }
        
        .right {
            background-color: blue;
            width: 300px;
            height: 100px;
        }
        
        .middle {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
</body>

方法四、flex布局

flex布局是W3C提出了一种新的方案，可以简便、完整、响应式地实现各种页面布局。

当给元素设置display:flex，则该元素就是一个flex容器，其子元素就是容器成员，称之为flex项目，每个项目默认按照从左到右方式排列。

   <style>
        .main {
            display: flex;
        }       
        .left {
            background-color: pink;
            width: 300px;
            height: 100px;
            flex: none;
        }        
        .right {
            background-color: blue;
            width: 300px;
            height: 100px;
            flex: none;
        }       
        .middle {
            background-color: yellow;
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
</body>

如果想了解更多的flex布局大家可以查看一下链接：Flex学习

方法五、网格(grid)布局

网格它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。

将属性 display 值设为 grid 或 inline-grid 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

gird提供了 gird-template-columns、grid-template-rows属性让我们设置行和列的高、宽。

<style>
        div {
            width: 100%;
            display: grid;
            grid-template-rows: 100px;
            grid-template-columns: 300px auto 300px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="left">我是左边</div>
        <div class="middle">我是中间</div>
        <div class="right">我是右边</div>
    </div>
</body>

21. cookies sessionStorage和localstorage区别

相同点：都存储在客户端
不同点：

存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

越来越棒鸭

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
2021届Web前端面经积累（一）

1. 拖拽会用到哪些事件dragstart：拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.dragenter：拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮dragover：拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.dragleave：拖拽时鼠标移出目标元素时在目标...
复制链接

扫一扫