Web前端面试题（二）

最新推荐文章于 2025-09-04 18:55:33 发布

weixin_34301307

最新推荐文章于 2025-09-04 18:55:33 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/xiaoan0705/p/8610865.html

1::before 和:before有什么区别？

相同点

1. 都可以用来表示伪类对象，用来设置对象前的内容
2. :befor和::before写法是等效的

不同点

1. :before是Css2的写法，::before是Css3的写法
2. :before的兼容性要比::before好，不过在H5开发中建议使用::before比较好

2.如何居中一个元素（正常、绝对定位、浮动元素）?

（一）元素水平居中的方式

1）行级元素水平居中对齐（父元素设置 text-align:center）

2) 块级元素水平居中对齐（margin: 0 auto）

3）浮动元素水平居中

4）让绝对定位的元素水平居中对齐

.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/ }

经验分享：水平居中的主要属性有

1. text-alin:center;

2. margin:0 auto

3. position:relative|absolute; left:50%;

（二）元素垂直居中对齐

1）对行级元素垂直居中（heiht与line-height的值一样）

2）对块级元素垂直居中对齐

　　2.1 父元素高度固定的情况

　　 1）父元素的height与line-height值相同

　　2）需要垂直居中的元素

　　vertical-align:middle;// 垂直居中对齐

　　display:inline|inline-block 块级元素转行级元素

2.2 父元素高度不固定的情况

　　父元素的padding-top和padding-bottom一样

3、用纯CSS创建一个三角形的原理是什么？

1.采用的是均分原理

盒子都是一个矩形或正方形，从形状的中心，向4个角上下左右划分4个部分

2.代码的实现

第一步保证元素是块级元素

第二步设置元素的边框

第三步不需要显示的边框使用透明色 transparent属性

.square1{
   width:0;
        height:0;
        margin:0 auto;
        border:6px solid transparent;
        border-top: 6px solid red;
        border-bottom: 6px solid blue;
   }

效果图

5、用js实现千位分隔符，怎么实现?

正则表达式

function divide(num){
       num=num+'';
    var reg=/\d{1,3}(?=(\d{3})+$)/;
    return num.replace(reg,'$&,');
}

6、事件是什么？如何阻止事件冒泡？

用于监听浏览器的操作行为，浏览器触发动作时被捕捉到而调用相应的函数。

阻止事件冒泡：event.StopPropagation();

7、JSON 格式是什么？你了解吗？

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

8、同步和异步有什么区别？

同步，我的理解是一种线性执行的方式，执行的流程不能跨越。一般用于流程性比较强的程序，我们做的用户登录功能也是同步处理的，必须用户通过用户名和密码验证后才能进入系统的操作。

异步，是一种并行处理的方式，不必等待一个程序执行完，可以执行其它的任务。在程序中异步处理的结果通常使用回调函数来处理结果。在JavaScript中实现异步的方式主要有Ajax和H5新增的Web Worker。

9、谈谈你对模块化开发的理解？

所谓的模块化开发就是封装细节，提供使用接口，彼此之间互不影响，每个模块都是实现某一特定的功能。模块化开发的基础就是函数

10、new操作符具体干了什么呢?

var Func=function(){ };

var f=new Func ();

new共经过了4几个阶段：

1：创建一个空对象 var obj=new Object();

2：设置原型链，让空对象的__proto__指向函数的原型prototype。 obj.__proto__= Func.prototype;

3：让Func()中的this指向空对象obj，并执行Func(）的函数体；var result =Func.call(obj);

4：判断Func(）的返回值类型

　　如果是值类型，返回obj。如果是引用类型，就返回这个引用类型的对象。

　　使用new来创建对象时，如果return的是非对象（数字、字符串、布尔类型、null等）或没有返回值时会忽略该返回值，返回的是新创建的对象；如果return的是对象，则返回该对象。

（1）返回的是非对象
function Person(name){
    this.name=name;
    return name;
}
var p=new Person('tom');
console.log(p);//Person {name: "tom"}
（2）返回的是对象
function Person(name){
    this.name=name;
    return {'name1':name};
}
var p=new Person('tom');
console.log(p);//{name1: "tom"}

11、js在页面中的加载顺序以及延迟加载的方式有哪些？

当浏览器遇到（内嵌）<script>时，当前浏览器无从获知javascript是否会修改页面内容，这是浏览器会停止处理页面，先执行该javascript代码，然后再继续解析和渲染页面。同样的情况也发生在使用src属性加载外链javascript的过程中，浏览器必须先花时间下载外链文件的代码，然后解析并执行他，在这个过程中，页面渲染和用户交互完全被阻塞了。

　script标签存在两个属性，defer和async：

　　　没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载；

　　（1）async

　　有了async属性，表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的，即异步执行；不能保证脚本会按顺序执行

　　（2）defer 延迟脚本

有了defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的，js脚本会被延迟到整个页面都解析完毕后再运行，DOMContentLoaded事件触发执行之前。

在<script> 元素中设置 defer 属性，等于告诉浏览器立即下载，但延迟执行。包含的脚本将延迟浏览器遇到</html>标签后再执行。

（3）动态创建dom　

//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.js";  
       document.body.appendChild(element);  
   }  
   if (window.addEventListener)  
      window.addEventListener("load",downloadJSAtOnload, false);  
   else if (window.attachEvent)  
      window.attachEvent("onload",downloadJSAtOnload);  
   else
      window.onload =downloadJSAtOnload;  
</script>