前端面试押题整理

HTML 押题

1 (必考) 你是如何理解 HTML 语义化的?

2 第一种举例,段落用 p,边栏用 aside,主要内容用 main 标签

3 第二种 最开始是 PHP 后端写 HTML,不会 CSS,于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。

4 后来有了专门的写 CSS 的前端,他们会使用 DIV + CSS 布局,主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。

5 再后来,前端专业化,知道 HTML 的各个标签的用法,于是会使用恰当的标签来展示内容,而不是傻傻的全用 div,会尽量使用 h1、ul、p、main、header 等标签

6 语义化的好处是已读、有利于SEO等。

7

第三种:对面试官说请看我的博客 https://zhuanlan.zhihu.com/p/32570423

8 meta viewport 是做什么用的,怎么写?

9 死背:

10 控制页面在移动端不要缩小显示。

11 侃侃而谈 一开始,所有页面都是给PC准备的,乔布斯推出 iPhone 3GS,页面是不适应手机屏幕的,所以乔布斯的工程师想了一个办法,默认把手机模拟成 980px,页面缩小。

12 后来,智能手机普及,这个功能在部分网站不需要了,所以我们就用 meta:vp 让手机不要缩小我的网页。

13

14 canvas 元素是干什么的?

15 项目丢给他。

16 看 MDN 的 canvas 入门手册

CSS 押题

1 (必考) 说说盒模型。

* 举例:

* content-box: width == 内容区宽度

* border-box: width == 内容区宽度 + padding 宽度 + border 宽度

2 css reset 和 normalize.css 有什么区别?

* 考英文:

* reset 重置,之前的样式我不要,a{color: red;},抛弃默认样式

* normalize 让所有浏览器的标签都跟标准规定的默认样式一致,各浏览器上的标签默认样式基本统一。

3 (必考)如何居中?

* 平时总结:

* 水平居中:

* 内联:爸爸身上写 text-align:center;

* 块级:margin-left: auto; margin-right: auto;

* 垂直居中: https://jscode.me/t/topic/1936

4 选择器优先级如何确定?

* 选择器越具体,优先级越高。 #xxx 大于 .yyy

* 同样优先级,写在后面的覆盖前面的。

* color: red !important; 优先级最高。

5 BFC 是什么?

* 举例:

* overflow:hidden 清除浮动。(方方总是用 .clearfix 清除浮动,坚决不用 overflow:hidden 清除浮动)

* overflow:hidden 取消父子 margin 合并。 http://jsbin.com/conulod/1/edit?html,css,js,output (方方用 padding-top: 1px;)

6 如何清除浮动?

* overflow: hidden (方方反对)

* .clearfix 清除浮动写在爸爸身上 .clearfix::after{

* content: ‘’; display: block; clear:both;

* }

