前端面试常见问题汇总

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介:

支持HTML5的浏览器有哪些?

1.IE:IE9支持部分,IE10+支持全部

2.Firefox:Firefox3.5,3.6支持大部分,Firefox4.0+支持全部

3.Chrome:Chrome3-5支持大部分,Chrome6+支持全部

4.Opera:Opera10.5支持大部分,Opera10.6支持全部

5.Safari3.1+支持大部分

6.Konqueror4.4+支持大部分

7.iPhone3+自带浏览器支持大部分

8.iPad3.2+自带浏览器支持大部分

9.Anroid2.1+自带浏览器支持大部分

call和apply的区别是什么?

call和apply都属于Function.prototype的一个方法,作用都是:调用一个对象的一个方法,以另一个对象替换当前对象;只是使用方式不同。

apply:最多只能有两个参数---新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。

call:则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么Global对象被用作thisObj

HTML5标准提供了哪些新的api,HTML5怎么用选择器选择id="test"的元素,css有哪些新特性

1.HTML5的新特性:

新的内容标签:header nav content footer article aside

更好的单元格体系:

音频、视频API:video radio

画布(Canvas) API

地理(Geolocation) API

网页存储(Web storage) API:localStorage,sessionStorage

拖拽释放(Drag and drop) API

2.[id="test"]{}

3.CSS3 新特性:

RGBa:CSS3的RGBa新特性允许对每个元素进行色彩以及透明度的设置,而原来常用的opacity命令只能对元素及其子元素进行设置

Multi-column layout:CSS3新提供的多栏布局选择器无需HTML布局标签即可生成多栏布局,同时‘栏数’、‘栏宽’以及‘栏间距’都是可以定义的

Round corners:圆角功能通过Border-radius可以没有任何难度的给指定的HTML元素添加圆角。并且可以定义圆角的大小,以及哪个角是圆角,哪个角不是圆角

@font-face:当网页显示某种用户没有安装的字体时,CSS3提供的@font-face功能会自动默默地帮用户从web服务器下载,而不用考虑用户的机器是否安装了相应字体

此外,CSS3还有渐变、防止字符串过长溢出、多重背景以及用图片来作为元素边框等功能

请写出不少于5种Math和对象的方法,并分别说明他们的含义和语法

Math.sin():返回数字的正弦值

Math.cos():返回数字的余弦值

Math.tan():返回数字的正切值

Math.asin():返回数字的反正弦值

Math.acos():返回数字的反余弦值

Math.atan():返回数字的反正切值

Math.atan2():返回由x轴到点(x,y)的角度(以弧度为单位)

Math.PI:返回圆的周长与其直径的比值(圆周率π),约等于3.1415926

Math.LN2:返回2的自然对数loge2,约等于0.693

Math.LN10:返回10的自然对数loge2,约等于2.302

Math.abs():返回数字的绝对值

Math.ceil():返回大于等于数字参数的最小整数(取整函数),对数字进行上舍入

Math.floor():返回小于等于数字参数的最大整数,对数字进行下舍入

Math.round():返回数字最接近的整数,四舍五入

Math.max():返回数个数字中较大的值

Math.min():返回数个数字中较小的值

Math.pow():返回底数的指定次幂

Math.sqrt():返回数字的平方根

Math.random():返回0和1之间的伪随机数

请给出异步加载js的方案,不少于两种

<script src="load.js" async="async"></script>
<script src="load.js" defer="defer"></script>

请用正则表达式写出获取某二级域名的方法

http://(w+).ejym.com/

有一个长度为100的数组,求前20个元素之和

r = arr.slice(0,20).reduce(function(x,y){
    return x+y;
});
alert(r);

split()和join()的区别

split()是把字符串切割成数组的形式, join()是将数组转换成字符串

数组删除第一个,返回的是什么?数组的删除和插入分别有哪些?

shift()方法:把数组的第一个元素删除,并返回第一个元素的值 ,把数组长度减 1;如果数组为空则返回undefined

splice() :从数组中添加/删除项目,然后返回被删除的项目

