前端面试题

    HTML·CSS·Javascript

CSS部分

说明: 按照难易程度 见到到困难依次为 1-5, 答案仅供参考。

1. 如何清除浮动 1

答案:

  • 父元素定义 overflow:hidden;
  • 使用 :after 伪类或新增一个div 设置 content 及 clear:both

2. margin-bottom 对默认样式的span 是否起作用,为什么? 3

答案: margin在竖直方向上 等对inline元素不起作用,因为inline元素默认没有宽高属性。

3. padding-left 对默认的span 元素是否起作用, padding-bottom呢? 3

答案: padding-left 有效, 而 padding-bottom 无效,因为inline元素没有宽高属性。

4. 简单解释一下 font-size: 10rem 中 rem 的作用/好处? 3

参考答案: 可以根据root元素大小来 自适应 改变字体大小。方便全站统一调整尺寸。

5. 使用css选择器选择 被选中的 checkbox 类型的按钮 3

答案: [type=checkbox]:checked

6. 使用伪类,编写一个样式,实现每行4个li元素中的最后一个元素右外边距为0 2

答案: li:nth-child(4n+4){margin-right:0;}

7. display 和 visibility的区别 2

display: none 相当于 remove dom. 而 visibility: hidden 相当于 hide dom.

8. 了解哪些浏览器内核? 2

参考答案: IE 火狐(Gecko) webkit opera(Presto)

9. title 与 alt 的应用场景 2

参考答案: title 一般用于提示超链接等, alt用户图片,且为标准设计中的必填属性

10. 如何理解html标签语义化 3

11. CSS的几种标签选择器的优先级是如何排列的 2

important 行内 id class tagName

12. 相邻选择器如何表示? 3

  • 或 ~

13。 子选择器如何表示? 2

大于号或空格

14. 垂直居中的方法? 3

参考答案:

15. 了解哪些前端框架 2

参考答案:bootstrap easyUI jquery angular vue react 等

16. IE8 的hack 怎么写 2

参考 color: #66ffcc\9;

17. absolute 定位的元素 是相对于什么元素进行定位 2

参考答案: 所有的父元素中最近的 非static定位的元素

18. 设置为 visibility: hidden的 img 标签元素,会触发http请求吗? 2

答案: 会。

19. 左右结构的网页布局中,左侧为侧边栏,右侧为正文,如何才能先显示出正文,再显示出侧边栏? 3

答案: 在html结构中,先写正文部分,再写侧边栏部分,通过css控制样式即可。因为html结构是自上而下渲染的。

20. 使用字体图标的优点。2

参考答案:

  • ① 可以自定义图标颜色;
  • ② 自定义图标尺寸;
  • ③ 减少图片带来的http请求
  • ④ 兼容性好(png24在低版本IE中出现灰色背景)

21. cookies locaStorage sessionStorage 区别 2

参考答案:

  • 相同点: 都可以用来存储浏览器客户的数据;
  • 不同点: cookies 可以用来保存的数据长度有限。 sessionStorage 保存的数据在会话结束后自动清除。localStorage则不会

    22. script标签通常都放在html页面的什么位置最佳。 2

    答案: body之前

23. box-sizing: border-box 属性是什么意思? 2

答案: 计算dom宽高的时候将border和padding一并计算为 宽和高。

24. transform: translateX(-10px) 的作用是什么? 2

答案: 将元素沿X轴,移动 -10px

25. display: flex 是什么意思? 3

答案: 元素内的元素将以flex的布局方式排列。

JS 部分

1. var foo = 10 + ‘20’; 输出结果 2

答案: 1020

2. window.document === document 输出结果 2

答案: true

3. js 获取元素的方法有哪些? 3

答案:
getElementById getElementsByClassName getElementsByTagName querySelector querySelectorAll

4. 题3中,最快的是哪一种? 2

答案 : getElementById

5. 如何获取整个页面的文本内容(不包含任何标签的文本) 2

答案: document.body.innerText;

6. async 关键字用于script标签时,如果是内嵌的js,能否生效? 3

答案: 不能。 async 只对外链的js生效。

7. 简述一下事件冒泡过程。 4

答案: 例如 table>tr>td中点击td,将依次触发 td tr table body document的点击事件。

8. 编写给一个元素添加 类名的函数。 3

参考答案:

1
2
3
4
5
6
function addClass(selector, className){
var elm = document.querySelector(selector);
if (elm){
elm.classList.add(className);
}
}

9. 简述 null 和 undefined 的区别。 4

答案: undefined 意味着变量没有被定义。以下情形会返回undefined

  • 已定义但是未赋值的变量
  • 没有任何返回值的函数或者片段
  • 在对象中查找不存在的属性
  • 是一个全局变量
    null
    空的或者不存在的值。
    null == undefined

10. == 和 === 的区别 2

答案: === 除了对比值是否相等,还要对比类型是否相等,只有全部相等才会成立。

11. 举例说明 split 的用法 2

参考:
var a = ‘1,2,3,5’;
console.log(a.split(‘,’));

12. jQuery常用的一些优化性能的写法举例 3

参考:

  • 缓存dom元素。 例如 var $dom = $(‘#parent-selector’);
  • 使用for 循环 代替 for in 遍历数组。因为for in 遍历包含元素自身的属性。
  • 尽量使用id查询
  • classed前面使用tags
  • 链式写法
  • 减少dom的操作。 例如,循环中先生成html,最后再操作dom

13. 下面的代码片段输出结果是什么? 3

1
2
3
4
5
6
7
var foo = "Hello";
(function() {
var bar = " World";
alert(foo + bar);
})();
alert(foo + bar);
答案: Hello world !

14. 下面代码运行结束后,foo.length 的结果是什么? 2

1
2
3
4
var foo = [];
foo.push(1);
foo.push(2);
答案: 2

15. 下面代码运行结束后, foo.x 的结果是什么? 3

1
2
3
4
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
答案: undefined

16. 什么是重绘 repaint 3

答案: 元素外观改变,大小不变。

17. 什么事渲染 reflow 3

答案:元素大小改变或增减元素。

18. 重绘和渲染的区别 是什么? 3

渲染开销较大,位于其后的所有元素都将重新渲染。 而重绘,只是修改了外观,开销相对较小。尤其是移动端。

19. http 请求返回的状态码中 200, 500 ,404 分别代表什么含义? 2

答案: 200 请求成功。 500 服务器内部错误, 404 找不到页面。

20. 前端开发中减少 http 请求的方法有哪些? 3

答案:

  • 合并js css
  • 使用雪碧图
  • 使用字体图标

21. 用过的前端构建工具有哪些,构建工具的好处是什么? 3

参考答案: 例如, grunt gulp webpack 等。 好处是 可以提升前端开发的效率,使前端开发流程更加规范化。

22. 用过什么 MVVM框架,简述一下MVVM框架 解决了什么问题? 4

参考答案: Angular/Vue/React 解决了,修改modal层的数据后,更新view层的麻烦,以及使VIEW层逻辑更加清晰且易于维护。

23. let 与 const 区别 3

let 类似于var 只作用于所在的代码块,相当于局部变量;
const 声明一个不可修改的常量。

24. 正则表达式中 /ig 代表的含义是什么? 3

答案: i 代表 ignore 忽略大小写, g 代表globa 全局匹配

25. 以下表达式输出什么? 4

1
2
3
4
5
6
function C(a){
if(a){
this.a = a;
}
}
console.log(new C(2).a);

答案: 2

页阅读量:  ・  站访问量:  ・  站访客数: