2019最新Web前端经典面试试题(含答案)

1,阐述清楚浮动的几种方式(常见问题)
(1)父级div定义 height
原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点:简单、代码少、容易掌握
缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

(2)父级div定义 overflow:hidden
原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
优点:简单、代码少、浏览器支持好

(3) 结尾处加空div标签 clear:both
原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

2,解释css sprites (精灵图),如何使用?
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片

3,如何用原生js给一个按钮绑定两个onclick事件?
//事件监听 绑定多个事件

var btn = document.getElementById("btn");
btn.addEventListener("click",hello1);
btn.addEventListener("click",hello2);
function hello1(){
 alert("hello 1");
}
function hello2(){
 alert("hello 2");
}

4,拖拽会用到哪些事件

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

5,请列举jquery中的选择器:

  • #id,.class,element,:first,:even,:eq(index),:contains(text)

6,Javascript中的定时器有哪些?他们的区别及用法是什么?

  • setTimeout 只执行一次
  • setInterval 会一直重复执行

7,请描述一下 cookies sessionStorage和localstorage区别
(1)存储大小

  • cookie数据大小不能超过4k。
  • sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

(2)有效时间

  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。
  • cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

(3)数据与服务器之间的交互方式

  • cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端。
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

8,编写一个方法去掉数组里面重复的内容

  ES5的方法
	  var arr = [6, 1, 3, 1, 6, 1, 6, 1, 7, 1];
	        function unRepeat(arr) {
	            var getArr = [];
	                for (var i = 0; i < arr.length; i++) {
	                 if (getArr.indexOf(arr[i]) == -1) {
	                    getArr.push(arr[i]);
	                }
	            }
	            return getArr;
	        };
	   console.log(unRepeat(arr)) // [6, 1, 3, 7]

  ES6的方法
    *IE浏览器不支持,造成结果不对
    var arr = [6, 1, 3, 1, 6, 1, 6, 1, 7, 1]; 
    let set=new Set(arr);
    console.log(set)  // {6, 1, 3, 7} 返回一个对象

9,document.write和innerHTML的区别:
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。
innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点,不会导致页面全部重绘
innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

