web前端开发工程师面试题积累(02)

这都是自己之前在面试过程中,做的笔试题目,千里之行,始于足下。基础最重要,把每次遇到的问题,不管是不会的还是会的,都再学习一遍,温故而知新吧。加油鸭~~~!!!整理不易,记得点赞,亲

选择题

1.关于html和模型,下列说法正确的是?C
A.margin是内边距
B.padding是外边距
C.border是边框
D.border-radius是css3标准,因此IE并不支持border-radius属性

2.在HTML页面上包含如下所示的层对象,则javascript语句
document.getElementById(“info”).innerHTML的值是(B)

 <div id="info" style="display :block"><p>请填写</p></div>
A. 请填写
B. 

请填写< /p> C.id="info" sstyle="display:block" D.

请填写

3.表示有序列表的是 D
A.ul
B.dl
C.li
D.ol

4.如何在CSS中插入注释?C
A.//this is a comment
B.//this is a comment //
C./* this is a comment*/
D.’ this is a comment’

5.浏览器将打开一个新的窗口,应在a标签中使用 C
A.“target=_self”
B.“target=_top”
C.“target=_blank”
D.“target=_parent”

6.在不改变元素的显示属性的情况下,元素都是可以设置宽度的,并且能够设置成功,这句话是否正确?B
A.正确
B.错误

7.对于li这个节点,下列哪个css选择器的优先级最高?D
A. li #app
B. li .cnt
C. li .cnt :hover
D. #app.cnt

8.一下说法,错误的是 A
A.用于显示变粗的文字
B.用于显示删除的文字
C.的文字会带下划线
D.用于强调文本

9.下列说法正确的是 B
A.display:none ;为被隐藏的对象保留其物理空间;
B.visibility:hidden; 所占据的空间位置仍然存在,仅为视觉上的完全透明;
C.visibility:hidden; 产生reflow和repaint(回流与重绘);
D.visibility:hidden; 与display:none;两者没有本质上的区别;

解析:display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
repaint(重绘)
,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background
color,不会影响到dom结构渲染。
reflow(渲染),与repaint区别就是他会影响到dom的结构渲染,同时他会触发repaint,他会改变他本身与所有父辈元素(祖先),这种开销是非常昂贵的,导致性能下降是必然的,页面元素越多效果越明显。
所以display:none才会产生reflow visibility:hidden只会出发repaint

10.以下描述错误的是 A
A.cookie以及localStorage都会伴随着http请求发送到服务器
B.get提交的url会有长度的限制,而post提交的数据则可以比较大
C.在javascript中可以操作cookie
D.javascript在浏览器的执行是单线程的

11.只能输入零和非零开头的数字,正确的正则表达式是 A
A.^(0|[1-9][0-9])$
B.^(0|[1-9][1-9]
)$
C.^(0|[1-9][0-9])$
D.^+[1-9][0-9]*$

12.要在10秒后调用checkState,下列哪个是正确的 B
A.window.setTimeout(checkState,10);
B.window.setTimeout(checkState,10000);
C.window.setTimeout(checkState(),10);
D.window.setTimeout(checkState(),10000);

13.在javascript中,用于阻止默认事件的默认操作的方法是 C
A.stopDeafault()
B.stopPropagation()
C.preventDefault()
D.preventDefaultEven()
E.preventPropagation()

14.以下代码,在浏览器中执行的结果是 C

 var A = {
     n:4399};
 var B = function() {
      this.n = 9999;};
 var C = function(){
      var n = 8888 };
 B.prototype = A;
 C.prototype = A;
 var b = new B();
 var c = new C();

 A.n++;
 console.log(b.n);
 console.log(c.n);

A. 9999 8888
B. 10000 8888
C. 9999 4400
D. 4400 4400

15.以下代码,在浏览器中执行的结果是 B

(function(){
     
  var x = foo();
  var foo = function foo(){
     
      return "foobar"
 };
   return x;
})();

A.foo()
B.类型错误
C.undefined
D.foobar

16.关于javascript,以下选项描述错误的是 C
A.在原型上扩展的可枚举方法,会被for in 循环出来
B.使用Object.defineProperty可向对象添加或者修改属性
C.通过hasOwnProperty可判断一个对象以及其原型链上是否具有指定名称的属性
D.原型链是JS实现继承的一种模型
E.for循环是按顺序的,for in 循环是不一定按顺序的

17.运行结果是 C

 var obj = {
     a:1,b:function(){
     alert(this.a)}}
  var fun = obj.b;
  fun();

A.弹出a
B.弹出1
C.弹出undefined
D.什么也看不到

18.以下语句的执行结果是什么? B

 console.log('one');
 setTimeout(function(){
     console.log('two')},0);
 console.log('three');

A.‘one’,‘two’,‘three’
B.‘one’,‘three’,‘two’
C.‘one’,‘three’
D.‘two’,‘one’,‘three’

19.在jquery中想要实现通过远程http get 请求载入信息功能的下面的哪一下事件?C
A.$.ajax(url)
B.load(url)
C.$.get(url)
D.getScript(url)

20.下面有关浏览器中使用js跨域获取数据的描述,说法错误的是?A
A.域名、端口相同,协议不同,属于相同的域
B.js可以使用jsonp进行跨域
C.通过修改document.domain来跨子域
D.使用window.name来进行跨域

21.以下代码执行的结果是 ( A)

for(var i=0;i<5;++i){
     
      setTimeout(function(){
     
            console.log(i+ ' ');
          },100)
  }