* .clearfix{

* zoom: 1; /* IE 兼容 /

}

*

JS 押题

1 JS 有哪些数据类型?

2 string number bool undefined null object symbol

3 object 包括了数组、函数、正则、日期等对象

4 一旦出现(数组、函数、正则、日期、NaN)直接0分

5 (必考) Promise 怎么使用?

* then $.ajax(…).then(成功函数, 失败函数)

*

* 链式 then $.ajax(…).then(成功函数, 失败函数).then(成功函数2, 失败函数2)

*

* 如何自己生成 Promise 对象 function xxx(){

* return new Promise(function(resolve, reject){

* setTimeout(()=>{

* resolve() 或者 reject()

* },3000)

* })

* }

* xxx().then(…)

*

6 (必考) AJAX 手写一下? let xhr = new XMLHttpRequest()

7 xhr.open(‘POST’, ‘/xxxx’)

8 xhr.onreadystatechange = function(){

9 if(xhr.readyState === 4 && xhr.status === 200){

10 console.log(xhr.responseText)

11 }

12 }

13 xhr.send(‘a=1&b=2‘)

14

15 (必考)闭包是什么?

function (){

16 var n = 0

17 return function(){

18 n += 1

19 }

20 }

21

22 let adder = ()

23 adder() // n === 1

24 adder() // n === 2

25 console.log(n) // n is not defined

26

正确参考: https://zhuanlan.zhihu.com/p/22486908

27 (必考)这段代码里的 this 是什么?

* fn() 里面的 this 就是 window

* fn() 是 strict mode,this 就是 undefined

* a.b.c.fn() 里面的 this 就是 a.b.c

* new F() 里面的 this 就是新生成的实例

* () => console.log(this) 里面 this 跟外面的 this 的值一模一样

* 正确参考: https://zhuanlan.zhihu.com/p/23804247

28 (必考)什么是立即执行函数?使用立即执行函数的目的是什么?

;(function (){

29 var name

30 }())

31 ;(function (){

32 var name

33 })()

34 !!!!!!!function (){

35 var name

36 }()

37 ~function (){

38 var name

39 }()

40

造出一个函数作用域,防止污染全局变量

ES 6 新语法

{

41 let name

42 }

43

44 async/await 语法了解吗?目的是什么?

function returnPromise(){

45 return new Promise( function(resolve, reject){

46 setTimeout(()=>{

47 resolve(‘fuck‘)

48 },3000)

49 })

50 }

51

52 returnPromise().then((result)=>{

53 result === ‘fuck‘

54 })

55

56 var result = await returnPromise()

57 result === ‘fuck‘

58

59

把异步代码写成同步代码。

60 如何实现深拷贝?

* JSON 来深拷贝 var a = {...}

* var b = JSON.parse( JSON.stringify(a) )

*

缺点:JSON 不支持函数、引用、undefined、RegExp、Date……

* 递归拷贝 function clone(object){

* var object2

* if(! (object instanceof Object) ){

* return object

* }else if(object instanceof Array){

* object2 = []

* }else if(object instanceof Function){

* object2 = eval(object.toString())

* }else if(object instanceof Object){

* object2 = {}

* }

* 你也可以把 Array Function Object 都当做 Object 来看待,参考 https://juejin.im/post/587dab348d6d810058d87a0a

* for(let key in object){

* object2[key] = clone(object[key])

* }

* return object2

* }

*

* 环

* RegExp、Date、Set、Symbol、WeakMap

61 如何实现数组去重?

* 计数排序的逻辑(只能正整数) var a = [4,2,5,6,3,4,5]

* var hashTab = {}

* for(let i=0; i<a.length;i++){

* if(a[i] in hashTab){

* // 什么也不做

* }else{

* hashTab[ a[i] ] = true

* }

* }

* //hashTab: {4: true, 2: true, 5: true, 6:true, 3: true}

* console.log(Object.keys(hashTab)) // [‘4‘,‘2‘,‘5‘,‘6‘,‘3‘]

*

* Set 去重 Array.from(new Set(a))

*

* WeakMap 任意类型去重

62 如何用正则实现 string.trim() ? function trim(string){

63 return string.replace(/^\s+|\s+$/g, ‘‘)

64 }

65

66 JS 原型是什么?

* 举例

* var a = [1,2,3]

* 只有0、1、2、length 4 个key

* 为什么可以 a.push(4) ,push 是哪来的?

* a.proto === Array.prototype

* push 就是沿着 a.proto 找到的,也就是 Array.prototype.push

* Array.prototype 还有很多方法,如 join、pop、slice、splice

* Array.prototype 就是 a 的原型(proto

* 参考: https://zhuanlan.zhihu.com/p/23090041

67 ES 6 中的 class 了解吗?

* 把 MDN class 章节看完

* 记住一个例子

68 JS 如何实现继承?

* 原型链

function Animal(){

* this.body = ‘肉体‘

* }

* Animal.prototype.move = function(){

*

* }

*

* function Human(name){

* Animal.apply(this, arguments)

* this.name = name

* }

* // Human.prototype.__proto__ = Animal.prototype // 非法

*

* var f = function(){}

* f.prototype = Animal.prototype

* Human.prototype = new f()

*

* Human.prototype.useTools = function(){}

*

* var frank = new Human()

*

*

* extends 关键字 class Animal{

* constructor(){

* this.body = ‘肉体‘

* },

* move(){}

* }

* class Human extends Animal{

* constructor(name){

* super()

* this.name = name

* },

* useTools(){}

* }

* var frank = new Human()

*

69 == 相关题目直接反着答(放弃)

DOM 押题

1 DOM 事件模型是什么?

* 冒泡

* 捕获

* 如果这个元素是被点击的元素,那么捕获不一定在冒泡之前,顺序是由监听顺序决定的

2 移动端的触摸事件了解吗?

* touchstart touchmove touchend touchcancel

* 模拟 swipe 事件:记录两次 touchmove 的位置差,如果后一次在前一次的右边,说明向右滑了。

3 事件委托是什么?有什么好处?

* 假设父元素有4个儿子,我不监听4个儿子,而是监听父元素,看触发事件的元素是哪个儿子,这就是事件委托。

* 可以监听还没有出生的儿子(动态生成的元素)。省监听器。

function listen(element, eventType, selector, fn){

* element.addEventListener(eventType, e=>{

* if(e.target.matches(selector)){

* fn.call(el, e, el)

* }

* })

* }// 有 bug 但是可以应付面试官的事件委托

*

function listen(element, eventType, selector, fn) {

* element.addEventListener(eventType, e => {

* let el = e.target

* while (!el.matches(selector)) {

* if (element === el) {

* el = null

* break

* }

* el = el.parentNode

* }

* el && fn.call(el, e, el)

* })

* return element

* } // 工资 12k+ 的前端写的事件委托

* listen(ul, ‘click‘, ‘li‘, ()=>{})

*

* ul>li5>span

HTTP 押题

1 HTTP 状态码知道哪些?

2 301 和 302 的区别是什么?

* 301 永久重定向,浏览器会记住

* 302 临时重定向

3 HTTP 缓存怎么做?

* Cache-Control: max-age=300

* http://cdn.com/1.js?v=1 避开缓存

4 Cache-Control 和 Etag 的区别是什么?

5 Cookie 是什么?Session 是什么?

* Cookie

* HTTP响应通过 Set-Cookie 设置 Cookie

* 浏览器访问指定域名是必须带上 Cookie 作为 Request Header

* Cookie 一般用来记录用户信息

* Session

* Session 是服务器端的内存(数据)

* Session 一般通过在 Cookie 里记录 SessionID 实现

* SessionID 一般是随机数

6 LocalStorage 和 Cookie 的区别是什么?

* Cookie 会随请求被发到服务器上,而 LocalStorage 不会

* Cookie 大小一般4k以下,LocalStorage 一般5Mb 左右

7 (必考)GET 和 POST 的区别是什么?

* 参数。GET 的参数放在 url 的查询参数里,POST 的参数(数据)放在请求消息体里。

* 安全(扯淡)。GET 没有 POST 安全(都不安全)

* GET 的参数(url查询参数)有长度限制,一般是 1024 个字符。POST 的参数(数据)没有长度限制(扯淡,4~10Mb 限制)

* 包。GET 请求只需要发一个包,POST 请求需要发两个以上包(因为 POST 有消息体)(扯淡,GET 也可以用消息体)

* GET 用来读数据,POST 用来写数据,POST 不幂等(幂等的意思就是不管发多少次请求,结果都一样。)

8 (必考)怎么跨域?JSONP 是什么?CORS 是什么?postMessage 是什么?

* JSONP

* CORS

* postMessage 看一下 MDN

Vue 押题

1 (必考)Vue 有哪些生命周期钩子函数?

* 看文档: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

2 (必考)Vue 如何实现组件通信?

* 父子通信(使用 Prop 传递数据、使用 v-on 绑定自定义事件)

* 爷孙通信(通过两对父子通信,爷爸之间父子通信,爸儿之间父子通信)

* 兄弟通信(new Vue() 作为 eventBus)

3 Vuex 的作用是什么?

* 看文档、博客 https://vuex.vuejs.org/zh-cn/intro.html

4 VueRouter 路由是什么?

* 看文档、博客

5 Vue 的双向绑定是如何实现的?有什么缺点?

* 看文档, 深入响应式原理

6 Computed 计算属性的用法?跟 Methods 的区别。

7 https://zhuanlan.zhihu.com/p/33778594

算法押题

1 排序算法(背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序)

2 二分查找法

3 翻转二叉树

把上面三个背一下,算法题必过。

安全押题

1 什么是 XSS 攻击?如何预防?

* 举例 div.innerHTML = userComment // userComment 内容是

* // 恶意就被执行了,这就是 XSS

*

* 预防

* 不要使用 innerHTML,改成 innerText,script 就会被当成文本,不执行

* 如果你一样要用 innerHTML,字符过滤

* 把 < 替换成 <

* 把 > 替换成 >

* 把 & 替换成 &

* 把 ‘ 替换成 ‘

* 把 ‘ 替换成 "

* 代码 div.innerHTML = userComment.replace(/>/g, ‘<’).replace…

* 使用 CSP Content Security Policy

2 什么是 CSRF 攻击?如何预防?

* 过程

* 用户在 qq.com 登录

* 用户切换到 hacker.com(恶意网站)

* hacker.com 发送一个 qq.com/add_friend 请求,让当前用户添加 hacker 为好友。

* 用户在不知不觉中添加 hacker 为好友。

* 用户没有想发这个请求,但是 hacker 伪造了用户发请求的假象。

* 避免

* 检查 referer,qq.com 可以拒绝来自 hacker.com 的请求

* csrf_token 来解决

Webpack 题

1 转译出的文件过大怎么办?

* 使用 code split

* 写法 import(‘xxx’).then(xxx=>{console.log(xxx)})

* xxx 模块就是按需加载的

2 转译速度慢什么办?

3 写过 webpack loader 吗?

* http://www.alloyteam.com/2016/01/webpack-loader-1/

发散题

1 从输入 URL 到页面展现中间发生了什么?

* DNS 查询 DNS 缓存

* 建立 TCP 连接(三次握手)连接复用

* 发送 HTTP 请求(请求的四部分)

* 后台处理请求

* 监听 80 端口

* 路由

* 渲染 HTML 模板

* 生成响应

* 发送 HTTP 响应

* 关闭 TCP 连接(四次挥手)

* 解析 HTML

* 下载 CSS(缓存

* 解析 CSS

* 下载 JS(缓存

* 解析 JS

* 下载图片

* 解析图片

* 渲染 DOM 树

* 渲染样式树

* 执行 JS

2 你没有工作经历吗?

* 一开始就问,可以拜拜。

* 中间问最后问,他想压价。

* 解法:用项目打动它:你看下我的作品,跟一年经验的前端差距大吗?你们团队一年工作经验的前端,写的出来我这样的作品吗?凭我的作品,我觉得我可以胜任贵司的工作。

3 你遇到过最难的问题是什么?

https://www.zhihu.com/question/35323603/answer/338796153

4 你的期望薪资是多少?

5 你想要的工资 加 1000~2000。

6 (任何你不会的问题)

* 承认不会

* 询问详细细节:你问的是不是XXX方面的知识?请问你想问的是哪方面知识?

* 根据面试官的回答,向有利于自己的方向引导话题。

刁钻代码题

1 map加parseInt

[1,2,3].map(parseInt)

2

3 parseInt(1,0, array) // 1

4 parseInt(2,1, array) // NaN

5 parseInt(3,2, array) // NaN

6

7 a.x = a = {} var a = {n:1};

8 var b = a;

9 a.x = a = {n:2};

10

问 a.x 是多少?

11 (a ==1 && a== 2 && a==3) 可能为 true 吗?a = {

12 value: 0,

13 toString(){

14 a.value += 1

15 return a.value

16 }

17 }

原文地址:https://www.cnblogs.com/nolaaaaa/p/9440142.html

时间: 2024-11-08 13:47:39

前端面试押题整理的相关文章

鹅厂前端面试小题

鹅厂前端面试 1.有代码如下 function test2(){ return 25; }; console.log(typeof test2()) 问题:写出此时打印出的值       number 2.现有代码如下: var name='aaa'; var obj={ name:'bbb', dose:function(){ this.name='ccc'; } }; var does=obj.dose; does(); console.log(obj.name): 问题:写出此时打印的值

web前端面试真题! 面试的经历和回答只做参考1

xxxxx网络有限公司:下午1点50分左右到达公司附近,3点左右找到公司,因为公司周围环境不是很好,位置也很偏僻,关键是当时公司就3个人,当时想着:就算不在这里工作最起码要了解下面试过程什么的,所以在面试时完全不紧张,整个过程就像闲聊一样. 1.先自我介绍下? 好的,我叫xxx,毕业于xxxx,之前在xxxxx做WEB前端工作2年左右,10月底辞职到厦门,以后打算在厦门长期发展. 2.node是什么? node是服务端的JS,是一个事件驱动的非阻塞的I/O服务端js环境,本质上是对google

web前端面试真题! 面试的经历和回答只做参考

xxxx科技有限公司    今天下午2:30分到达面试公司,BRT县后附近;首先进入叫你提交个人简历,和填写应聘表格必填个人信息外还有之前公司的基本信息和项目负责人联系方式   等一会过后;当项目经理进来面试的时候有礼貌的问好,他拿着简历进来,开始看着简历问问题;1.自我介绍一下自己?坐着端正,我叫xxx,22岁,毕业于xxxxxx, 计算机科学与技术专业;平时没事爱运动,研究最新的技术,逛逛技术论坛;2.为什么身份证和你填写的简历年龄不符合? 小时方便入学所以将年龄报大了;在2015年经过父母

java面试基础题整理学习

最近投了一些java岗位,面试和笔试的问题更关注基础的掌握,因为基础知识是安身立命以及决定自己上限的东西.结合了网上一些优秀文章,做了如下整理: 1. JDK 和 JRE 有什么区别? JDK:Java Development Kit 的简称,java 开发工具包,提供了 java 的开发环境和运行环境. JRE:Java Runtime Environment 的简称,java 运行环境,为 java 的运行提供了所需环境. 具体来说 JDK 其实包含了 JRE,同时还包含了编译 java 源

前端面试高频题:删除数组重复元素的多种方法

最近在想着换工作,去了一家中关村的上市公司,面试官随便问了几个问题其中就提到了怎么删除数组元素的方法,表示这已经是第三次遇到了这个问题了,由于知识口头说说所以就随便说了下,之前用的时候都是直接找的方法库虽然知道大致是怎么写的但是还没有真正写过,网上的方法还是蛮多的这里也给大家分享一个作者写的吧,希望对初学者有所帮助: //数组去重的方法 Array.prototype.unique=function(){ //集中声明变量 var oldArr=this, newArr=[oldArr[0]],

前端面试js题

var a=10; (function(){ console.log(a); var a=100; })(); 结果:输出undefined 解释: function中有var a=100; 声明会提升到function最开头,但赋值发生在最后. 上面的代码等价于 var a=10; (function(){ var a; console.log(a); a=100; })(); 打印a的时候,a并没有在function内赋值,所以是undefined.

前端面试算法题

数组去重 function unique(arr) { var result = {},newArr = []; for(var i=0;i<arr.length;i++){ if(!result[arr[i]]){ newArr.push(arr[i]); result[arr[i]]=1; } } return newArr; }

前端面试经典题之ES6新特性

ES6 主要是为了解决 ES5 的先天不足,在原先ES5的基础上新增了许多内容,本篇文章将列举出ES6中新增的10大特性. 一. let 和 const 与var不同,let和const都是用于命名局部变量,都是块级作用域.具体可参考阮一峰老师的文章:http://es6.ruanyifeng.com/#docs/let. 这三者的用法区别如下: 1 var val = "全局变量"; 2 3 { 4 let val = "局部变量"; 5 console.log(

【学院官方整理】2016年备战上半年软考通关秘籍(内含经典押题资料)

亲爱的学员们: 您好!51CTO学院为梦想增值,诚邀您的关注!51CTO学院致力于让专家分享技术并让技术变现,让广大技术爱好者便捷.实惠的获取优质学习资源. 为了方便大家的学习,我们特别整理了2016年备战上半年软考通关秘籍(内含经典押题资料),点击查看更多>> 2016年备战上半年软考通关秘籍(内含经典押题资料) 企业招聘要求 随着互联网发展和IT技术的普及,网络和IT已经日渐深入到日常生活和工作当中,许多企事业单位的业务依赖于信息系统安全运行,国家和社会对网络与信息安全工程师的需求越来越大