大前端JS部分基础面试题(含答案)(二)

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 大前端JS部分基础面试题(含答案)(二)

大前端JS部分基础面试题(含答案)(一):https://developer.aliyun.com/article/1413385

43.ajax执行流程?

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息3. 设置响应HTTP请求状态变化的函数4. 发送HTTP请求5. 获取异步调用返回的数据6. 使用JavaScript和DOM实现局部刷新

44.xhr对象 status ? readystate?

status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。

45.readystate 0~4

0:未初始化状态:此时,已经创建了一个XMLHttpRequest对象1: 准备发送状态:此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端2:已经发送状态:此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应3:正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到4:完成响应状态:此时,已经完成了HTTP响应的接收

46.说出几个http协议状态码?

200, 201, 302, 304, 400, 404, 500
200:请求成功201:请求成功并且服务器创建了新的资源302:服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。304:自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。400:服务器不理解请求的语法。404:请求的资源(网页等)不存在500: 内部服务器错误

47.上一个项目是什么?主要负责哪些?购物车流程?支付功能?

主要负责哪些就讲主要做哪些功能模块:
1)商品模块:1、商品列表:商品排序 商品筛选 商品过滤 商品查询 商品推荐2、商品详情:类型推荐 商品简介 商品详情 商品评价 售后维护
2)购物车模块:商品编号、数量、价格、总额、运费、运输选项、运费总计、从购物车删除选项、更新数量、结账、继续购物、商品描述、库存信息

48.sessionStorage和localstroage与cookie之间有什么关联, cookie最大存放多少字节

三者共同点:都是保存在浏览器端,且同源的。
区别:1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
2、存储大小限制也不同,cookie数据不能超过4k,sessionStorage和localStorage 但比cookie大得多,可以达到5M
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面(即数据不共享);localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的( 即数据共享 )。

49.ajax中 get 和 post 有什么区别?

get和post都是数据提交的方式。get的数据是通过网址问号后边拼接的字符串进行传递的。post是通过一个HTTP包体进行传递数据的。get的传输量是有限制的,post是没有限制的。get的安全性可能没有post高,所以我们一般用get来获取数据,post一般用来修改数据。

50.Gc机制是什么?为什么闭包不会被回收变量和函数?

1、Gc垃圾回收机制;2、外部变量没释放,所以指向的大函数内的小函数也释放不了

51.简述下你理解的面向对象?

万物皆对象,把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.
面向对象具有封装性,继承性,多态性。封装:隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.
总之,面向对象的特性提高了大型程序的重用性和可维护性.

52.this是什么 在不同场景中分别代表什么

(1)function a(){ this ?} //This:指向windows
(2)function b(){ return function(){ this ?}}b()(); //This:指向windows
(3)function c(){ return {s:function(){this}}}c().s(); //This:指向object
由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。

53.你对数据校验是怎么样处理的?jquery.validate?

通俗的说,就是为保证数据的完整性,用一种指定的算法对原始数据计算出的一个校验值。接收方用同样的算法计算一次校验值,如果和随数据提供的校验值一样,就说明数据是完整的。用正则表达式来处理;jquery.validate:为表单验证插件

54.如何对登录的账号密码进行加密?

Md5

55.在jq中 mouseover mouseenter mouseout mouseleave 和 hover有什么关联?

mouseenter与mouseover:不论鼠标指针穿过被选中元素或其子元素,都会触发mouseover事件。只有在鼠标指针穿过被选元素时,才会触发mouseentr事件。
mouseout与mouseleave:不论鼠标离开被选元素还是任何子元素,都会触发mouseout事件。只有在鼠标指针离开被选元素时,才会触发mouseleave事件。
hover:hover是一个符合方法,相当于mouseenter+mouseleave。

56.jsonp原理? 缺点?

工作原理:使用script标签实现跨域访问,可在url中指定回调函数,获取JSON数据并在指定的回调函数中执行jquery实现jsop。
缺点:只支持GET方式的jsonp实现,是一种脚本注入行为存在一定的安全隐患。如果返回的数据格式有问题或者返回失败了,并不会报错。

57.除了jsonp 还有什么跨域方式