pop() 方法:用于删除并返回数组的最后一个(删除元素)元素,把数组长度减 1,如果数组为空则返回undefined

slice() 方法:可从已有的数组中返回选定的元素。slice(开始截取位置,结束截取位置)

请写出不少于2种jquery绑定事件方法

jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off

  1. bind(type,[data],function(eventObject))

bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”,点击它是没有反应的,必须再bind一次才行。要想不这么麻烦,我们可以使用live

  1. live(type, [data], fn)

live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。这个context是什么东西呢?其实就是元素的限定范围。即live是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了元素的限定范围。在监听函数中,我们可以用event.currentTarget来获取到当前捕捉到事件的节点。使用事件委托,新添加的元素不必再绑定一次监听器。因为将监听器绑定到了document上,所以事件处理得等待层层冒泡,直到冒泡到根节点才开始处理,在DOM树较深或者节点的嵌套关系很复杂时,会有意想不到的结果,根节点的负担太重了。为此,jQuery官方已宣布在1.7版本开始废弃live,改用其他方式代替。正因为live存在那样的缺点,所以我们就思考,既然老爷子负担那么重,可不可以别把监听器绑定在document上呢,绑定在就近的父级元素上不就好了。顺应正常逻辑,delegate诞生了。

  1. delegate(selector,type,[data],fn)

参数多了一个selector,用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上。

eg: $('#myol').delegate('li','click',getHtml);

我们在例子中将监听器绑定到ol上,event.currentTarget显示当前捕获到事件的元素是ol。这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。对于如何选择委托对象,还是需要一定的策略的,毕竟父级元素可以有很多。我觉得原则应该是选择最近的“稳定”元素,选择最近是因为事件可以更快的冒泡上去,能够在第一时间进行处理。所谓“稳定”是指该父级元素是一开始就在页面上的,不是动态添加上来的,而且将来也不会消失掉,这样保证它可以时时监控着自己的孩子

  1. on(type,[selector],[data],fn)

参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。

eg: $('#myol li').on('click',getHtml);

可以看到event.currentTarget是li自己,与bind的效果一样。至于传selector进去,就是跟delegate一样的意义了,除了参数顺序不同,其他完全一样。那么,这么多的事件绑定方式,我们该如何进行选择呢?官方有一个推荐就是尽量使用on,因为其他方法都是内部调用on来完成的,直接使用on可以提高效率,而且你完全可以用on来代替其他三种写法;对于只需要触发一次的,随后就要立即解除绑定的情况,用one()

如何优化页面的加载速度

1、服务器响应时间:有独立的服务器,提高Web服务器的质量,移除不必要的插件

2、浏览器缓存:减少HTTP请求,从而提高网站加载速度

3、gzip压缩:它的工作原理是在发送HTML和CSS文件到浏览器之前压缩文件大小

4、异步脚本:网页负载就不必依赖于这些异步脚本

5、内容分发网络(CDN):CDN是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。有网站访问者请求文件和网页时就可以直接从就近网站服务器发送过来(也可以是从负载最小的服务器)

6、优化JavaScript、HTML和CSS:删除所有不必要的空格和注释从而减小文件大小

7、置于顶部的样式表和底部的脚本

8、避免阻塞型的JavaScript和CSS

9、JavaScript的延迟解析

10、启用Keep Alive:用户请求网页时浏览器首先需访问HTML文件,然后它才读取这些文件,并请求与其他资料相关联。如果“Keep Alive”选项被禁止,下载网站的进程就会增加从而拖累网站速度。启用KeepAlive的另一个好处是,可以减少CPU使用

11、图像和文件格式:建议使用JPEG格式,而不是GIF和PNG图像,除非图像包含Alpha因子或者是透明的

12、优化代码:不使用内联CSS

13、文件分离:可以增加并行下载的数量

14、尽量减少HTTP请求:减少网站上的对象数量;最小化网站上的重定向数量;使用CSS Sprites技术;结合JavaScripts和CSS

15、去掉不必要的插件

16、减少DNS查询(DNS lookups)

cookie和sessionStorage以及localStorage的区别是什么?