10,什么是ajax? ajax的步骤?
ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。
如何使用ajax?

  • 第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。

    var xhttp;
    if (window.XMLHttpRequest) {
    //现代主流浏览器
    xhttp = new XMLHttpRequest();
    } else {
    // 针对浏览器,比如IE5或IE6
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
  • 第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

  • 第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

  • 第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

11,xml和json的区别

  • JSON相对于XML来讲,数据的体积小,传递的速度更快些
  • JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互
  • XML对数据描述性比较好;
  • JSON的速度要远远快于XML;

12,js有几种数据类型,其中基本数据类型有哪些

  1. 五种基本数据类型(没有属性和方法):
    Number、String、Boolean、Undefined、Null
    基本数据类型存储在栈内存,存储的是值。
  2. 一种复合数据类型:
    Object(object、array、function)
    复杂数据类型存储在堆内存,存储的是地址。

13,undefined和null的区别

  • null: Null类型,代表“空值”,代表一个空对象指针,使用typeof运算得到 “object”,所以你可以认为它是一个特殊的对象值。
  • undefined: Undefined类型,当一个声明了一个变量未初始化时,得到的就是undefined。
  • null是javascript的关键字,可以认为是对象类型,它是一个空对象指针,和其它语言一样都是代表“空值”,不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的,为了区分空指针对象和未初始化的变量,它是一个预定义的全局变量。没有返回值的函数返回为undefined,没有实参的形参也是undefined。
  • javaScript权威指南: null 和 undefined 都表示“值的空缺”,你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺,而null是表示程序级的、正常的或在意料之中的值的空缺

14,http和https有何区别?

  • http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。
  • https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份。

15,常见的HTTP状态码

  • 2开头 (请求成功)表示成功处理了请求的状态代码。
    200 (成功) 服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。
    201 (已创建) 请求成功并且服务器创建了新的资源。
    202 (已接受) 服务器已接受请求,但尚未处理。

  • 3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。
    300 (多种选择) 针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。
    301 (永久移动) 请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
    302 (临时移动) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
    303 (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
    304 (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。
    305 (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。
    307 (临时重定向) 服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

  • 4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。
    400 (错误请求) 服务器不理解请求的语法。
    401 (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。
    403 (禁止) 服务器拒绝请求。
    404 (未找到) 服务器找不到请求的网页。
    405 (方法禁用) 禁用请求中指定的方法。
    406 (不接受) 无法使用请求的内容特性响应请求的网页。
    407 (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
    408 (请求超时) 服务器等候请求时发生超时。

  • 5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。
    500 (服务器内部错误) 服务器遇到错误,无法完成请求。
    501 (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。
    502 (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。
    503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。
    504 (网关超时) 服务器作为网关或代理,但是没有及时从上游服务器收到请求。
    505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

16,如何进行网站性能优化
(1)目的: 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
(2)措施:
——减少HTTP请求数。
——使用缓存。
——脚本的无阻塞加载。
——内联脚本的位置优化等。
——Javascript中的DOM 操作优化、CSS选择符优化。
——图片编码优化,懒加载。
——使用负载均衡方案。

17,什么是mvvm,mvc?区别?
(1)MVC(Model-View-Controller)

  • MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)。
  • MVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来。

(2)MVVM(Model-View-ViewModel)

  • 如果说MVP是对MVC的进一步改进,那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应view。微信小程序前端使用mvvm。

18,px和em的区别

  • px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不会因为其他元素的尺寸变化而变化;
  • em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。

19,优雅降级和渐进增强

  • 渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
  • 优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
  • 其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容。

20, JS哪些操作会造成内存泄露
(1)意外的全局变量引起的内存泄露。
function leak(){
leak=“xxx”;//leak成为一个全局变量,不会被回收
}
(2)闭包引起的内存泄露。
(3)没有清理的DOM元素引用。
(4)被遗忘的定时器或者回调。
(5)子元素存在引起的内存泄露。

21,什么是闭包,如何使用它,为什么要使用它?

  • 闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
  • 所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
  • 闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
  • 使用闭包的注意点:
    • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
    • 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

22,请解释一下JavaScript的同源策略。
在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议, 相同的端口,相同的host,那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患。

23,怎样添加、移除、移动、复制、创建和查找节点?
(1)创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
(2)添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
(3)查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id,唯一性

24,浏览器是如何渲染页面的?
渲染的流程如下:

  1. 解析HTML文件,创建DOM树。
    自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。
  2. 解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式。
  3. 将CSS与DOM合并,构建渲染树(Render Tree)。
  4. 布局和绘制,重绘(repaint)和重排(reflow)。

25,从输入url到显示页面,都经历了什么?
一般会经历以下几个过程:
1、首先,在浏览器地址栏中输入url。
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。
3、在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址。),解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手。(TCP即传输控制协议。TCP连接是互联网连接协议集的一种。)
5、握手成功后,浏览器向服务器发送http请求,请求数据包。
6、服务器处理收到的请求,将数据返回至浏览器。
7、浏览器收到HTTP响应。
8、读取页面内容,浏览器渲染,解析html源码。
9、生成Dom树、解析css样式、js交互。
10、客户端和服务器交互。
11、ajax查询。

26,display:none和visibility:hidden区别?

  1. display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;
  2. visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
  3. 使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

27,JavaScript中如何检测一个变量是一个String类型?请写出函数实现
typeof(obj) === “string”
typeof obj === “string”
obj.constructor === String

28,判断一个字符串中出现次数最多的字符,统计这个次数
var str = “assssjdssskssalsssdkjsssdss”;

    function getStr(str) {
        var o = {};

        for (var i = 0, length = str.length; i < length; i++) {
            var char = str[i];
            if (o[char]) { //char就是对象o的一个属性,o[char]是属性值,o[char]控制出现的次数
                o[char]++; //次数加1
            } else {
                o[char] = 1; //若第一次出现,次数记为1
            }
        }

        //遍历对象,找到出现次数最多的字符和次数
        o.maxChar = null;
        o.max = 0;
        for (var key in o) {
            if (o.max < o[key]) {
                o.max = o[key]; //max始终储存次数最大的那个
                o.maxChar = key; //那么对应的字符就是当前的key
            }
        }
        return o;
    }
    console.log("出现最多的字符是" + getStr(str).maxChar);
    console.log("出现的次数是" + getStr(str).max);

29,$(document).ready()方法和window.onload有什么区别?
(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。
(2)、.(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

30,jquery中 get()提交和 post()提交有区别吗?
相同点:都是异步请求的方式来获取服务端的数据;
不同点:
(1)请求方式不同:get() 方法使用GET方法来进行异步请求的。post() 方法使用POST方法来进行异步请求的。
(2)参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。
(3)数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多。
(4)安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值