javascript跨域有两种情况:1、基于同一父域的子域之间,如: http://a.c.comhttp://b.c.com2、基于不同的父域之间,如: http://www.a.comhttp://www.b.com3、端口的不同,如: http://www.a.com:8080http://www.a.com:80884、协议不同,如: http://www.a.comhttps://www.a.com
对于情况3和4,需要通过后台proxy来解决,具体方式如下:a、在发起方的域下创建proxy程序b、发起方的js调用本域下的proxy程序c、proxy将请求发送给接收方并获取相应数据d、proxy将获得的数据返回给发起方的js
代码和ajax调用一致,其实这种方式就是通过ajax进行调用的而情况1和2除了通过后台proxy这种方式外,还可以有多种办法来解决:1、document.domain+iframe(只能解决情况1):a、在发起方页面和接收方页面设置document.domain,并将值设为父域的主域名(window.location.hostname)b、在发起方页面创建一个隐藏的iframe,iframe的源是接收方页面c、根据浏览器的不同,通过iframe.contentDocument || iframe.contentWindow.document来获得接收方页面的内容d、通过获得的接收方页面的内容来与接收方进行交互这种方法有个缺点,就是当一个域被攻击时,另一个域会有安全漏洞出现。

58.如何使用storage 对js文件进行缓存

由于sessionStorage - 针对一个 session 的数据存储,所以我们一般利用localStorage储存js文件,只有在第一次访问该页面的时候加载js文件,以后在访问的时候加载本地localStorage执行

59.如何确保ajax或连接不走缓存路径

在Ajax中使用Get请求数据不会有页面缓存的问题,而使用POST请求可是有时候页面会缓存我们提交的信息,导致我们发送的异步请求不能正确的返回我们想要的数据
$.post(url,data ,ranNum:Math.random()} ,function(data){})
ranNum : 这个是防止缓存的核心,每次发起请求都会用Math.random()方法生成一个随机的数字,这样子就会刷新url缓存

60.split() join()?

前者是切割成数组的形式,后者是将数组转换成字符串

61.slice() splice()?

slice() 方法可从已有的数组中返回选定的元素。splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

62.typeof?typeof [ ]返回数据类型是?

1

2

3

4

//判断基本数据类型;var a=[];typeof a输出object;//本来判断一个对象类型用typeof是最好的,不过对于Array类型是不适用的,//可以使用 instanceof操作符:       var arrayStr=new Array("1","2","3","4","5");   

       alert(arrayStr instanceofArray); //当然以上在一个简单的页面布局里面是没有问题的,如果是复杂页面情况,//入获取的是frame内部的Array对象,可以用这个函数判断:       function isArray(obj) {     

          returnObject.prototype.toString.call(obj) === '[object Array]';      

       }

63.disabled readyonly?

readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,当表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去。

64.同步异步?

1、进程同步:就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回。也就是必须一件一件事做,等前一件做完了才能做下一件事
2、异步的概念和同步相对。当一个异步过程调用发出后,调用者不能立刻得到结果。实际处理这个调用的部件在完成后,通过状态、通知和回调来通知调用者。

65.promise

Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

66.函数fn1 函数fn2 函数fn3,如果想在三个函数都执行完成后执行某一个事件应该如何实现?

1

2

3

4

5

6

7

8

//1、设置事件监听。//2、回调函数:function fn1(){

       console.log("执行fn1");

       fn2();}functionfn2(){

       console.log("执行fn2");

       fn3();}functionfn3(){

       console.log("执行fn3");

       mou();}functionmou(){

       console.log("执行某个函数");}fn1();

67.JavaScript提供了哪几种“异步模式”?

1、回调函数(callbacks)2、事件监听3、Promise对象

68.什么是移动端的300ms延迟?什么是点击穿透?解决方案?

移动端300ms延迟:假定这么一个场景。用户在 浏览器里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还是想要进行双击操作。因此,浏览器 就等待 300 毫秒,以判断用户是否再次点击了屏幕。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。
点击穿透:假如页面上有两个元素A和B。B元素在A元素之上。我们在B元素的touchstart事件上注册了一个回调函数,该回调函数的作用是隐藏B元素。我们发现,当我们点击B元素,B元素被隐藏了,随后,A元素触发了click事件。这是因为在移动端浏览器,事件执行的顺序是touchstart > touchend > click。而click事件有300ms的延迟,当touchstart事件把B元素隐藏之后,隔了300ms,浏览器触发了click事件,但是此时B元素不见了,所以该事件被派发到了A元素身上。如果A元素是一个链接,那此时页面就会意外地跳转。
300ms延迟解决方案:(1) 禁用缩放,在html文档头部加meta标签如下:<meta name=”viewport” content=”user-scalable=no”/>
(2) 更改默认的视口宽度 (响应式布局,消除了站点上可能存在的双击绽放的请求)<meta name=”viewport” content=”width=device-width”/>
(3) Css touch-actiontouch-action:none;在该元素上的操作不会触发用户代理的任何行为,无需进行3000ms延迟判断。
(4) FastClick为解决移动端浏览器300毫秒延迟开发的一个轻量级的库点击穿透解决方案:(1)只用touch(2)只用click(3)tap后延迟350ms再隐藏mask(4)pointer-events