特性 Cookie localStorage sessionStorage
数据的生命期 一般由服务器生成,可设置失效时间;如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器被清除
存放数据大小 4K左右 一般为5MB 一般为5MB
与服务器端通信 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 需要程序员自己封装,原生的Cookie接口不友好 原生接口可以接受,亦可再次封装来对Object和Array有更好的支持 原生接口可以接受,亦可再次封装来对Object和Array有更好的支持

有哪些性能优化的方法

第一:面向内容的优化

  1. 减少HTTP请求:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存,图片服务器
  2. 减少 DNS 查找
  3. 避免重定向
  4. 使用 Ajax 缓存
  5. 延迟载入组件
  6. 预先载入组件
  7. 减少DOM元素数量:用innerHTML代替DOM操作,减少DOM操作次数,优化jS性能
  8. 切分组件到多个域
  9. 最小化 iframe 的数量
  10. 不要出现http 404 错误

第二:面向 Server

  1. 缩小 Cookie
  2. 针对 Web 组件使用域名无关性的

一个页面从输入url到加载完成的过程都发生了什么,请详细说明

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址

4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手

5、握手成功后,浏览器向服务器发送http请求,请求数据包

6、服务器处理收到的请求,将数据返回至浏览器

7、浏览器收到HTTP响应

8、浏览器解析渲染页面:解析html源码;生成Dom树、解析css样式、js交互

用正则验证身份号码

//身份证正则表达式(15位)

isIDCard1=/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/;

//身份证正则表达式(18位)

isIDCard2=/^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{4}$/;

身份证正则合并:(^d{15}$)|(^\d{17}([0-9]|X)$)

请用任意方法随机生成100-300的整数

$(function() {  
    var x = 300;     
    var y = 100;     
    var rand = parseInt(Math.random() * (x - y + 1) + y);     
   console.log(rand);   
})  

对数组[1,6,3,3,1,9,5,1,8]进行去重

$(function() {  
    var arr = [1,6,3,3,1,9,5,1,8];
    for(var i=0; i<arr.length; i++){
        for(var j = i+1; j<=arr.length; j++){
            if(arr[j] == arr[i]){                
                arr.splice(j,1)
            }
        }
    }
    console.log(arr)   
}) 

谈谈你对弹性盒子和box-sizing的理解,用纯css如何实现元素的垂直居中

盒子模型分为:标准盒模型+IE盒模型。标准w3c盒子模型的范围包括margin、border、padding、content,且content不包含其他部分。 ie盒子模型也包括margin、border、padding、content,但ie 盒子模型的content包含了border和pading

box-sizing属性是CSS3中引入的,它可以指定用width属性与height属性分别指定的宽度值与高度值是否包含元素内部的补白区域,以及边框的宽度与高度。

box-sizing的三个属性值: content-box在宽度和高度之外绘制元素的内边距和边框,border-box为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,inherit规定应从父元素继承box-sizing属性的值;box-sizing属性允许以特定的方式定义匹配某个区域的特定元素;通过flex实现弹性盒子居中

rem布局的原理是什么

rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了

优点:理想状态是所有屏幕的高宽比和最初的设计高宽比一样,或者相差不多,完美适应

缺点:碰到重视高度的设计,或者重视元素间间距的设计,那就玩不开了

以下代码运行的结果是什么, 如果希望看到控制台每隔一秒连续输出 1 - 9, 应该如何修改代码

for (var i = 1; i < 10; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000)
}

10个10

正确代码:

for (var i = 1; i < 10; i++) {
    (function(i){
        setTimeout(function() {
            console.log(i);
        }, 1000)
    })(i)    
}

实现一个js方法,将下面的数据根据年龄(age)从小到大排序

var data = [{"name":"张三","age":"23岁"},{"name":"李四","age":"21岁"},{"name":"王五","age":"33岁"}];

var data = [{"name":"张三","age":"23岁"},{"name":"李四","age":"21岁"},{"name":"王五","age":"33岁"}];
function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        if(value1 > value2){
        return 1;
        }else if(value1 < value2){
        return -1;
        }else{
        return 0;
    };
    }
}
console.log(data.sort(compare("age")))

