2019校招前端笔试面试题

01你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

答案

IE: trident内核

Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

02Javascript中的定时器有哪些?

答案

1.setTimeout 只执行一次 

2.setInterval 会一直重复执行  

03img的alt与title有何异同? strong与em的异同?

答案

a:alt(alt text):为不能显示图像、窗体或applets的用户代理(UA),alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签,强调,表示内容的重要性

em:斜体强调标签,更强烈强调,表示内容的强调点

04一个200*200的div在不同分辨率屏幕上下左右居中,用css实现 

答案

<style>
   /*一个200*200的div在不同分辨率屏幕上下左右居中,用css实现*/
   div
   {
       background: red;
       position:absolute;
       width:200px;
       height:200px;
       top:50%;
       left:50%;
       margin-left:-50px;
       height:-50px;
       z-index:1000;
   }
</style>

05为什么利用多个域名来存储网站资源会更有效?

答案

  1. CDN缓存更方便;

    2.突破浏览器并发限制;
    3.节约cookie带宽;
    4.节约主域名的连接数,优化页面响应速度;
    5.防止不必要的安全问题。

06写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式的相关代码:

答案

HTML代码:

CSS代码:


07请描述

08有哪项方式可以对一个DOM设置它的CSS样式?

答案

1.外部样式表,引入一个外部css文件
2.内部样式表,将css代码放在 <head> 标签内部
3.内联样式,将css样式直接定义在 HTML 元素内部

09CSS的盒子模型?

答案

(1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。

10html语义化是什么?

答案

当页面样式加载失败的时候能够让页面呈现出清晰的结构;
有利于seo优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别);
便于项目的开发及维护,使html代码更具有可读性,便于其他设备解析。

11$(document).ready()方法和window.onload有什么区别? 

答案

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。  

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

答案

1.结构层 Html 

2.表示层 CSS 

3.行为层 js

13css优先级算法如何计算?

答案

!important >  id > class > 标签 
!important 比 内联优先级高
*优先级就近原则,样式定义最近者为准;
*以最后载入的样式为准;

14请写出你对闭包的理解,并列出简单的理解  ?

答案

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

 闭包有三个特性:

 1.函数嵌套函数  

 2.函数内部可以引用外部的参数和变量 

 3.参数和变量不会被垃圾回收机制回收 

15split() 、join() 的区别?

答案

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

16数组方法pop() push() unshift() shift()?

答案

pop()尾部删除

Push()尾部添加 
Unshift()头部添加 
shift()头部删除

17JavaScript的数据类型都有什么?

答案

基本数据类型:String,boolean,Number,Undefined, Null;
引用数据类型:Object(Array,Date,RegExp,Function)。

18对该数组numberArray = [3,9,4,6,1,5]; 实现降序排列?

答案

 实现对该数组的降序排列,输出[9,6,5,4,3,1]?
numberArray.sort(function(a,b){return b-a});

19写一个function,清除字符串前后的空格?(兼容所有浏览器)

答案

20列举浏览器对象模型BOM里常用的至少4个对象,并列举window对象的常用方法至少5个?

答案

对象:window, document, location, screen, history, navigator
方法:alert(), confirm(), prompt(), open(), close()

21闭包是什么,有什么特性,对页面有什么影响?

答案

我的理解是,闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
function outer(){
    var num = 666;
    function inner(){
        var n = 999;
        alert(n + num);
    }
    return inner;
}
outer()();

22什么是javascript 中的垃圾回收机制?

答案

在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。

如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因

23请尽可能详尽的解释ajax的工作原理?

答案

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

相关代码:

<script>
   window.onload = function (ev) {
       var oBtn = document.querySelector("button");
       oBtn.onclick = function (ev1) {
           // 1.创建一个异步对象
           var xmlhttp=new XMLHttpRequest();
           // 2.设置请求方式和请求地址
           /*
           method:请求的类型;GET 或 POST
           url:文件在服务器上的位置
           async:true(异步)或 false(同步)
           */
           xmlhttp.open("GET", "04-ajax-get.php", true);
           // 3.发送请求
           xmlhttp.send();
           // 4.监听状态的变化
           xmlhttp.onreadystatechange = function (ev2) {
               /*
               0: 请求未初始化
               1: 服务器连接已建立
               2: 请求已接收
               3: 请求处理中
               4: 请求已完成,且响应已就绪
               */
               if(xmlhttp.readyState === 4){
                   // 判断是否请求成功
                   if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                       xmlhttp.status === 304){
                       // 5.处理返回的结果
                       console.log("接收到服务器返回的数据");
                   }else{
                       console.log("没有接收到服务器返回的数据");
                   }

               }
           }
       }
   }
</script>

24如何解决跨域问题?

答案

理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域;

出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,这就是解决跨域问题的主流解决方案。

25阐述一下异步加载?

答案

1. 异步加载的方案: 动态插入 script 标签
2. 通过 ajax 去获取 js 代码,然后通过 eval 执行
3. script 标签上添加 defer 或者 async 属性
4. 创建并插入 iframe,让它异步执行 js

26说说你对this的理解?

答案

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。

全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身

27判断一个字符串中出现次数最多的字符,并统计次数?(编程题)

答案

<script>
   var s = 'bbcitcxyllkkjjfffdddsbbbbbb';
   var obj = {};
   var maxn = -1;
   var letter;
   for(var i = 0; i < s.length; i++) {
       if(obj[s[i]]) {
           obj[s[i]]++;
           if(obj[s[i]] > maxn) {
               maxn = obj[s[i]];
               letter = s[i];
           }
       } else {
           obj[s[i]] = 1;
           if(obj[s[i]] > maxn) {
               maxn = obj[s[i]];
               letter = s[i];
           }
       }
   }
   alert(letter + ': ' + maxn);
</script>

面试只是一个开始,未来的路还很长,最后希望即将毕业的你能顺利拿到Offer

技术不需要不断更新,让我们一起探索更多的技术吧

猜你喜欢

转载自blog.csdn.net/FengyCoder/article/details/82841644
今日推荐