69.变量作用域?

1

2

3

4

5

6

7

8

9

10

//变量作用域:一个变量的作用域是程序源代码中定义这个变量的区域。全局变量拥有全局作用域,//在js代码中任何地方都是有定义的。在函数内声明的变量只在函数体内有定义,它们是局部变量,//作用域是局部性的。函数参数也是局部变量,它们只在函数体内有定义。var a = "";window.b=''”;function(e) {

       varc= "";

       d="";

       e="";}functiongo() {

       console.info(this);//window       return function() {

               console.info(this); // window               return {

                b:function(){

                       console.info(this); //b的父对象                   }

            }

       }}go()().b();

70.call & apply 两者之间的区别

call和apply都是改变this指向的方法,区别在于call可以写多个参数,而apply只能写两个参数,第二个参数是一个数组,用于存放要传的参数。

71.call和apply 有什么好处?

用call和apply:实现更好的继承和扩展,更安全。

72.谁是c的构造函数?

1

2

functionab() {

         this.say = ""; } ab.constructor = {} ab.name = ''varc = newab(); //构造函数默认指向函数本身,ab是一个类,它的构造函数是它本身,//然后ab.constructor={};ab的构造函数就指向{}了,c是ab的实例化对象,c的构造函数就是{}//通过使用new的时候,创建对象发生了那些改变? 当使用new操作时,会马上开辟一个块内存,//创建一个空对象,并将this指向这个对象。接着,执行构造函数ab(),对这个空对象进行构造//(构造函数里有什么属性和方法都一一给这个空白对象装配上去,这就是为何它叫构造函数了)。

73.sass和less有什么区别?

1.编译环境不一样 Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中。
2.变量符不一相,less是@,而scss是$,而且它们的作用域也不一样,less是块级作用域
3.输出设置,Less没有输出设置,sass提供4种输出选项,nested,compact,compressed和expanded nested:嵌套缩进的css代码(默认) expanded:展开的多行css代码 compact:简洁格式的css代码 compressed:压缩后的css代码
4.sass支持条件语句,可以使用if{}else{},for{}循环等等,而less不行
5.引用外部css文件,sass引用外部文件必须以_开头,文件名如果以下划线_形状,sass会认为该文件是一个引用文件,不会将其编译为css文件。less引用外部文件和css中的@import没什么差异。
6.sass和less的工具库不同。sass有工具库Compass, 简单说,sass和Compass的关系有点像Javascript和jQuery的关系,Compass是sass的工具库。在它的基础上,封装了一系列有用的模块和模板,补充强化了sass的功能。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用less语法编写。
总结:不管是sass,还是less,都可以视为一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大,sass的功能比less强大,基本可以说是一种真正的编程语言了,less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择less。

74.bootstrap好处?

自适应和响应式布局,12栅格系统,统一的界面风格和css样式有利于团队开发。编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。

75.开发时如何对项目进行管理?gulp?

本人开发时,利用gulp等前端工作流管理工具管理项目。 gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,能够合并文件,压缩文件,语法检查,监听文件变化,测试,转换二进制,转换图片等一系列功能。gulp仅有少量的API,所以非常容易学习。实现良好的项目管理。

76.压缩合并目的?http请求的优化方式?

1)Web性能优化最佳实践中最重要的一条是减少HTTP请求。而减少HTTP请求的最主要的方式就是,合并并压缩JavaScript和CSS文件。
CSS Sprites(CSS精灵):把全站的图标都放在一个图像文件中,然后用CSS的background-image和background-position属性定位来显示其中的一小部分。
合并脚本和样式表; 图片地图:利用image map标签定义一个客户端图像映射,(图像映射指带有可点击区域的一幅图像)具体看: http://club.topsage.com/thread-2527479-1-1.html
图片js/css等静态资源放在静态服务器或CDN服时,尽量采用不用的域名,这样能防止cookie不会互相污染,减少每次请求的往返数据。
css替代图片, 缓存一些数据
少用location.reload():使用location.reload() 会刷新页面,刷新页面时页面所有资源 (css,js,img等) 会重新请求服务器。建议使用location.href="当前页url" 代替location.reload() ,使用location.href 浏览器会读取本地缓存资源。