请使用原生代码实现,针对IE6、7浏览器访问的时候跳转到提示升级的页面

if (document.documentMode < 10){ 
    window.location="error.html";
}

js中dom和bom

1.dom是文档对象模型(Document Object Model)的简称。DOM把整个页面规划成由节点层级构成的文档,所谓文档对象模型其实就是对网页HTML中的各种元素的一种内部的表示,用DOM方法和属性你可以访问,修改,删除,添加页面元素

2.BOM是browser object model的缩写,简称浏览器对象模型。BOM提供了独立于内容而与浏览器窗口进行交互的对象。由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window。BOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3C。BOM最初是Netscape浏览器标准的一部分

js的节点是什么意思

根据w3c的标准,html中文档的所有内容都是节点,整个文档是一个文档节点,每个html元素都是元素节点,html元素中的文本是文本节点,每个html属性都是属性节点,注释是注释节点

Jquery是什么?

jQuery是一个快速、简洁的js框架,jQuery倡导写更少的代码做更多的事情,它封装js常用的功能代码,提供一种简便的js设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互,jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件

ajax是什么

AJAX是一种用于创建快速动态网页的技术,AJAX即“Asynchronous Javascript And XML”(异步js和XML)是指一种创建交互式网页应用的网页开发技术, AJAX = 异步 JavaScript和XML(标准通用标记语言的子集),通过在后台与服务器进行少量数据交换AJAX可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下对网页的某部分进行更新,传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面

Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

1.声明位于文档中的最前面,处于标签之前,告知浏览器的解析器用什么文档类型规范来解析这个文档

2.严格模式的排版和js运作模式是以浏览器支持的最高标准运行;在混杂模式中,页面以宽松的向后兼容方式显示,模拟老式浏览器的行为以防止站点无法工作

3.doctype不存在或格式不正确会导致文档以混杂模式呈现

行内元素有哪些,块级元素有哪些?

行内元素:a b span img input select strong i

块级元素:div ul li ol table p dl dt dd h1-h5 from

css盒模型:border margin padding

常见空元素:br hr img input link meta

link和@import的区别

1.link属于xhtml标签,除了加载css外还能用于定义rss,定义rel连接属性等作用,而@import是css提供的,只能用于加载css

2.页面被加载时link会同时被加载,而@import引用的css会等到页面被加载完再加载

3.import只在ie5以上才能识别,而link是xhtml标签,无兼容性

4.link方式的样式权重高于@import的权重

浏览器内核分别是什么

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等

Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

html5有哪些新特性,如何处理html5新标签的浏览器兼容问题,如何区分html和html5?

1.h5不基于SGML,主要是关于图像、位置、存储、多任务等功能的增加;canvas、video、audio、本地离线存储:localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除;语义化更好的内容元素:article/footer/header/nav/section;表单控件:calendar date、time、email、search;新的技术:webworker、websocket、geolocation
因此不需要对dtd进行引用,但是需要doctype来规范浏览器的行为,而html基于sgml,所以需要对dtd进行引用,才能告知浏览器文档使用的文档类型

2.ie8/7/6支持通过document.createElement方法产生的标签,可以利用这一特性让浏览器支持h5新标签,浏览器支持新标签后还需要添加标签默认的样式,当然也可以使用成熟的框架例

3.如何区分h5和html:doctype声明、新增的结构元素/功能元素

对web标准以及w3c的理解和认识

标签闭合,标签小写,不乱嵌套,提高机器人搜索几率,使用外链css和js脚本,结构行为表现的分离,文件下载与页面速度更快,内容能被更多的用户访问,内容能被更广泛的设备所访问,更少的代码和组件,容易维护改版方便,不需要变动页面内容,提高网站易用性;语义化的html即直观的认识标签,对搜索引擎的抓取有好处

xhtml和html有什么区别

html是一种基本的web网页设计语言,xhtml是一个基于xml的置标语言;最主要的不同:xhtml元素必须被正确嵌套、必须关闭、标签必须小写、文档必须拥有根元素