A.5 5 5 5 5
B.0 0 0 0 0
C.0 1 2 3 4
D.1 2 3 4 5

22.以下Js程序的输出是什么 B

<SCRIPT  LANGUAGE="JavaScript">
          var a = "undefined";
          var b = "false";
          var c = "";
          function assert(avar){
     
                  if(avar)
                         alert(true);
                  else
                          alert(false);
             }   
            assert(a);
            assert(b);
            assert(c);
</SCRIPT>

A.true, true, true
B.true,true,false
C.false,false,true
D.false,false,false

23.js数组的方法中,哪些不能改变自身数组?D
A.pop
B.splice
C.sort
D.contat

24.若一棵二叉树具有10个度为2的结点,5个度为1的结点,则度为0的结点个数是 B
A.9
B.11
C.15
D.不确定

24.假设栈S和队列Q的初始状态为空,元素a、b、c、d、e、f依次通过S和Q,既每一个元素必须先进栈,之后再出栈进入队列。若这6个元素出队的顺序是b、d、c、f、e、a,则栈S的容量至少应该为 A
A.3
B.4
C.5
D.6

解析:设栈长度为s,起始为0因为栈后进先出,队列先进先出。又因为元素E1.。E6是顺序入栈,那么分析过程如下:按照出栈过知程分析,因为给定出栈顺序:E2,E4,E3,E6,E5,E1,E2要进栈,所以道E1必须进栈,进栈顺序:E1,E2,所以s为2下面E2出栈,打印出E2,剩余结果为E4,E3,E6,E5,E1,因为E2出栈了,所以当前栈容量为2,但是只是内用了1个,存放E1,下面继续E3进栈,容E4进栈,此时s为3,根据出栈结果,那么E4出栈,E3出栈,此时栈容量为3但是只有E1在栈中,剩余结果为E6,E5,E1,同理,E5进栈,E6进栈,此时栈被填满,容量为3,后E6出栈,E5出栈,E1出栈,栈空,容量为3.所以S的容量至少为3.

填空题

1.产生水平线的HTML标签为



2.为HTML5新增标签,其语义为 突出显示文本
3.为图片添加简要说明文字的属性是 title
4.CSS中float:left 可以通过 overflow:hidden; 来清除。
5.在CSS中, z-index 属性可以用来设置元素的叠放顺序。
6.margin:10px 20px 30px 40px,其中margin-left对应的值为 。
7.ECMAScript中的基本数据类型包括 numberstringbooleannullundefined
8.JavaScript当中的变量,分为 全局变量 、 局部变量 。
9.JavaScript中,50%7 = 1
10.Number(null)= 0
11.Window.location.hash返回 页面的标签值
12.typeof(null) = object
13.想在ECMAScript函数传递参数,但该函数没定义接收参数变量,函数内部可以通过 arguments 对象来访问参数。
14.如何清除window.setInterval()定时器? window.clearInterval()
15.HTTP状态消息中 200 表示请求已成功,请求所希望的响应头或数据体将随此响应返回。
16.

var a=5var b = 3var c=a>b?"张三""李四";
     alert(c);
 c的值为 张三 。

17.通过String对象的 charAt() 方法,可以得到字符串中指定位置处的字符。
18.关于浏览器对象,history对象的父对象是 location对象
19.jQuery中合并数组产生新数组的方法是 $.merge()
20.在javascript中,可以使用Data对象的 getDate 方法返回一个月中的每一天。
21.获取焦点的事件 onfocus 。失去焦点的事件 onblur
22.在HTML页面上,按下键盘上任意一个键时都会出发JavaScript的 onkeydown 事件。
23.JavaScript通过 location.href ="http://www.baidu.com"来实现页面的跳转。
24.请补全以下代码。

  var color = '   Blue     ';
    var obj = {
     
             color:'   	Red    ',
             getColor:function(){
     
                      alert(this.color);
                }
      }
      var getColor = obj.getColor;
      getColor();
      obj.getColor();
  控制台输出:
              Blue
              Red

简答题

1.编写一个数组去重的方法

var arr = [2,3,4,4,5,2,3,6],
   arr2 = [];
for(var i = 0;i< arr.length;i++){
     
    if(arr2.indexOf(arr[i]) < 0){
     
        arr2.push(arr[i]);
    }
}
console.log(arr2);

2.请描述以下cookies,sessionStorage和localStorage的区别?

数据生命周期:
cookie:生成时就会被指定一个maxAge,这就是cookie的生存周期,在这个周期内cookie有效,默认关闭浏览器失效
sessionStorage:页面会话期间可用 localStorage:除非数据被清除,否则一直存在
存放数据大小:cookie:4k左右(因为每次http请求都会携带cookie) sessionStorage:一般5M或者更大
localStorage:一般5M或者更大 与服务器通信:
cookie:由对服务器的请求来传递,每次都会携带在HTTP头中,如果使用cookie保存过多的数据会带来性能问题
sessionStorage、localStorage:数据不是由每个服务器请求传递的,而是只有在请求时使用数据,不参与和服务器的通信
易用性: cookie:cookie需要自己封装setCookie,getCookie
sessionStorage、localStorage:可以用源生接口,也可再次封装来对Object和Array有更好的支持
共同点: 都是保存在浏览器端,和服务器端的session机制不同

3.解释css sprites,如何使用?

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-
repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

4.描述下Ajax的原理?

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。

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

(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表达式)又称Dynamicproperties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。

你可能感兴趣的:(前端面试题大合集,javascript,jquery,css3,html,html5)