77.ajax请求方式有几种(8种)?

1)$.get(url,[data],[callback])2)$.getJSON(url,[data],[callback])3)$.post(url,[data],[callback],[type])4)$.ajax(opiton)5)$.getScript( url, [callback] )6)jquery对象.load( url, [data], [callback] )7)serialize() 与 serializeArray()

78.如何copy一个dom元素?

原生Js方法:var p = document.getElementsByTagName('p')[0];var clone = p.cloneNode();Jquery方法:$('p').clone();在默认情况下,.clone()方法不会复制匹配的元素或其后代元素中绑定的事件。不过,可以为这个方法传递一个布尔值参数,将这个参数设置为true, 就可以连同事件一起复制,即.clone(true)。

79.数组的排序方法(sort)?排序?汉字排序?

数组的排序方法:reverse()和sort()。reverse()方法会对反转数组项的顺序。Eg:var values = [0, 1, 5, 10, 15]; values.sort();//0,1,10,15,5var values = [1, 2, 3, 4, 5]; values.reverse();//5,4,3,2,1
js中的排序(详情参考: http://www.tuicool.com/articles/IjInMbU)利用sort排序, 冒泡排序, 快速排序, 插入排序, 希尔排序, 选择排序归并排序
localeCompare() 方法用于字符串编码的排序localeCompare 方法:返回一个值,指出在当前的区域设置中两个字符串是否相同。

80.简述一下你理解的面向对象?

面向对象是基于万物皆对象这个哲学观点. 把一个对象抽象成类,具体上就是把一个对象的静态特征和动态特征抽象成属性和方法,也就是把一类事物的算法和数据结构封装在一个类之中,程序就是多个对象和互相之间的通信组成的.
面向对象具有封装性,继承性,多态性。
封装:隐蔽了对象内部不需要暴露的细节,使得内部细节的变动跟外界脱离,只依靠接口进行通信.封装性降低了编程的复杂性. 通过继承,使得新建一个类变得容易,一个类从派生类那里获得其非私有的方法和公用属性的繁琐工作交给了编译器. 而 继承和实现接口和运行时的类型绑定机制 所产生的多态,使得不同的类所产生的对象能够对相同的消息作出不同的反应,极大地提高了代码的通用性.
总之,面向对象的特性提高了大型程序的重用性和可维护性.

81.如何创建一个对象?

1. 工厂模式2. 构造函数模式3. 原型模式4. 混合构造函数和原型模式5. 动态原型模式6. 寄生构造函数模式7. 稳妥构造函数模式
程序的设计模式?工厂模式?发布订阅?1)设计模式并不是某种语言的某块代码,设计模式是一种思想,提供给在编码时候遇到的各种问题是可以采取的解决方案,更倾向于一种逻辑思维,而不是万能代码块。设计模式主要分三个类型:创建型、结构型和行为型。创建型模式:单例模式,抽象工厂模式,建造者模式,工厂模式与原型模式。结构型模式:适配器模式,桥接模式,装饰者模式,组合模式,外观模式,享元模式以及代理模式。行为型模式:模板方法模式,命令模式,迭代器模式,观察者模式,中介者模式,备忘录模式,解释器模式,状态模式,策略模式,职责链模式和访问者模式。
2)与创建型模式类似,工厂模式创建对象(视为工厂里的产品)是无需指定创建对象的具体类。工厂模式定义一个用于创建对象的接口,这个接口由子类决定实例化哪一个类。该模式使一个类的实例化延迟到了子类。而子类可以重写接口方法以便创建的时候指定自己的对象类型。
3)观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称。( 设计模式实在是太高深了,小伙伴门结合网上实例自行学习,我实在是无能为力啊 )

82.commonjs?requirejs?AMD|CMD|UMD?