css引入方式有哪些?CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?css的基本语句构成

1.css引入方式:内链 导入 外链

2.css选择符:id>class>标签

3.内联和important中important优先级高

4.选择器{属性1:值1;属性2:值2;....}

前端页面有哪三层,分别是什么,作用是什么

结构层:html;表示层:css;行为层:js

写出几种ie6bug的解决方法:

1.双边距bug:float引起的用display

2.3像素问题:float引起的用display:inline -3px

3.超链接hover点击后失效:使用正确的书写顺序 link visted hover active

4.ie z-index问题:给父元素添加position:relative

5.png透明:使用js代码修改

6.Min-height:最小高度,!important解决

7.select在ie6下遮盖:使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用overflow:hidden,zoom:0.08 line-height:1px)

描述css reset的作用和用途?解释css sprites,如何使用

1.reset重置浏览器的css默认属性,浏览器的品种不同样式不同,然后重置让他们统一

2.css精灵把一堆小图片整合到一张大图片上,减轻服务器对图片的请求数量

清除浮动的几种方式各自的优缺点

1.父级div定义height:父级div手动定义height,就解决了父级div无法自动获取到高度的问题;优点:简单,代码少,容易掌握;缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题;建议:不推荐使用,只建议高度固定的布局时使用

2.结尾处加空div标签clear:both:添加一个空div,利用css的clear:both清除浮动,让父级div能自动获取到高度;优点:简单,代码少,浏览器支持好,不容易出现怪问题;缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不爽;建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法

3.父级div定义伪类:after和zoom:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题;优点:浏览器支持好,不容易出现怪问题,目前大型网站都有使用;缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持;建议:推荐使用,建议定义公共类,以减少CSS代码

4.父级div定义overflow:hidden:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度;优点:简单,代码少,浏览器支持好;缺点:不能和position配合使用,因为超出的尺寸的会被隐藏;建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用

5.父级div定义overflow:auto:必须定义width或zoom:1,同时不能定义height,使用overflow:auto时,浏览器会自动检查浮动区域的高度;优点:简单,代码少,浏览器支持好;缺点:内部宽高超过父级div时,会出现滚动条。;建议:不推荐使用,如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧

6.父级div也一起浮动:所有代码一起浮动,就变成了一个整体;优点:没有优点;;缺点:会产生新的浮动问题;建议:不推荐使用,只作了解

7.父级div定义display:table:将div属性变成表格;优点:没有优点;缺点:会产生新的未知问题;建议:不推荐使用,只作了解

8.结尾处加br标签clear:both:父级div定义zoom:1来解决IE浮动问题,结尾处加br标签clear:both;建议:不推荐使用,只作了解

js的typeof返回哪些数据类型?例举3种强制类型转换和2种隐式类型转换?

1.undefined、number、string、boolean、object:

2.强制:parseInt parseFloat number;隐式:== - ===

添加 删除 替换 插入到某个节点的方法

obj.appendChild();
obj.removeChild();
obj.replaceChild();
obj.innersetBefore()

事件绑定和普通事件的区别?IE和DOM事件流的区别?IE和标准下有哪些兼容性的写法

1.普通事件指的是可以用来注册的事件;事件绑定是指把事件注册到具体的元素之上。

普通事件:给同一个元素绑定了多次相同类型的事件,后面的绑定会覆盖前面的;addEventListener:给同一个元素绑定多次相同类型的事件,所有绑定将会依次触发

2.IE采用冒泡型事件,Netscape使用捕获型事件,DOM使用先捕获后冒泡型事件

eg:冒泡型事件模型: button->div->body (IE事件流)

捕获型事件模型: body->div->button (Netscape事件流)

DOM事件模型: body->div->button->button->div->body (先捕获后冒泡)

3.

1) 脚本差异:
事件绑定:addEventListener与attachEvent事件处理函数中this指向不同,IE中指向window

获取事件对象 :事件处理函数 window.event

获取触发事件的DOM元素:target srcElement

阻止默认行为: e.preventDefault() e.returnValue= false

