js面试题

2018-07-04  本文已影响0人  初心_137a

1.数据类型`

6个,亮点是es6新增的symbol;

2.===与==的区别

===是根据判断类型和值,==只判断值

比如 “6”==6是成立的   undefined==null    判断值的时候  想到 []!=[]        NAN!=NAN       ES6新语法  Number.isNaN(NaN)的结果是true  

3.window.onload与domcontentloaded的区别

onload主要是加载完body里面的代码才会触发,DOMcontentloaded仅加载DOM的完成,不包含样式表,图片,flash;

4.给10个li添加点击事件,弹出下标

5.通过字符串拼接添加dom元素和通过appendchild添加dom有什么区别,那个更好?

通过字符串拼接dom元素可以减少对DOM元素的操作,把事件处理完毕,在添加到DOM元素上;

通过appendchild添加dom,添加一次,操作一次dom,增重了http的压力,所以我建议尽量要使用字符串拼接的方式添加dom元素;不过凡事都没有绝对的好处,过多的使用字符串拼接会造成一系列的性能问题;

6 你都使用什么实现模块加载?

一般使用的是es6的export(导出),import(导入)

7 如何对数组随机排序

8 如何理解原型和原型

9JQ中链式操作的原理

$("#app").css().show().siblings().hide()

10this 指向问题

11 从输入URL到现实页面的过程

(1),当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器都会开启一个线程来处理这个请求,同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。

    (2), 浏览器与远程`Web`服务器通过`TCP`三次握手协商来建立一个`TCP/IP`连接。该握手包括一个同步报文,一个同步-应答报文和一个应答报文,这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信,而后服务器应答并接受客户端的请求,最后由客户端发出该请求已经被接受的报文。

    (3),一旦`TCP/IP`连接建立,浏览器会通过该连接向远程服务器发送`HTTP`的`GET`请求。远程服务器找到资源并使用HTTP响应返回该资源,值为200的HTTP响应状态表示一个正确的响应。

    (4),此时,`Web`服务器提供资源服务,客户端开始下载资源。

请求返回后,便进入了我们关注的前端模块

简单来说,浏览器会解析`HTML`生成`DOM Tree`,其次会根据CSS生成CSS Rule Tree,而`javascript`又可以根据`DOM API`操作`DOM`

12图片懒加载的原理

13对于一个无限下拉加载图片的页面。如何给图片加点击事件   原生js事件委托和JQ委托的写法

14ajax

 (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

    (2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

    (3)设置响应`HTTP`请求状态变化的函数.

    (4)发送`HTTP`请求.

    (5)获取异步调用返回的数据.

    (6)使用JavaScript和DOM实现局部刷新.

    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

   xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

}

15 跨域是如何产生的,解决方式是什么

跨域是由于同源策略导致的,一般的做项目的时候如果是前后端分离的混合式开发,就存在这个跨域问题;

解决方式:

(1)porxy代理

定义和用法:proxy代理用于将请求发送给后台服务器,通过服务器来发送请求,然后将请求的结果传递给前端。

实现方法:通过nginx代理;

注意点:1、如果你代理的是https协议的请求,那么你的proxy首先需要信任该证书(尤其是自定义证书)或者忽略证书检查,否则你的请求无法成功。

(2)CORS 【Cross-Origin Resource Sharing】

定义和用法:是现代浏览器支持跨域资源请求的一种最常用的方式。

使用方法:一般需要后端人员在处理请求数据的时候,添加允许跨域的相关操作。如下:

res.writeHead(200, {

    "Content-Type": "text/html; charset=UTF-8",

    "Access-Control-Allow-Origin":'http://localhost',

    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',

    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'});

(3)jsonp

定义和用法:通过动态插入一个script标签。浏览器对script的资源引用没有同源限制,同时资源加载到页面后会立即执行(没有阻塞的情况下)。

特点:通过情况下,通过动态创建script来读取他域的动态资源,获取的数据一般为json格式。

16 描述 cookie  localStorage sessionStorage的区别   

17 谈谈你对模块化的理解

ES6新增的import 和export 

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

AMD 是提前执行,CMD 是延迟执行。

AMD推荐的风格通过返回一个对象做为模块对象,CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的。

CMD模块方式

    define(function(require, exports, module) {

      // 模块代码

    });

18ajax中缓存问题怎么解决?

一般ajax的get请求中,当两次

19position 属性都是相对于什么来定位的?

static:首先position属性的默认值是static,static没有定位,元素出现在正常的流中,会默认忽略top、bottom、left、right。与脱离文档流的元素一起z-index会失效;

relative:其次relative也未脱离文档流,relative生成相对定位的元素,相对于自身的正常位置做定位,因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。相当于元素往右偏移20个元素;

absolute:绝对定位,absolute相对于除去static定位以外的第一个父元素进行定位,如果想设置子元素相对于父元素定位,那须设置“子绝父相”,若父元素本身是绝对定位或者固定定位,那就不用设置“父相”。

fixed:固定定位是相对于浏览器窗口的定位,无论页面的上拉下滑,fixed定位元素相对于浏览器窗口的位置不变,一般用来做弹出窗口或者广告定位。

inherit:规定应该从父元素继承position属性的值(任何版本的ie浏览器都不支持该属性)

上一篇下一篇

猜你喜欢

热点阅读