1.CommonJS就是为JS的表现来制定规范,NodeJS是这种规范的实现,webpack 也是以CommonJS的形式来书写。因为js没有模块的功能,所以CommonJS应运而生。但它不能在浏览器中运行。 CommonJS定义的模块分为:{模块引用(require)} {模块定义(exports)} {模块标识(module)}
2.RequireJS 是一个JavaScript模块加载器。 RequireJS有两个主要方法(method): define()和require()。这两个方法基本上拥有相同的定义(declaration) 并且它们都知道如何加载的依赖关系,然后执行一个回调函数(callback function)。与require()不同的是, define()用来存储代码作为一个已命名的模块。 因此define()的回调函数需要有一个返回值作为这个模块定义。这些类似被定义的模块叫作AMD (Asynchronous Module Definition,异步模块定义)。
3.AMD 是 RequireJS 在推广过程中对模块定义的规范化产出 AMD异步加载模块。它的模块支持对象 函数 构造器 字符串 JSON等各种类型的模块。 适用AMD规范适用define方法定义模块。
4.CMD是SeaJS 在推广过程中对模块定义的规范化产出AMD与CDM的区别:(1)对于于依赖的模块,AMD 是提前执行(好像现在也可以延迟执行了),CMD 是延迟执行。(2)AMD 推崇依赖前置,CMD 推崇依赖就近。(3)AMD 推崇复用接口,CMD 推崇单用接口。(4)书写规范的差异。
5.umd是AMD和CommonJS的糅合。AMD 浏览器第一的原则发展 异步加载模块。CommonJS模块以服务器第一原则发展,选择同步加载,它的模块无需包装(unwrapped modules)。这迫使人们又想出另一个更通用的模式UMD ( Universal Module Definition ), 希望解决跨平台的解决方案。UMD先判断是否支持Node.js的模块( exports )是否存在,存在则使用Node.js模块模式。

83. js的几种继承方式?

1.使用对象冒充实现继承2.采用call、Apply方法改变函数上下文实现继承3.原型链方式继承

84. JavaScript原型,原型链 ? 有什么特点?

在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.
访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性. 原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的。

85. eval是做什么的?

它的功能是把对应的字符串解析成JS代码并运行; 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)。

86. null,undefined 的区别?

undefined表示变量声明但未初始化的值,null表示准备用来保存对象,还没有真正保存对象的值。从逻辑角度看,null表示一个空对象指针。

87. JSON 的了解?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

88. js延迟加载的方式有哪些?

defer和async、动态创建DOM方式(用得最多)、按需异步载入js

89. ajax 是什么?

异步javascript和XML,是指一种创建交互式网页应用的网页开发技术。通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

90. 同步和异步的区别?

javascript同步表示sync,指:代码依次执行 javascript异步表示async,指:代码执行不按顺序,‘跳过’执行,待其他某些代码执行完后再来执行,成为异步。

91. 如何解决跨域问题?

Jsonp、iframe、window.name、window.postMessage、服务器上设置代理页面

92. 异步加载的方式有哪些?

(1) defer,只支持IE(2) async:true(3) 创建script,插入到DOM中,加载完毕后callBack

93. jQuery与jQuery UI 有啥区别?

jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等。

94. 你有哪些性能优化的方法?

(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip, CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比p+css布局慢。

95. 一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)

查找浏览器缓存DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求进行HTTP协议会话客户端发送报头(请求报头)服务器回馈报头(响应报头)html文档开始下载文档树建立,根据标记请求所需指定MIME类型的文件文件显示
浏览器这边做的工作大致分为以下几步:加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)

96. ajax的缺点

1、ajax不支持浏览器back按钮。2、安全问题 AJAX暴露了与服务器交互的细节。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。5、不容易调试
相关文章
|
27天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
24天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
39 5
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
34 4
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
存储 缓存 JavaScript
56 道高频 JavaScript 与 ES6+ 的面试题及答案(下)
56 道高频 JavaScript 与 ES6+ 的面试题及答案(下)
389 0
56 道高频 JavaScript 与 ES6+ 的面试题及答案(下)
|
存储 缓存 JSON
56 道高频 JavaScript 与 ES6+ 的面试题及答案(中)
56 道高频 JavaScript 与 ES6+ 的面试题及答案(中)
318 0
|
存储 设计模式 缓存
14万字 | 400多道JavaScript 面试题及详细答案03(建议收藏)
14万字 | 400多道JavaScript 面试题及详细答案(建议收藏)
193 0
14万字 | 400多道JavaScript 面试题及详细答案03(建议收藏)
|
Web App开发 JavaScript 前端开发
14万字 | 400多道JavaScript 面试题及详细答案12(建议收藏)
14万字 | 400多道JavaScript 面试题及详细答案12(建议收藏)
177 0