阻止冒泡:e.stopPropagation() e.cancelBubble = true;

获取样式信息:getComputedStyle(obj,null).width currentStyle.width

实例化XHR对象 new XMLHttpRequest() newActiveXObject()

获取dom元素: parentNode parentElement

2) css差异

盒模型:e.offsetX e.pageX e.x

3) window.event对象差异:IE有window.event对象;FF没有window.event对象,可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)获取鼠标当前坐标:IE是event.x和event.y;FF是event.pageX和event.pageY。两者都有event.clientX和event.clientY属性。鼠标当前坐标(加上滚动条滚过的距离) :IE是event.offsetX和event.offsetY;FF是event.layerX和event.layerY。 标签的x和y的坐标位置:style.posLeft 和 style.posTop。IE:有;FF:没有,
通用:object.offsetLeft 和 object.offsetTop。获取窗体的高度和宽度:IE是document.body.offsetWidth和document.body.offsetHeight。注意:此时页面一定要有body标签。FF是window.innerWidth和window.innerHegiht,以及document.documentElement.clientWidth和document.documentElement.clientHeight。 通用:document.body.clientWidth和document.body.clientHeight。

ajax请求的时候get和post的区别?ajax请求时如何解释json数据

1.一个参数跟在url后面一个参数放在虚拟载体里面;有大小限制,安全问题,应用不同:一个是论坛等只需要请求的,一个类似修改密码的

2.eval和parse,鉴于安全性使用parse更靠谱

b继承a的方法,事件委托是什么?如何阻止事件冒泡和默认事件?写一个获取非行间样式的函数

闭包是什么,有什么特性,对页面有什么影响?解释jsonp的原理,以及为什么不是真正的ajax

  1. 闭包就是能够读取其他函数内部变量的函数。由于javascript中,只有函数内部的子函数才能读取局部变量,所以,闭包可以简单理解成“定义在一个函数内部的函数“。在本质上,闭包是将函数内部和函数外部连接起来的桥梁
  2. JSON是一种轻量级的数据传输格式,核心是通过XmlHttpRequest获取非本页内容。而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议,核心是动态添加

JSONP就是用来解决跨域请求问题的;ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的js代码,在src中进行了调用,这样实现了跨域

js的本地对象、内置对象和宿主对象?

一般宿主环境由外壳程序创建与维护,只要能提供js引擎执行的环境都可称之为外壳程序。如:web浏览器,一些桌面应用系统等。即由web浏览器或桌面应用系统造就的环境即宿主环境
ECMA-262 把本地对象(native object)定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。

“本地对象”包含哪些内容:Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。由此可以看出,简单来说,本地对象就是 ECMA-262 定义的类(引用类型)。

ECMA-262 把内置对象(built-in object)定义为“由 ECMAScript 实现提供的、独立于宿主环境的所有对象,在 ECMAScript 程序开始执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例化了。ECMA-262 只定义了两个内置对象,即 Global 和 Math (它们也是本地对象,根据定义,每个内置对象都是本地对象)

宿主对象:由ECMAScript实现的宿主环境提供的对象,可以理解为:浏览器提供的对象。所有的BOM和DOM都是宿主对象

自定义对象:顾名思义,就是开发人员自己定义的对象,javascript允许使用自定义对象,使javascript得到扩充

document load和document ready的区别?“==”与“===”的不同

1.document load是js的方法,是在结构和样式加载完之后才执行;document ready在原生中没有这个方法,jquery中有$().ready(function),是在结构加在完后即执行

2.“==”只要数值相同类型不必相同,“===”类型和数值都要相同

用js实现千位分隔符?(提示:正则+replace)

str = 12345678;
newStr = str.split("").reverse().join("").replace(/([0-9]{3})/g,"$1,").split("").reverse().join("");
相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
3月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
2月前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题,java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中,分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效,业界提出了多种解决方案,其中雪花算法(Snowflake Algorithm)是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法,并提供Java代码示例。
92 2
|
4月前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
58 2
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
46 0
|
4月前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
4月前
|
存储 JavaScript 前端开发
下一篇
DataWorks