应届毕业生web前端面试自我介绍_前端开发工程师面试个人介绍

大家好，我是王我。 随着春节的结束，各个行业也普遍开始了上班的节奏， 不过本人17号才上班。为什么？因为长得帅的都上班比较晚。 当然，每到新年结束，又迎来了一批招聘者与面试者，我来说说作为一年工作经验应该知道的面试题。 HTML篇 1.doctype是什么？有哪些类型？ 2.input有哪些新类型？简要说明其8用法。 3.HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？ 4.bootstrap响应式的原理是什么？ 5.多移动终端页面适配是如何实现的？ CSS篇 1.如何实现两列布局，左边自适应，右边固定宽度？ 2.用CSS画一个三角形 3.CSS实现字体大写 4.display有哪些常用的属性值？分别是什么意思？ 5.position为absolute，relative，fixed的定点位置 6.用三种方法清除浮动 7.请介绍一下margin塌陷问题 js篇 1.什么是事件冒泡和捕获？如何阻止事件冒泡？(分别用原生和jquery实现) 2.js创建对象，至少使用三种方法 3.简述一下事件穿透以及解决办法 4.用三种方式判断变量类型是否是数组 5.如何实现对象的拷贝？ 6.什么是闭包？闭包的优缺点。 7.简述一下ajax请求的过程。 8.简述一下new一个人构造函数的人过程。 9.为什么会有跨域？是怎么解决跨域问题的？简述一下原理。 10.js原始数据类型有哪些？ 11.学一个函数，判断一个变量是否是字符串 12.typeof有哪些结果？ 13.剪头函数和普通函数有什么区别？ 14.请用三种方法实现数组去重 15.href和src有什么区别？ jquery篇 1.attr()和prop()有什么区别？ 2.on和bind有什么区别？js动态添加的dom元素是通过on还是bind？ 3.touch和click有什么区别？ 4.window.onload和jquery的ready有什么区别？ vue篇 1.简述一下vue的生命周期及其特点 2.vue双向绑定的原理是什么？ 3.vue的特点有哪些？和jquery有什么区别？ 4.父子组件之间传递数据的方法 5.子组件如何共享数据？ 6.一般有什么工具进行数据交互？ 7.webpack的原理是什么？ 8.简述一下$nextTick的用法 浏览器篇 1.cookie、sessionStorage、localStorage的区别是什么？ 2.有用过浏览器缓存吗？简述一下基本的缓存机制 网络篇 1.http和https之间的区别 2.从服务器的安全考虑，是使用get请求还是post请求？ 3.URL请求的过程有哪些？ 项目经验篇 1.项目中遇到的最大挑战以及解决办法 2.常见的网页优化有哪些？ 作为一个面试一年以内工作经验的前端程序员来说，以上的问题能够倒答如流月薪6k应该不成问题啦。这些面试题也是我在很多面试中感觉经常被问到的题目。 希望大家年后找工作能够顺顺利利， 千万不要跟我一样哦，只有帅气就一无所有了。 大家好，我是王我，中国最帅的前端程序员。 前几次都是各种培训公司，各种忽悠就不提了，说说后面4次面试的经历。 第一次是面一个小公司，不过他们好像没有厉害的前端，来面我的是个后端，一来没有问我关于js的知识，直接问我以前做过什么，有没有经验，我本人不会吹牛，简历也没怎么包装，就是自己把自学的知识和做的几个小demo弄在上面，也用github挂在页面上了，不过他根本不点开看，也不问，问我会不会vue，我当时对框架还不了解，他就说他们需要能直接上手开始写的，所以我第一个就直接挂了。 第二次面试是一个国企，这个问了很多问题，都很基础，js数据类型，数组操作，事件，大概就是高程的前面几章看看就差不多都能答到，然后因为他们主要用jq，所以问了很多jq的操作，关于节点的，动画的，我看锋利的jq大概看了3遍，也练过多次，所以我答的很熟。然后问了些布局方面的，bootstrap我了解过，又看过css3，所以这方面也没啥问题，最后在现场做了个题目，主要就是布局然后通过ajax呈现数据。后面听介绍我面试的说面试官比较满意，说我jq很熟，一面就过了。可惜后面电话面试不知怎么回事可能表现的不够自信，虽然没问技术，但是我没啥自信，把没项目经验什么的也不知怎么就一五一十交代了，估计因为这个挂掉了。 第三次没问问题，直接就是一套题开做，我在那做了一个多小时。题目就是按照要求一步一步做一个页面出来，我也搞忘了我当时卡在哪个地方了，坐在那得时候就是做不出来，没有设计图，要根据他的描述自己找个设计图然后做，我第一次遇到这个有点懵，虽然当时没做出来，不过回来我自己花了几个小时把它做了。所以这个也是凉了。 第四个问的比较多，数据类型，数组操作，跨域，ajax，闭包，原型链，继承，深拷贝，浅拷贝，模块amd cmd，基本都是问的js。然后问了html5的新特性 css3 的新特性，遇到过什么浏览器的兼容性问题，怎么解决的，以后想往什么方面发展。这个时候我已经会点vue了，照着做了个小demo，不过后来知道公司用的angularjs，面试官也没看我做的，问也没问。。以前听网上说要带上自己的项目去面试感觉没起多大效果。 最后总结下如果面的比较初级的岗位，应该主要问js，原型链，继承，闭包，深浅拷贝，ajax，跨域，然后js的基础知识，对了还有apply和call也问了，html5的新特性了解下就行。主要就是看你js掌握的程度，如果稍微要求高一点的，暂时还没面过，等以后面过在来回答 1. cookie session 的用途和区别，以及有效期 1、cookie数据存放在客户的浏览器上，session数据放在服务器上。 2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗 考虑到安全应当使用session。 3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能 考虑到减轻服务器性能方面，应当使用COOKIE。 4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。 2. vue的数据绑定原理，mvvm与mvc的区别 MVVM： m:model数据模型层 v:view视图层 vm:ViewModel vue中采用的是mvvm模式，这是从mvc衍生过来的 MVVM让视图与viewmodel直接的关系特别的紧密，就是为了解决mvc反馈不及时的问题 图片说明一下： 说到MVVM就要说一下双向绑定和数据劫持的原理， MVC： m:model数据模型层 v:view视图层 c:controller控制器 原理： c层需要控制model层的数据在view层进行显示 MVC两种方式，图片说明： 总结： mvvm与mvc最大的区别： MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。 不懂得可以复制链接查看： https://www.pianshen.com/article/3716256399/ 3. storage 的区别 sessionStorage localStorage localStorage 的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性 sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的 4.v-model双向数据原理 有一个文本框 通过v-bind绑定了value属性 值为myname 是我们在vue实例中定义的属性 传统我们获取文本框值方法 可能通过getElementById找到文本框 然后获取其value属性 但是vue中直接通过v-bind绑定了value属性 所以不需要像之前那样获取值 所以在后面的按钮中获取name值 直接获取vue实例对象data里面的myname属性即可 【数据为尊 ----数据映射到浏览器 如果数据v-model后修改（肯定input）然后到数据在有数据映射到浏览器页面 ----映射关系统称】 5.keepAlive用过吗？什么作用？ 缓存路由组件 使用的是vue的一个组件，参考vue的官方文档 使用这个东西可以保证我们在切换组件的时候，原来显示的组件不被销毁 -----【保障组件的数据不会被切换路由而销毁数据】 Home是对应的组件对象的名字，不是路由的名字 6.多维数组拍平 数组拍平也称数组扁平化，就是将数组里面的数组打开，最后合并为一个数组 一红六种方法吧…… 了解的请看： https://www.cnblogs.com/guan-shan/p/10165737.html 7.跨域的原因 解决方案 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。 这样就可以说同源策略----协议---端口---域名 原生的src和href可以解决跨域 代理可以解决 请求头也可以携带浏览器提示的也可以解决 一般都是后端解决跨域问题 【别的需要了解看下方链接】 https://blog.csdn.net/qq_41604383/article/details/100770100 8.uniApp兼容问题 § 如果你使用cli创建项目（即项目根目录是package.json），不管用什么ide，即便是用HBuilderX，切记cli项目的编译器是在项目下的，HBuilderX不管怎么升级都不会影响编译器版本。你需要手动npm update来升级编译器。以及如果你想要安装less、scss等预编译器，也需要自己npm安装在项目下，而不是在HBuilderX的插件管理里安装。 § 如果你使用离线打包，请注意HBuilderX升级后，真机运行基座和云打包对应引擎跟随HBuilderX升级，而你的sdk需要手动升级。sdk的版本升级一般滞后HBuilderX正式版升级一两天。 § 如果你使用自定义基座，之前制作的自定义基座是不会跟随HBuilderX升级的，升级HBuilderX后你应该重新制作新版自定义基座。 § 如果你使用wgt升级，新版HBuilderX编译的wgt，运行到之前的runtime上，一定要先测试好，看有没有兼容性问题。如果有问题，就不要wgt升级，整包升级。 § 考虑到向下兼容，uni-app编译器在升级为新的自定义组件模式后，同时保留了对老编译模式的向下兼容。 在HBuilderX alpha版中，App端一定会使用新编译器，不理会manifest配置。 在HBuilderX 正式版中，新创建的项目会使用新编译器，老项目不会强制使用，而是开发者自己在manifest里配置开启。 § 如果你使用其他ide开发uni-app，会经常因为拼错单词而运行失败，因为经过webpack编译一道，很多错误反应的不够直观，排错时间很长，不如从开始就依赖有良好提示的HBuilderX，避免敲错单词。 § 云打包的引擎版本说明 HBuilderX Alpha，只有1套云打包机，不管你的HBuilderX alpha版本多少，对应的打包机一定是最新的alpha版的客户端引擎。 HBuilderX正式版，有2套打包机，一个是最新正式版，一个是次新正式版。 中间的紧急更新版本没有独立打包机。 举个例子： HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1这几个正式版。 那么当前可用的打包机有1.9.1和1.8.2这2台。（即每个大版本的最后一个版本） 除了这2个HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版对应的打包机。（即只保留2个大版本的云打包机） 【详情请看】 https://ask.dcloud.net.cn/article/35845 一、HTML HTML书写规范 H5新增标签 HTML渲染过程 二、CSS css盒子模型概念 css弹性布局概念 三、JavaScript 事件模型 DOM2级事件模型 闭包 原型链 四、移动Web开发 常见的布局方案 移动端前端常见的触摸相关事件touch、tap、swipe等整理 移动端前端手势事件 移动端页面渲染优化 GPU渲染 GPU核心渲染过程 五、调试 常用的调试工具 Chrome控制台调试js使用 移动端测试 六、HTTP网络知识 常见的HTTP状态码 不同请求类型的区别 WEB缓存方案 —————————— 牛客网（www.nowcoder.com） - 专业IT笔试面试备考平台 - 最全C++JAVA前端等互联网技术求职题库 - 全面提升IT编程能力 - 程序员交友圣地 分享了一些Web前端的面试题，限时一小时，你看看自己能够答出多少道！ 放心，这些面试题都是一些非常基础的知识，只要你在平时认真听课、学习了，那么这些面试题肯定不会难道你。 建议：虽然没有人监督你，但还是希望你不要去寻找答案，脱离百度，拿起纸笔，你试一下自己究竟能够答出个什么水平！有没有真本领？答案尽在这些面试题里！那么，你准备好了吗？OK！计时开始！ 一、HTML常见题目 01、Doctype作用？严格模式与混杂模式如何区分？它们有何意义？ 02、HTML5为什么只需要写？ 03、行内元素有哪些？块级元素有哪些？空(void)元素有那些？ 04、页面导入样式时，使用link和@import有什么区别？ 05、介绍一下你对浏览器内核的理解？ 06、常见的浏览器内核有哪些？ 07、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？ 08、如何区分HTML和HTML5？ 09、简述一下你对HTML语义化的理解？ 10、HTML5的离线储存怎么使用，工作原理能不能解释一下？ 二、CSS类的题目 01、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 02、CSS选择符有哪些？哪些属性可以继承？ 03、CSS优先级算法如何计算？ 04、CSS3新增伪类有那些？ 05、如何居中p？如何居中一个浮动元素？如何让绝对定位的p居中？ 06、display有哪些值？说明他们的作用。 07、position的值relative和absolute定位原点是？ 08、CSS3有哪些新特性？ 09、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景？ 10、用纯CSS创建一个三角形的原理是什么？ 三、Java类的题目 01、介绍Java的基本数据类型。 02、说说写Java的基本规范？ 03、Java原型，原型链？有什么特点？ 04、Java有几种类型的值？(堆：原始数据类型和栈：引用数据类型)，你能画一下他们的内存图吗？ 05、Java如何实现继承？ 06、Java创建对象的几种方式？ 07、Java作用链域？ 08、谈谈This对象的理解。 09、eval是做什么的？ 10、什么是window对象？什么是document对象？ OK，一小时到了，这个时间可不算短了，那么这些面试题你答出了几道呢？你写的答案正确了吗？现在你可以去翻看答案了。 如果你答出了绝大多数的或者是全部的题，并且答案也正确了，那么恭喜你…… 你这时心里是不是有点小窃喜，认为自己有能力拿高薪了？虽然我也很想这么告诉你，但事实上这只能表明你的基础扎实，毕竟这只是一些非常基础的面试题。骚年~继续努力吧！ 如果你只答出了小部分或者答出了大部分题但答案不正确，那么我只想说：“骚年，你的水平还差的远呢。”连这么基础的题你都打不出来，还想拿高薪？回去再练一段时间吧！ 扎实的基础是你拿高薪的重要武器，如果你连基础都不扎实，那么想要攻克“高薪”这个厚实的堡垒，那只是痴人说梦罢了。 1.前端框架类问题，问你会不会用vue react啊 2.语言类，问你一些JavaScript语言的问题 3.项目经验，让你讲讲做过的项目，遇到的问题和解决之道

1.请说明ECMAScript,JavaScript,Jscript之间的关系?ECMAScript提供脚本语言必须遵守的规则、细节和准则，是脚本语言的规范。比如：ES5，ES6就是具体的一js版本。JavaScript是ECMAScript的一个分支版本,JavaScript实现了多数ECMA-262中描述的ECMAScript规范，但存在少数差异。JScript是微软公司对ECMA-262语言规范的一种实现,除了少数例外(这是为了保持向后兼容),微软公司宣称JScript完全实现了ECMA标准.关系:JavaScript和JScript都是ECMAScript的版本分支,二者在语法上没有多大的区别;只不过一个是NetScape公司的,一个是微软的;IE系列默认是JScript,其它的则反之用JavaScript。2.页面加载过程中可能触发哪些事件?它们的顺序是?页面加载时，大致可以分为以下几个步骤：1)开始解析HTML文档结构2)加载外部样式表及JavaScript脚本3)解析执行JavaScript脚本4)DOM树渲染完成5)加载未完成的外部资源6)页面加载成功执行顺序:1)documentreadystatechange事件2)documentDOMContentLoaded事件3)windowload事件3.函数中在声明变量a前使用a会产生错误吗?为什么?不会,JS中能够进行变量作用域提升,把所有变量、函数的声明提升到当前作用域的最前面,但不进行赋值操作;所以可能造成获取的值是undefined。4.什么是hash,以及hashchange事件?先了解下什么是hash:hash即URL中"#"字符后面的部分。a)使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id(或name)与hash值一样的元素的位置;b)hash还有另一个特点，它的改变不会导致页面重新加载;c)hash值浏览器是不会随请求发送到服务器端的;d)通过window.location.hash属性获取和设置hash值。window.location.hash值的变化会直接反应到浏览器地址栏(#后面的部分会发生变化)，同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。再来了解下什么是hashchange事件:a)当URL的片段标识符更改时，将触发hashchange事件(跟在#符号后面的URL部分，包括#符号)b)hashchange事件触发时，事件对象会有hash改变前的URL(oldURL)和hash改变后的URL(newURL)两个属性。5.什么是CDN,CDN对于网站有什么意义,它有什么样的缺点?CDN又称为内容分发网络;本意在于尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。主要目的:解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。缺点:a)实施复杂,投资大;b)目前大部分的CDN还只是对静态内容加速，对动态加速效果不好;而双线对动态加速的效果跟静态是一样的。

解析： 第 41题 比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现 解析： 第 42 题 解析： 第 43 题 1、客户端使用https的url访问web服务器,要求与服务器建立ssl连接 2、web服务器收到客户端请求后, 会将网站的证书(包含公钥)传送一份给客户端 3、客户端收到网站证书后会检查证书的颁发机构以及过期时间, 如果没有问题就随机产生一个秘钥 4、客户端利用公钥将会话秘钥加密, 并传送给服务端, 服务端利用自己的私钥解密出会话秘钥 5、之后服务器与客户端使用秘钥加密传输 解析： 第 44 题 解析： 第 45 题 1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined 解析： 第 46 题 解析： 第 47 题 1、Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同； 2、第一个参数都是，指定函数体内this的指向； 3、第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。 4、call比apply的性能要好，平常可以多用call, call传入参数的格式正是内部所需要的格式 解析： 第 48 题 解析： 第 49 题 解析： 第 50 题 为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？ 解析： 第 51 题 解析： 第 52 题 解析： 第 53 题 解析： 第 54 题 如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。 解析： 第 55 题 解析： 第 56 题 解析： 第 57 题 解析： 第 58 题 解析： 第 59 题 解析： 第 60 题 解析： 第 61 题 解析： 第 62 题 解析： 第 63 题 解析： 第 64 题 解析： 第 65 题 解析： 第 66 题 随机生成一个长度为 10 的整数类型的数组，例如 [2, 10, 3, 4, 5, 11, 10, 11, 20] ，将其排列成一个新数组，要求新数组形式如下，例如 [[2, 3, 4, 5], [10, 11], [20]] 。 解析： 第 67 题 解析： 第 68 题 解析： 第 69 题 解析： 第 70 题 解析： 第 71 题 [图片上传失败...(image-2eeb30-1575446538468)] <figcaption></figcaption> 解析： 第 72 题 解析： 第 73 题 解析： 第 74 题 解析： 第 75 题 解析： 第 76 题 示例 1： 示例 2： 解析： 第 77 题 解析： 第 78 题 解析： 第 79 题 解析： 第 80 题 解析： 第 81 题 解析： 第 82 题 解析： 第 83 题 习题： https://blog.csdn.net/qq_37024887/article/details/106784068 解析： 第 84 题 解析： 第 85 题 给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用。 示例： 解析： 第 86 题 解析： 第 87 题 以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下： 解析： 第 88 题 解析： 第 89 题 [图片上传失败...(image-aea64e-1575446538470)] 解析： 第 90 题 解析： 第 91 题 [图片上传失败...(image-21d53f-1575446538470)] 解析： 第 92 题 示例 1： 中位数是 2.0 示例 2： 中位数是(2 + 3) / 2 = 2.5 解析： 第 93 题 解析： 第 94 题 解析： 第 95 题 解析： 第 96 题 解析： 第 97 题 解析： 第 98 题 解析： 第 99 题 解析：[第 100 题]( https://github.com/Advanced-Frontend/Daily-

1、 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下)答：行内元素：会在水平方向排列，不能包含块级元素，设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。块级元素：各占据一行，垂直方向排列。从新行开始结束接着一个断行。兼容性：display:inline-block;*display:inline;*zoom:1。2、box-sizing常用的属性有哪些?分别有什么作用?答：box-sizing: content-box|border-box|inherit。content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。3、Doctype作用?标准模式与兼容模式各有什么区别?答：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。4、html5有哪些新特性?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?答：HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。(1)绘画 canvas;(2)用于媒介回放的 video 和 audio 元素;(3)本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;(4)sessionStorage 的数据在浏览器关闭后自动删除;(5)语意化更好的内容元素，比如 article、footer、header、nav、section;(6)表单控件，calendar、date、time、email、url、search;(7)新的技术webworker, websocket, Geolocation;IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。当然也可以直接使用成熟的框架、比如html5shim。以上就是环球青藤小编关于web前端面试题的相关分享，希望对大家有所帮助，想要了解更多相关内容，请及时关注本平台并进行查看!

前端开发可能问到的问题： 自我介绍（一定要对项目很熟悉） ui-app web前端技术体系？ 响应式怎么做？ render跟状态的差异 类组件的生命周期？ 阻止冒泡，阻止事件默认行为 文本垂直居中。 line-height设置为元素高度。 用reduce讲数组中的对象进行合并 解释localstorage sessionstorage cookie eventbus满足event.on("eventname", callback) display有几个值？默认值？ position有几个值？默认值？ div水平垂直居中？ position有哪些值 react相关问题（概念理解、通讯组件等）、react常用内置 React-router html+css 页面增删改查 position的值 absolute relative fixed static 工作中是怎么联调和上线的（现场想合适的前后端联调方式，能和webpack环境切换联系起来） antd的Form shouldUpdate增量更新方式，性能优化。 对Hooks的理解 3:操作dom点击事件向服务器上传数据，在上传未完成之前不可重复操作事件 4:日期格式化，日期不足前两位补0（2021-06-06 06:06:00） 用css写一个布局，左侧固定宽度，右侧自适应 你看

今天小编要跟大家分享的文章是关于2020年Web前端面试题汇总。由于内容较多小编分开为大家介绍，今天首先来和小编一起看一看第一部分的内容，希望这些面试题能够对正准备找Web前端相关工作的小伙伴们有所帮助。1.说几条写JavaScript的基本规范?1)不要在同一行声明多个变量;2)请使用===/!==来比较true/false或者数值;3)使用对象字面量替代newObject这种形式;4)减少使用全局函数,全局变量;5)switch语句必须带有default分支;6)if语句必须使用大括号;7)for-in循环中的变量;应该使用var关键字明确限定作用域;从而避免作用域全局污染。2.说说平衡二叉树?平衡二叉搜索树(Self-balancingbinarysearchtree)又被称为AVL树。具有以下性质：1)它是一棵空树或它的左右两个子树的高度差的绝对值不超过1，并且左右两个子树都是一棵平衡二叉树。2)平衡二叉树必定是二叉搜索树，反之则不一定。3)平衡二叉树的常用实现方法有红黑树、AVL、替罪羊树、Treap、伸展树等。最小二叉平衡树的节点的公式如下：F(n)=F(n-1)+F(n-2)+1备注：1是根节点，F(n-1)是左子树的节点数量，F(n-2)是右子树的节点数量。3.清除浮动和解决垂直外边距重叠的解决方案?问题描述:1)父元素没有设置宽高，尺寸由子元素撑起;子元素一旦浮动，父元素高度会发生塌陷。2)子元素设置margin-top会作用的父元素的margin-top;此时会造成垂直外边距重叠。.clearfix::after,.clearfix::before{content:"";display:table;clear:both;}4.sessionStorage、localStorage和cookie?相同点:都用于浏览器端存储的缓存数据;不同点:1)存储内容是否发送到服务器端当设置了Cookie后，数据会发送到服务器端，造成一定的宽带浪费;xxxstorage则会将数据保存到本地，不会造成宽带浪费;2)数据存储大小不同Cookie数据不能超过4K，适用于会话标识;xxxstorage数据存储可以达到5M;3)数据存储的有效期限不同cookie只在设置了Cookid过期时间之前一直有效，即使关闭窗口或者浏览器;sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;4)作用域不同cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面;5.判断一个单词是否是回文?回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环的情景，叫做回文，也叫回环。比如cacac，redivider。letcheckPalindrom=(str)=>{returnstr===str.split("").reverse().join("");}6.不借助临时变量，进行两个整数的交换?输入a=3,b=1,输出a=1,b=3letswap=(a,b)=>{b=b-a;a=a+b;b=a-b;return[a,b];}7.请写出至少5个html5新增的标签，并说明其语义和应用场景?section：定义文档中的一个章节;nav：定义只包含导航链接的章节;header：定义页面或章节的头部;它经常包含logo、页面标题和导航性的目录。footer：定义页面或章节的尾部;它经常包含版权信息、法律信息链接和反馈建议用的地址。aside：定义和页面内容关联度较低的内容，如果被删除，剩下的内容仍然很合理。8.get和post请求在缓存方面的区别?get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。post不同，post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。9.如何解决异步回调地狱?promise、generator、async/await10.图片的懒加载和预加载?预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。11.bind，apply，call的区别?通过apply和call改变函数的this指向，这两个函数的第一个参数都是一样的，表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1,arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。12.js怎么控制一次加载一张图片，加载完后再加载下一张?方法一:varobj=newImage();obj.src="#/21.jpg";obj.onload=function(){document.getElementById("pic").innnerHTML="";}加载中

1.为什么会形成跨域？ 不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。 解决方法：安装插件 Pip install django-cors-headers 2.vuex的工作流程？ ① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。 ② 然后再通过actions的commit来出发mutations来修改数据。 ③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。 ④ 最后由store触发每一个调用它的组件更新。 3.vuex是什么？怎么使用？ vuex是一个专为vue.js应用程序开发的状态管理模式。使用:store,getters,mutations,actions,modules详细使用写法请见：https://blog.csdn.net/qq_33226029/article/details/109628600?spm=1001.2014.3001.5502 4.vuex中的数据在页面刷新后数据消失怎么解决？ 使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件 5.在vue中，如何阻止事件冒泡和默认行为？ 在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为 6.深拷贝与浅拷贝？ 假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。 7.vue的生命周期？ beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用 8. keep-alive: 组件缓存 https://juejin.cn/post/6844903624099758094 router.js中: meta: {keepAlive:true} // 需要被缓存 钩子执行顺序：created -> mounted -> actived include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。 应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。 9.vue传值方式？ props $emit() $on() $parent $children $listener $attr 10. $on 兄弟组件传值 $emit 分发 $on 监听 $off 取消监听 $once 一次性监听一个事件 在js文件中定义一个中央事件总线Bus，并暴露出来 具体的实现方式： 使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。 应用场景：“退出登录” -> ①点击退出登录；②修改密码后自动退出登录 11.组件跨级传值 $attrs a->b->c $listeners 监听 12.vue事件修饰符有哪些？ .stop .prevent .self .once .passive .sync 13.箭头函数中的this？ 不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。 15.为什么vue组件中data必须是一个函数？ 如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。 16.v-if 和 v-show区别？ v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大； v-if 是惰性的；v-show 做的仅是简单的css切换。 17.v-text 与 v-html区别？ v-text 用于普通文本，不能解析html； v-html 反之。 18.v-for key的作用？ 使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。 key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。 19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？ npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载; 特性：可以用变量，可以用混合器，可以嵌套等。 20.vue获取dom？ ref 21.vue初始化页面闪动问题？ webpack、vue-router v-cloak css:[v-cloak]:display:none 22.什么是vue-router？ vue router 是官方路由管理器。 主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。 23.vue路由传参，接收？ 传： this.$router.push({path:"", query(params):{}}) 接：this.$router.query.xxx 24.防抖和节流？ 节流是一定时间内执行一次函数，多用在scroll事件上； 防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。 25.如何让scss只在当前组件中起作用？

已知高度和宽度的元素： 设置父元素为相对定位relative，给子元素设置绝对定位absoluted，top: 0; right: 0; bottom: 0; left: 0; margin: auto; 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px; 未知高度和宽度的元素： 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translate(-50%，-50%); 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform:translate(-50%，-50%); 组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data ，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data ，就会造成一个变了全都会变的结果。 for of： 支持 return ，并且是值 of 数组（不能遍历对象） 1. 可以避免所有 for-in 循环的陷阱 2. 不同于 forEach()，可以使用 break, continue 和 return 3. for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象 4. 它也支持字符串的遍历 5. for-of 并不适用于处理原有的原生对象 for in： forEach： assets文件夹里是静态资源；components是放组件；router是定义路由相关的配置；view视图；app.vue是一个应用主组件；main.js是入口文件 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。 生命周期函数： activated（ 组件激活时调用 ）、deactivated（ 组件停用时调用 ） 常见的使用场景可以分为三类: 当频繁执行条件时，不适合使用 v-if ,用 v-show ; 反之执行条件的次数很少，使用 v-if 即可。 v-if 和 v-for ,不推荐两者一起使用在同一个元素上，虽然也能运行，但是编辑器会报警告；两者一起使用时，v-for比v-if具有更高的优先级，

function A(x, y, z) { this.x = x; this.y = y; this.z = z;} function B () {}B.prototype = { method1: function () { return this.x + this.y + this.z; }}/*实例化一个对象c，要求c.method1() === 6c.hasOwnProperty("method1") === false、c.hasOwnProperty(“x") === true、c.hasOwnProperty(“y") === true、c.hasOwnProperty(“z") === true*/A.prototype = new B();let c = new A(1, 2, 3);console.log(c.method1()) // 6console.log(c.hasOwnProperty("method1")) // falseconsole.log(c.hasOwnProperty("x")) // trueconsole.log(c.hasOwnProperty("y")) // trueconsole.log(c.hasOwnProperty("z")) // true这是一个原型继承的问题，首先我们让构造函数A的原型执行 构造函数B的实例化对象，这样在实例化构造函数A后 对象c的原型链上就存在了method1方法，而x y z 这三个属性 是属于对象c的私有属性，而method1是在原型链上的，并不是c的私有方法，所以当hasOwnProperty 的时候 检测 method1的时候 是 false ，x y z 都是 true

（水仙花数也被称为超完全数字不变数、自恋数、自幂数、阿姆斯特朗数。水仙花数是指一个3位数，它的每个位上的数字的3次幂之和等于它本身 例如： 1~3 + 5~3 + 3~3 =153） (质数就是在大于1的自然数中，除了1和它本身以外不在有其他因数的自然数) a:11,b:10 A [] B [""] C [undefined] D [null] A ["false"] B [false] C[0] D[] A null B undefined C “hello” D“world” A "llowo" B "llow" C "llo" D null A "llowo" B "llow" C "llo" D null A getYear（） B getMonth（） C getDay（） DgetDate（） A 基于对象 B 移动端优先 C 事件驱动 D 跨平台 A String B Float C Number D Null A 任意单个字符 B 任意单个字母 C 任意单个字母、数字、下划线 D 任意单个字母、数学、下划线、$符号 A <javascript> B <script> C <scripting> D <js> A var s = "heloe" B var n = 20 C var x = document.getElementsByTagName("box") D var y = document.querySelectorAll("ul li") A document.createElement B document.createTextNode C document.getElementById B document.querySelector A ele.innerText B ele.innerHTML C ele.textContent D ele.htmlContent 插入排序的算法描述的是一种简单直观的排序算法，它的工作原理是通过构建有序序列，对于未排序的数据，在已排序序列中从后向前扫描，找到对应位置并插入 A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序的参数 B.reverse用于对数组数据的倒序排列 C.向数组的最后位置加一个新元素，可以用pop方法 D.unshift方法用于向数组删除第一个元素 A.window.status = "已经选中该文本框" B.document.status = "已经选中该文本框" C.window.screen = "已经选中该文本框" D.document.screen = "已经选中该文本框" A <input type="button" value="new" onclick="open("new.html","_blank")" /> B. <input type="button" value="new" onclick="window.location = "new.html"" /> C.<input type="button" value="new " onclick = "location.assign("new.html)"> D. <form target = "_blank" action="new.html"> <input type="submit" value="new" /> </form> A.<script type="text/javascript">document.write(<h1>hello</h1>)</script> B.<script type="text/javascript">document.write("<h1>hello</h1>")</script> C.<script type="text/javascript"><h1>hello</h1></script> D.<h1><script type="text/javascript">document.write("hello")</script></h1> 以下说法中正确的是（AD） A.在页面的第二个文本框中输入内容后，当目标离开第二个文本框时，第一个文本框的内容不变 B.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容 C.在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时候，将在第一个文本框中复制第二个文本框的内容 D.在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变

1.请你谈谈Cookie的弊端cookie虽然在持久保存客户端数据提供了方便，分担了服务器存储的负担，但还是有很多局限性的。 第一：每个特定的域名下最多生成20个cookie1.IE6或更低版本最多20个cookie2.IE7和之后的版本最后可以有50个cookie。3.Firefox最多50个cookie4.chrome和Safari没有做硬性限制IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。IE 提供了一种存储可以持久化用户数据，叫做uerData，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。优点：极高的扩展性和可用性1.通过良好的编程，控制保存在cookie中的session对象的大小。2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。缺点：1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

篇幅有限，我建议你去掘金上搜搜你这个问题，上面有好多总结不错的文章，多看些，vue相关面试题你也就知道的差不多了。

本篇文章给大家分享一些常见的前端vue面试题，有一定的参考价值，希望对大家有所帮助。 如下，判断to.path当前将要进入的路径是否为登录或注册，如果是就执行next()，展示当前界面。如果不是，就弹出alert，然后移至登录界面。 这样就可实现，用户在未登录状态下，展示的一直是登录界面。 持续更新中......

摘要 ：本篇分享了10道面试题——Web性能优化方案、JS严格模式、五道算法题、自定义JS事件系统、输入URL到浏览器渲染的全过程、HTTP和HTTPS相关。 需求：所谓扁平化，就是将一个嵌套多层的数组，转换为只有一层的数组。示例如下： 需求：给定 n 个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为 1 。求在该柱状图中，能够勾勒出来的矩形的最大面积。 从 HTTP 协议栈层面来看，我们可以在 TCP 和 HTTP 之间插入一个安全层，所有经过安全层的数据都会被加密或者解密（如下图所示）。 本周结束，下周继续！！！

防抖 节流 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点: 补充补充一个get和post在缓存方面的区别： 可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、 vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下： 创建map函数 遍历寻找 在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。 **原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。 虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。 具体实现步骤如下： 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。 结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。 性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少 联系：它们都能让元素不可见 常用的一般为三种 .clearfix , clear:both , overflow:hidden ; 比较好是 .clearfix ,伪元素万金油版本,后两者有局限性. clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷 overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷 概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 优点： 缺点： block 元素特点： 1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align inline 元素特点 1.水平方向上根据 direction 依次布局 2.不会在元素前后进行换行 3.受 white-space 控制 4. margin/padding 在竖直方向上无效，水平方向上有效 5. width/height 属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效 GIF : JPEG ： PNG ： 七种数据类型 (ES6之前)其中5种为基本类型: string , number , boolean , null , undefined , ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值 Object 为引用类型(范围挺大),也包括数组、函数, 输出结果是： 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; 单例模式 只能被实例化(构造函数给实例添加属性与方法)一次 沙箱模式 将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值 发布者订阅模式 就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送, 代码实现逻辑是用数组存贮订阅者, 发布者回调函数里面通知的方式是遍历订阅者数组,并将发布者内容传入订阅者数组 1.字面量 2.Object构造函数创建 3.使用工厂模式创建对象 4.使用构造函数创建对象 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。 addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 IE只支持事件冒泡 。 获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。 那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。 我们发现Function的原型也是Function。 我们用图可以来明确这个关系： 这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。 则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为: 这里我们可以来看出三者的关系: 在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。 在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？ 函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。 函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。 在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。 call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。 除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。 如何实现一个 bind 函数 对于实现以下几个函数，可以从几个方面思考 如何实现一个call函数 如何实现一个apply函数 箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。 在函数中，我们首先使用 var 关键字声明了 name 变量。这意味着变量在创建阶段会被提升（ JavaScript 会在创建变量创建阶段为其分配内存空间），默认值为 undefined ，直到我们实际执行到使用该变量的行。我们还没有为 name 变量赋值，所以它仍然保持 undefined 的值。 使用 let 关键字（和 const ）声明的变量也会存在变量提升，但与 var 不同，初始化没有被提升。在我们声明（初始化）它们之前，它们是不可访问的。这被称为“暂时死区”。当我们在声明变量之前尝试访问变量时， JavaScript 会抛出一个 ReferenceError 。 关于 let 的是否存在变量提升，我们何以用下面的例子来验证： let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。 变量的赋值可以分为三个阶段： 关于 let 、 var 和 function ： 依次输出：undefined -> 10 -> 20 答案: D colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。 1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined undefined {n:2} 首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。 在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。 我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。 这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。 所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（"1"） 也返回 true 。 上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（"1"） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。 这题考察的是对象的键名的转换。 catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。 之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。 在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。

过完年需要跳槽的小伙伴还是挺多的，又要开始刷前端面试题了！会不会有一种错觉，看着这道面试题很熟，但是不知道该如何做？或者有答案又不知道是否正确？或者使用编辑器可以运行出来正确的答案，但是不知道怎么得来的，这些你都中招了吗？ JavaScript 语言是一门弱类型语言，存在许多类型错误，因此 ES6 引入了严格模式概念。 如果不加 ‘use strict" 常规模式下就是属于非严格模式。 严格模式 在 js 文件顶部添加 ‘use strict" 就属于严格模式，严格模式也可以指定在函数内部。 严格模式，是为 js 定义来了一种不同的解析与执行模型，在严格模式下，ECMAScipt 3 中一些不解和不确定的行为将得到处理，而且会对不安全的操作会抛出异常。‘use strict" 会告诉浏览器引擎可以切换到严格模式执行。 严格模式与非严格模式区别 常见笔试题： 试试这道笔试题你会做吗？ 要说 js 的深浅拷贝，就不得不提 js 的两大数据类型：基本数据类型和引用类型。 基本数据类型的变量名和值都存储在栈中，对于引用类型的变量名存储在栈中，而值存储在堆中。由于存储方式不同，所以导致了他们复制的时候方式不同。 赋值 基本数据类型赋值的时候，创建的基本数据类型会在内存中开辟一个新空间把值复制过来，而引用类型采用的是地址存储，如果直接把一个引用数据直接赋值给另外一个数据，就相当于直接把自己存储值的地址给了另外一个变量，所以改变一个的值，也会改变另外一个的值。 深浅拷贝是如何定义的？ 假设有 p 和 copyP 两个变量，如果copyP 是拷贝了 p 的，我们通过修改 copyP 来观察 p 是否发生改变，如果跟着改变，就是浅拷贝，如果是不改变，就说明是深拷贝。 基本类型复制的时候会开辟新的内存空间，所以两个值是相互独立的，引用类型复制的时候就要看是复制的内存地址还是复制一个新的堆。所以深拷贝主要针对的是引用类型的数据。 浅拷贝的常见的方式： 1、直接赋值 2、Object.assign 深拷贝的常见方式： 引用数据类型最常用的就是 Object 和 Array ，引用数据内部的数据也可以是多样化的，进行深拷贝时，也要适当地根据数据结构进行合适的复制方式，具体的深拷贝方法分别有： 1、数组中只包含基本数据类型 2、对象中只包含基本数据类型 3、对象或数组里含有一层或多层引用数据类型时 深浅拷贝的常见应用主要是数据的增删改操作。 大厂笔试题： 这是一道关于 this 指向的面试题，接下来我们就说说 this 是如何指向的？ this 对象是运行时基于函数的执行环境绑定的： 看完上述 this 指向解释，你就可以做上边的那道面试题了。 如何改变 this 的指向？ call 、bind 和 apply 这三个函数都是用来改变 this 指向的，就是改变函数执行时的上下文。 修改上述面试题： call 、bind 和 apply 改变 this 指向，最大作用就是实现代码复用。 至于 call、bind 和 apply 的区别，可以自行去了解下。 有了上边那个表，事情就变得简单了！ 关系运算符进行运算时，不同类型的值会自动转化为相同类型值，然后进行 1、两边有一个是字符串一个是是数字时，字符串调用 Number 方法，将字符串转为数字，所以： 2、如果两边都是字符串时，按照字符串的 unicode 编码来转换的，所以： 3、字符串进项比较时，先比较第一位，如果不相等直接得出结果，如果第一项相等，会继续使用第二项进行比较。 4、转为布尔值都为 false 的类型分别有：undefined 、null 、0、NaN、false、‘" 5、NaN表示的是非数字，但是这个非数字也是不同的，因此 NaN 不等于 NaN，两个NaN永远不可能相等。 6、关系运算有一个数值，将另外一个值也转为 number 类型。 7、有逻辑运算的，将其他数据类型转为 boolean 值。 8、直接使用两个空数组比较，数组地址不同，所以不相等。 评论区可以留下最近你想学习的知识点，或面试题类型！

是龙是是蛇，沙场上溜溜。

前端面试一问三不知的时候，千万别慌乱，可以先停一停和面试官说这个问题你需要思考一下再回答，或者说你因为太紧张之类的一时想不起来答案。有些面试官会直接电话过去要求面试，由于面试者(尤其是学生)处于弱势方，可能并不会拒绝面试要求，但并不意味着面试者处于最佳的物理和精神状态下，有可能会导致面试者不能很好的发挥自己原有的实力。所以如果面试官突然打电话过来。没有准备好的话，不要怕冒犯面试官，一定要另外约个时间，面试官肯定会再打过来的。遭到否定面试官有可能会否定你描述的一些东西，有可能是你字眼写的太过，比如将“熟悉”的东西写成了“精通”，勾起了面试官的“好奇”。有可能故意试压，考验你的反应，但遇到否定的时候，不要急于反驳或者是手足无措，而是询问自省和主动讨论。气场不和有的面试官性格严谨沉闷，而面试者可能思维活跃，整个面试过程可能会变成面试官不停的打断面试者让其思维聚焦。而面试者感到思维不停被打断，很是气恼，影响发挥。这种情况不可避免，但遇到这样的面试官，请保持谦和的态度，重点是展示自己技术的广度、深度，气场不和并不会产生决定性的影响，面试官也不会因为这样的原因而给与错误的评判。尽量留下好的印象。结束通知有的面试官会在面试结束后说：“我的问题问完了，如果有进一步消息的话，我们会再联系你”。面试的大部分结果，其实当场就出来了，如果你感觉给出结果的时间点不够明确，可以反问他：“如果三天内没有联系，是不是就代表没有通过？”省得让你怀有不确切的希望。最后，还可以挽留下面试官，讲讲这场面试中你的一些疑惑，获得面试官的反馈，也可以知道自己目前哪一方面做得不足。面试中面对不会的问题面试中遇到问题不会回答，这是非常正常的，毕竟大家在学习过程中遇到的问题，跟我们在工作中遇到的问题是非常不一样的。除此之外，我们看问题的角度，也是有差别很大的。举个例子，很多人都在看ReactFiber，但是如果问你们，为什么要有Fiber这个东西，可能很多人都回答不上来，因为大家只在社区里面看到说，Fiber是怎么工作的啊。但是为什么要有Fiber？如果没有会怎样，而这种思考，其实是非常底层的。我相信，很多人可能都没有思考过。那如果遇到的问题不会，你可以先选择不会，说我觉得自己没有信心能答出这个问题，当然我更希望听到你说。我现在不会，但是你给我两分钟思考一下，我想一下这个问题有没有答案？我觉得这是一个很好的思考习惯，首先你在面对不会的东西是坦然的，我当下不会，很正常，我之前没有思考过这个问题嘛，那我们再花两分钟思考一下。给一个初步的答案。所以说遇到问题，也不用不会就不会，也可以有一个积极的方式回应。从面试官的角度来说，面试中考察的题目，并不是仅仅考察这道题目本身，题目的对错并不跟最终结果直接挂钩。面试官更希望以题目为契机。考察面试者分析问题，解决问题的能力，以及交流过程中所体现的逻辑推理和思维方式等。跟面试官聊业务业务跟项目是完全不一样的东西，业务认知和思考也是很重要的一个考察点，这方面面试官可能会问两个点：业务场景和技术突破。业务场景：面试官会询问面试者他们的产品、业务模式、商业模式等，了解下面试者对于产品的诞生、定位、发展的认知。技术突破：技术与业务相结合这点在阿里也是一直在说但鲜有人做的非常好的地方，所以有的时候也会考察面试者。看看他们所做的技术是如何从业务出发、给业务带来了哪些改变以及如何去评估两者之间产生的结果。面试结束反向互动面试官在挂断之前，基本会给与候选人反问的机会，一般会表述为“你有什么要问我的吗”？无论面试的怎样。都希望你能说出心中的疑惑，比如面试中的某个题目、整体的评价反馈、你的建议或者了解所负责的业务，所在的团队等等，而从面试官的角度来看，如果候选人愿意反问你问题，至少能证明他是个好学的人。所以不要放弃这个互动的机会。面试反馈每场面试结束后，面试官都会在系统里留下面试反馈，如果面试失败，简历会放在人才库里，很多人会在其中捞取简历，以后的面试官也可以看到之前所有的面试记录，之所以讲到这一点，是希望大家在面试中能够保持谦和积极的心态。认真面对每一场面试，即使这场面试没有成功，但如果展示了好的品质，也会增加被发掘的机会，为你以后面试成功铺路。保持联络如果跟面试官聊的比较好，可以请求加个微信之类的，面试是一个长期的事情，哪怕此次面试没有通过。以后还可能面试进来的，与面试官保持联络。前端面试题笔记面试会了，面试题也不能落下，这套面试笔记除了有CSS、JS、Vue、React、性能优化、服务器端口、设计模式、数据结构和算法面试题外，加了手写代码面试题。这下面试官让我们写代码也不怕啦！CSS问题flex布局css3的新特性img中alt和title的区别用纯CSS创建一个三角形如何理解CSS的盒子模型？如何让一个div水平居中如何让一个div水平垂直居中如何清除浮动。

web前端 面试必问的几个问题?有那些? 根据面试官的不同，面试的内容页不一样的。一般的话就是+css布局占一部分，例如各浏览器的相容性，然后就是js的ajax，闭包，冒泡什么的，js会占很大一部分，也有一部分面试官会抛开这些，直接问公司需要的内容，这样的话就是考验你的实际操作了，这类的面试官我很喜欢，就是直接问布局，资料填充之类的，能学到很多东西，建议面试时偷偷用手机录音，回来之后听一听，研究一下自己不会的问题，因为面试完之后，你可能就会忘了面试时都问过什么了 web前端 面试 会问哪些问题 对公司这个行业有什么样的看法，未来的职业规划，自己做好该职位工作的优势，个人缺点是什么，还有就是一些技术性问题了。web前端 面试 会问哪些问题 web前端开发的几个问题 1.巢状表单一般不会有什么问题，主要是看业务需求，不过尽量还是不要使用巢状。 2.name只是标签的属性，一般的网页标签元素都可以使用这个属性，并非只能表单域里的标签才能使用。比如 div、span、input等等都可以有name属性。 3.JQuery已经成为JS指令码开发的标配了，本身的体积也比较小，最主要的是简化了很多JS操作，而且我们基本不用考虑JS的浏览器相容问题了。至于效能和原生的JS没什么区别，放心使用吧。 面试Web前端需要注意什么？会面试哪些问题？ 将这些问题作为参考。 希望你的面试官有点经验，不会用以下这样的问题开场。以防万一，还是准备一些答案。 1.为什么选择程式设计师这个职业生涯? 2.截至目前，你所从事的专案中最喜欢的是哪个? 3.描述一下你梦想中的研发专案。 另外一些面试官会问一些通用的技术问题，来测试你的技术能力。有可能部分人不知道这些问题是什么意思，而仅仅是在考察你的能力/竞争力。基于面试官的技术能力级别的不同，你的答案也会有所不同。这些问题简单易答，因此把这些问题记下来。 1.描述一下建立一个新网页的过程 2.怎样减少页面载入时间? 3.标准和标准体(standards and standards bodies)为什么重要? 4.你使用怎样一个过程来组织程式码? 5.你喜欢用什么工具来测试程式码效能?[page] 既然你从事前端工作，理解CSS会非常重要。因此这里为你准备了一些常见的CSS问题。这是展示你知识储备的重要开始。这些并不是最尖锐或者重要的问题，如果不能回答出来，将对你很不利。 1.CSS 中的 resetting 和 normalizing 之间的区别有哪些? 2.什么是floats，它是如何工作的? 3.absolute、relative、fixed 和 static 定位的区别是什么? 4.解释visiblity hidden和display none之间的区别 5.你是如何修复特定浏览器预设样式的问题? 6.你是否用过网格系统?目的是? 7.如果计算CSS权重? 8.解释如何优化CSS选择器。 9.为什么需要使用预编译器? 10.你是如何测试网站的跨浏览器相容性? 现在我们最基本的任务完成了。谁都能死记硬背这些答案来应付以上问题。即使是新手前端开发者也能出色地回答大部分问题。然而如果想真正让你的面试官印象深刻并证明你的功底深厚，就把下面这些问题牢记在心。 1.前端开发的框架是什么? 2.响应式web app和原生应用程式的区别是什么? 3.原生app相对web app的优点是什么? 4.客户端和伺服器端开发的区别是什么? 5.什么是SASS和LESS?它们是如何工作的? 面试官会更多关注你是如何表达对这些问题的解释。他们会追问支援你的答案的工作案例。前面的问题你可能可以通过记忆而过关，你可能还会遇到这些问题的扩充套件，但这些答案的深度，将让你与众不同。通过你参与过的实际专案，来展示你的思考过程。 web前端jquery面试题有哪些 常见的几个如下：他们的答案可以百度搜。 1. jQuery 库中的 $() 是什么？ 2. 网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？ 3. jQuery 里的 ID 选择器和 class 选择器有何不同？ 4. 如何在点选一个按钮时使用 jQuery 隐藏一个图片？ 5. $(document).ready() 是个什么函式？为什么要用它？ 6. JavaScript window.onload 事件和 jQuery ready 函式有何不同？ 7. 如何找到所有 HTML select 标签的选中项？ 8. jQuery 里的 each() 是什么函式？是如何使用它的？ web前端面试必考的基础面试题有哪些？ 切图，css 盒模型，js基础语法，ajax, 面向物件，模组化，效能优化，自动化这想相对的考核会多一些。大公司重基础，小公司重能力，所以与时间的话多去刷一刷基础的题目吧。 祝你顺利通过面试！ web前端面试经常问到的面试题有哪些 web前端面试经常问到的面试题实在太多了，建议你去网上搜索一下，或者直接下载一些面试题的集锦，然后看看就好了。 1、 列举web效能优化？ 1) 减少请求次数。合并档案、利用css sprite把零散的图片整合到一张图上。 2) 减少DNS查询。 3) 减少从定向。 4) 响应时间。使用AJAX进行快取，减少请求。 5) 延迟载入元件. 6) 预载入元件。 7) 减少节点的数量。 8) 切分元件到多个域。 9) 最小化iframe。 10) 杜绝404错误。 2、 介绍一下XMLHttpRequest物件的常用方式和属性? open(“method”,”URL”) 建立对伺服器的呼叫，第一个引数是HTTP请求方式 可以为GET，POST或任何伺服器所支援的您想呼叫的方式。 第二个引数是请求页面的URL。 send()方法，传送具体请求 abort()方法，停止当前请求 readyState属性 请求的状态 有5个可取值 0=未初始化 ，1=正在载入 2=以载入，3=互动中，4=完成 responseText 属性 伺服器的响应，表示为一个串 reponseXML 属性 伺服器的响应，表示为XML status 伺服器的HTTP状态码，200对应ok 400对应not found web前端问题 IE浏览器类似银行网银安全密码输入控制元件，使用键盘钩子防止被键盘记录器监听密码，使用des对密码加密传输，输入框禁止选择复制 或者 只要是ActiveX，必须要进行IE的安全设定。 网银一般都是一个安装程式，安装的时候都给你设定好了。 ActiveX在页面里面和普通的DOM物件一样，只要ActiveX建立成功，就可以用js直接访问该元件的方和和属性。

hr如何面试web前端工程师，该问哪些技术问题 一、基本知识 我们生活在网际网路时代，你想知道的任何事情几乎都能在15分钟内找到相关资讯。可是，能找到资讯并不等于你会使用它。我认为所有前端工程师至少都应 该掌握某些基本的知识，才能有效地完成自己的工作。如果一遇到问题，就停下工作上网四处搜寻解决方案，怎么可能保证按期完成工作呢？听听，还有谁在说“我 不知道，但我可以上网搜到。”请这些同学把手举起来，让大家认识一下（immediately raises a flag for me.）。下面我列出一些基本的知识点，这些都是我认为一名前端工程师（无论工作年头长短）在没有任何外来帮助的情况应该知道的。 [list][*] DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 [*] DOM操作——怎样新增、移除、移动、复制、建立和查询节点。 [*] 事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。 [*] XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。 [*] 严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。 [*] 盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。 [*] 块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。 [*] 浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。 [*] HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。 [*] JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。 [/list] 重申一下，上述这些知识点都应该是你应该“想都不用想”的东西。我一开始问的所有问题都是想摸清你对所有这些领域知识的掌握程度。虽然上面列出的这些知识点并没有面面俱到，但我觉得你至少应该掌握这些，才有可能跟我坐到一间办公室里来。 二、少量提问 我非常赞同面试者问的问题越少越好。反复问应聘者各种问题既不公平，也很无聊。我在任何一次面试中，通常只问三个大问题，但每个问题又会涉及我所能想到的多个方面。回答每个大问题一般要经过几个步骤，这样我就可以在每个步骤中穿插著问一些小问题。比如说： 现在有一个正显示著Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来重新整理价格，但不会重新载入页面。请你描述一下实现这个功能的过程，假设伺服器会负责准备好正确的股票价格资料。 这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他资讯，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩充套件要考察的知识范围，最简单像JOSN与XML的区 别、安全问题、容量问题，等等。 我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的程式码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把 关于库的知识作为评判能力的因素，因为库是会随时间变化的。我需要的是真正理解库背后的机制，特别是能够徒手写出一个自己的库的人。 三、解决问题 做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘 者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。 首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都 明白。可是，只要一跟这些人谈到怎么查询方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。 其次，可以测试出他们已经掌握的（还是那句话，“想都不用想”）浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。 对一名前端工程师来说，这绝对是最重要的能力。前端工程师在工作中遇到本该如此却并未如此的难题（说你啦，IE6），应该说是一件很平常的事。一个方案无效就无计可施的人，做不了前端工程师。 考核应聘者解决问题能力的另一层原因，与我的个人喜好有关。在搞清楚应聘者知道什么不知道什么之后，我就会想着问一个他们知识领域之外的问题。这样 做的目的，就是想看看他们怎样运用已有的知识解决新问题。在解决问题的每一步，我也准备了一些提示，以防有人会卡壳打艮（在我面前15分钟一言不发，对我 评价这个人毫无帮助）。我真正感兴趣的，是他们能够从上一步前进到下一步。我希望看到一个人就在我眼前学到新知识。 注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像（或者让刘翔跟博尔特同场竞技），没有意义，也得不到任何有价值的资讯。 HR一般不会面试太深的问题，主要是了解一下你之前的工作经历，更多的是你自己描述，中间可能会问一些初级的问题，比如，你为什么从上一家单位离职等类似问题。 一道web前端工程师面试题，求解答。 这样的布局用绝对定位实现最合适，ABC的外层用相对定位，里边各列用绝对定位就可以。至于CBA且B宽度自适应，还是用绝对定位，但只定位C,A分部到两侧，中间的列margin设成左右列的宽度就可以。 web前端工程师如何才能硬气的跳槽？ web前端开发工程师想要硬气的跳槽，起码应该达到以下几点： 1.掌握扎实的技术基础， 需要掌握技术包括：HTML、CSS、JavaScript; HTML是Web程式设计的基础，HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页档案本身是一种文字档案，通过在文字档案中新增标记符，可以告诉浏览器如何显示其中的内容。 维护大型的CSS程式码库并非易事，特别是那些随意散漫未经组织的CSS程式码极易变成一团乱麻，所以，应该掌握CSS命名规范，来帮助开发者编写优质的程式码。 2.深入理解前端工程化和元件开发; 需要熟悉web前端框架—— React、Vue.js等， React为我们提供了直接易用的，以状态为核心的前端应用开发方式，前端工程师应该会分析React内部工作原理，讨论React中简单元件、类元件等渲染流程。 Vue.js单元测试是应用开发中不可或缺的部分，日常开发中会用到的Vue.js单元测试的例子，所以应该掌握。 3.熟练掌握Web开发相关知识 至少熟悉一门后端语言，例如Node.js、Java、Go等; Node.js内部原理视非常重要的，应该明白Node.js的主程序是如何启动的、如何载入内建模组、os包如何实现等等。 4.对技术有热情，有一定前端架构能力或者技术深度;具备团队合作意识强，能够多团队协作开发;具备企业级大型前端应用开发经验更佳。 如何识别一个人是web前端工程师 前端工程师需要懂得设计类程式码和js，有需要了解一些后台语言，例如PHP等。 如何实现成为web前端工程师的梦想 1.入门阶段：能够解决一些问题的水平。有一定的基础(比如最常见的HTML标签及其属性、事件、方法;最常见的CSS属性;基础的JavaScript程式设计能力)，能够完成一些简单的Web前端研发需求。 2.进阶阶段：将JavaScript、HTML、CSS之类的编码帮助手册里的每个方法/属性都通读几遍!只有将基础打好，以后的路才能走的顺畅。 3.入室：最强程式码，知道所有能够解决需求的各种方案，能够选择使用最优秀的方案满足需求。这个级别基本上产品开发程式设计中的程式码主力。程式设计师应该能够肯定的回答：对于这个需求而言，我的程式码就是最优秀的程式码。 4.注重细节，注意那些当前需求里没有明文给出的细节：程式码效能的差异、执行平台(浏览器)的差异、需求的隐性扩充套件、程式码的向后相容等等。 如何了解web前端工程师和UI设计师 web前端工程师是不参与任何的设计，直接将网站美工制作的网站效果图使用ps按照效果图进行切片并使用、css、js等程式码进行网页的制作，最终编写出符合w3c标准的相容各个主流浏览器的静态页面，同时还需要按照后台开发人员的要求留下一些后台资料的介面。所以说网站前端工程师更多的是程式设计而不是设计。 UI设计师一般是学美术或者设计出身，精通photoshop、AI、AE等平面设计工具，其在网站开发过程的中的职责就是按照客户或者公司的需求设计出符合客户需求和介面或者颜色符合大众视觉的网站效果，如根据不同行业的需求设计颜色、设计介面风格等，其工作的最后成果就是网站的效果图。 web前端工程师进阶学习路线如何走 less和sass什么时候学都行，1,2天就能学会。这个不著急，没有什么承上启下的作用，可以单独拿出来学。 bootstrap就是一个框架，把最主要的栅格系统看看就好。其他的大概了解能干啥就行，很多公司，是不让用bootstrap的，而是用原始码自己写。这个用一天的时间没啥问题。 node.js和angular比较重要，如果学会，算是上了一个台阶了。所以重点说说这个。 angular属于mvvm框架，一开始觉得angular挺复杂的，所以想学一个简单的，轻量级的，所以决定先学vue。但是在了解的过程中发现，很多的专业名词，没听过，或者理解不透。所以又开始从头学习node.js。在学习node.js的过程中又开始迷茫，发现了很多JS不懂的地方。 所以，又开始深入研究js的dom，函式，ajax，阵列等。总之用了很长的时间，浪费了很长时间。 最后总结一下啊。其实，没必要钻那么多牛角尖。 先做着vue的例子，不懂的地方，直接略过，很多时候，不理解的不懂的东西，用着用着，突然就能明白。照猫画虎先把VUE的例子跟着做一遍之后，同时梳理一下涉及到的JS知识点。能自己用vue做出几个小成品的时候，开始结合js研究node.js。之后再去涉及angular。 angular差不多有个大概了解的时候，反过头接着学vue，你会发现，又会发现很多新东西。 web前端这个东西特别有意思，当你达到一个高度，返回来再看以前的技术，会发现，哎呀，竟然又能发现新大陆。 厦门web前端工程师培训哪家好 培训学校很多，没有具体的衡量标准的。但是可以从几方面去选择： 1 有很多优秀导师的 2 培养出很多优秀学员的 3 只做培训的，没有做其他的 4 做的比较久的。 北京WEB前端工程师培训哪个好 建议找全程面授课程的地方学习，课程体系很重要，现在企业在用人方面讲究全栈的前端工程师人才，所在在课程选择上要慎重，学习内容要基于HTML5，要包含pc端+移动端+后端。这要才能学的系统，就业上才会有所保障。

王家 王子腾史家 史湘云 翠缕（缕儿）、葵官、周奶妈

看你是初级前端还是中级还是高级了，但是基本上都会问你这些html:行内标签有哪些，块级标签有哪些css:不定宽块的水平居中，不定高块的垂直居中，常见的样式兼容性问题js:闭包的基本概念和作用，数组去重等等另外还会问你一些技巧性的东西，比如一个网页图片很多很大，如何优化这个网页的加载等等。建议你可以加一些前端群，里面很多面试题的

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。 采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有： 设置到项目上的属性： (Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 上述方法都可以创建BFC，但是会带来一些负面影响： ::before是css3的写法，:before是css2的写法，用来设置对象前的内容 :before的兼容性要比::before好 更准确的说法 1、transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；　　　　 2、animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；　　　　 3、animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；　　　　 4、animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧； 常规方法 不需要使用transform属性时 webkit内核 参考链接： CSS实现不换行/自动换行/文本超出隐藏显示省略号 object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能 @import规则一定要先于除了@charset的其他任何CSS规则。 不推荐使用@import: 因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。 伪元素和伪类的区别总结 css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。 相关链接： CSS 继承，哪些属性能继承，哪些不能 z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。 px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块 设备像素比：dpr = 物理像素 / 逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。 css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。 css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。 1英寸（inch）=2.54厘米（cm） 手机对角线的长度换算成英寸 屏幕横向和纵向的像素点 1px即代表一个物理像素点/像素块 PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸） 1px与多少厘米之间是不能直接划等号的，需要看分辨率。 一般电脑的像素分辨率是72ppi，计算公式： (((1**2 + 1**2)**0.5)/72)*2.54 ，此时1px=0.0498cm，1cm=25px； 很多手机是300ppi，计算公式： (((1**2 + 1**2)**0.5)/300)*2.54 ，此时1px=0.0119cm。 参考链接： 画一条0.5px的线 在继承性上： 一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。 一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。 渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。

web前端面试经常问到的面试题实在太多了，建议你去网上搜索一下，或者直接下载一些面试题的集锦，然后看看就好了。

函数内声明提前，赋值位置不变，大括号内console.log(a); var a=100; 可看做 var a；console.log(a); a=100; 只声明变量a,未赋值，故为undefined.

HTML5 中如何嵌入视频?为什么HTML5里面我们不需要DTD(Document Type Definition文档类型定义)?行内元素、块级元素，空元素有那些HTML5 Canvas 元素有什么用?HTML5的form如何关闭自动完成功能?xhtml 中有哪四种模式?HTML5为什么只需要写除了 audio 和 video，HTML5 还有哪些媒体标签?link与@import导入样式的区别标准模式与混杂的的区别

(1)链接标记target属性的_self、_top、_parent、_blank、main、left、top各有何用处? target属性的_self、_top、_parent都是针对框架的。比如你写了这样一个网页page，网页page分成frame1、frame2，frame1又分成frame1-1、frame1-2，frame1-1又分成frame1-1-1，frame1-1-2。 假如你在frame1-1-1中放了一个链接。 如果这个链接的target="_self"，那么链接会在frame1-1-1中打开。 如果target="_parent"，那么链接会在frame1-1中打开。 如果target="_top"，那么链接会在page中打开。 如果target="_blank"，浏览器会另开一个新窗口显示page文档。未经验证，根据说法应该是这个意思。 (2)链接标记target属性的main、left、top各有何用处? main、left、top是由Adobe Dreamweaver生成的主、左、上框架集的框架默认名。 (3)什么是Bom什么是Dom?你如何理解Dom? DOM和BOM是JS的三大组成部分之一，下面讲解BOM与DOM以及两者的关系 DOM讲解DOM即文档对象模型，通过创建节点树来表示文档，是HTML和XML的应用程序接口（API），描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点以及设置文档中标签的属性。将一个html文档用DOM树表示如下图所示 。HTML的DOM树节点包括: 1. 元素节点：上图中<html>、<body>、<p>都是元素节点即标签2. 文本节点：向用户展示的内容，如<li>...</li>中的javascript、Dom、CSS等文本。 3. 属性节点：元素属性，如<a>标签的链接属性 BOM讲解 BOM是browser object model的缩写，简称浏览器对象模型。简单说即是javascript访问，操作浏览器的一个中介。 BOM主要用于管理浏览器窗口之间的通讯，由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。通过BOM我们可以学到与浏览器窗口交互的一些对象，可以移动，调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器，操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。因此它的核心对象是window。Window对象是BOM中所有对象的核心，是BOM中所有对象的父对象。所以，尽管frame ,history……都是window的子对象，我们只要知道BOM操作的是对象是浏览器窗口（window），那么这些对象就可以直接使用，无需通过“window.”来访问 BOM和DOM的关系 要想操作网页，需要DOM来进行访问，但是仅仅只是网页内容。浏览器除了有显示的内容，还有一个重要的部分就是一个载体，它承载我们看到的内容。好比是一个框架，而操作这个载体的对象我们把它叫做BOM。所以这样的结构，使得BOM，DOM各司其职，BOM负责跟浏览器框架打交道，DOM负责浏览器内容Document打交道。从上图中能更好的理解两者的关系。

网页分成三个层次，即：结构层、表示层、行为层。结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

程序员技术面试是永远都不会缺席的，所以为了能够让大家顺利的通过面试，我们今天就一起来了解一下，与html相关的一些面试题都有哪些。1、什么是盒子模型?有些面试官会问你对盒子模型的理解，在我们平时看到的网页中，内部的每一个标签元素它都是有几个部分构成的：内容(content)、外边距(margin)、内边距(padding)、边框(border)，四个部分组成，当你说完这些面试官是不会满意这个答案的，因为还有一个重点(IE盒模型和标准盒模型的区别)———IE盒模型的content包括border、padding本文由@IT·平头哥联盟-席填坑官?苏南分享2、页面导入样式时有几种方法，它们之间有区别?link标签引入，也是当下用的多的一种方式，它属于XHTML标签，除了能加载css外，还能定义rel、type、media等属性;@import引入，@import是CSS提供的，只能用于加载CSS;style嵌入方式引入，减少页面请求(优点)，但只会对当前页面有效，无法复用、会导致代码冗余，不利于项目维护(缺点)，此方式一般只会项目主站页使用(腾讯、淘宝、网易、搜狐)等大型网站主页，之前有看到过都是这种方式，但后来有些也舍弃了小结：link页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载,且link是XHTML标签，无兼容问题;link支持动态js去控制DOM节点去改变样式，而@import不支持，3、简单讲述一下块元素、内联元素、空元素有哪些，它们之间的区别?行内元素有：a、b、span、img、input、select、textarea、em、img、strong(强调的语气);块级元素有：ul、ol、li、dl、dt、dd、h1、h2、h3、h4p、section、div、form等;空元素：inputtype="hidden"/>、br>、hr>、link>、meta>;小结：块元素总是独占一行，margin对内联元素上下不起作用;4、说说cookies，sessionStorage、localStorage你对它们的理解?cookie是网站为了标示用户身份而储存在用户本地终端上的数据(通常经过加密)，cookie数据始终在同源的http请求中携带，记会在浏览器和服务器间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。大小：cookie数据大小不能超过4k,sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。时效：localStorage存储持久数据，电脑培训发现浏览器关闭后数据不丢失除非用户主动删除数据或清除浏览器/应用缓存;sessionStorage数据在当前浏览器窗口关闭后自动删除。

前端不缺，缺的是好前端

这个你可以去网上搜一下一大堆，牛客网里就有不少面试题你可以去看看，我感觉是不错的，你也可以试试。

我最开始接触是在Vue的官网上，开始是作为一个小节出现，现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。 服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。 回顾下前端的 历史 ，最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户，用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷，这种‘兼职"状态已经不能满足需求，细分之下的前端出现了。 随后为了方便的开发，开始提倡 前后端分离，大家各做各的，彼此之间通过基于HTTP的各种API协作，变成了数据动态生成的新一代站点。 再后来出现了Vue等三大MV*框架，网站做成了SPA应用，解决了很多问题的同时也带来了新问题，其中最突出的两个：难以SEO和首屏加载缓慢。 想要了解更多关于前端技术内容欢迎关注尚硅谷教育！ 前端安全相关面试题 前端JS高阶面试题 前端设计模式-面试题 web前端渲染优化 web前端之二叉搜索树

HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML 元素必须被正确地嵌套。XHTML 元素必须被关闭。标签名必须用小写字母。XHTML 文档必须拥有根元素。3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug4.行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素：div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容，border ,margin，padding5.CSS引入的方式有哪些? link和@import的区别是?内联 内嵌 外链 导入区别 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持Link 支持使用javascript改变样式，后者不可6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?标签选择符 类选择符 id选择符继承不如指定 Id>class>标签选择后者优先级高7.前端页面有哪三层构成，分别是什么?作用是什么?结构层 Html 表示层 CSS 行为层 js8.css的基本语句构成是?选择器{属性1:值1;属性2:值2;……}9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)10.写出几种IE6 BUG的解决方法1.双边距BUG float引起的 使用display2.3像素问题 使用float引起的 使用dislpay:inline -3px3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active4.Ie z-index问题 给父级添加position:relative5.Png 透明 使用js代码 改6.Min-height 最小高度 ！Important 解决"7.select 在ie6下遮盖 使用iframe嵌套8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）11.标签上title与alt属性的区别是什么?Alt 当图片不显示是 用文字代表。Title 为该属性提供信息12.描述css reset的作用和用途。Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一13.解释css sprites，如何使用。Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量14.浏览器标准模式和怪异模式之间的区别是什么?盒子模型 渲染模式的不同使用 window.top.document.compatMode 可显示为什么模式15.你如何对网站的文件和资源进行优化?期待的解决方案包括：文件合并文件最小化/文件压缩使用CDN托管缓存的使用16.什么是语义化的HTML?直观的认识标签 对于搜索引擎的抓取有好处17.清除浮动的几种方式，各自的优缺点1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）3.是用afert伪元素清除浮动(用于非IE浏览器)Javascript1.javascript的typeof返回哪些数据类型Object number function boolean underfind2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（== – ===）3.split() join() 的区别前者是切割成数组的形式，后者是将数组转换成字符串4.数组方法pop() push() unshift() shift()Push()尾部添加 pop()尾部删除Unshift()头部添加 shift()头部删除5.事件绑定和普通事件有什么区别6.IE和DOM事件流的区别1.执行顺序不一样、2.参数不一样3.事件加不加on4.this指向问题7.IE和标准下有哪些兼容性的写法Var ev = ev || window.eventdocument.documentElement.clientWidth || document.body.clientWidthVar target = ev.srcElement||ev.target8.ajax请求的时候get 和post方式的区别一个在url后面 一个放在虚拟载体里面有大小限制安全问题应用不同 一个是论坛等只需要请求的，一个是类似修改密码的9.call和apply的区别Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)10.ajax请求时，如何解释json数据使用eval parse 鉴于安全性考虑 使用parse更靠谱11.b继承a的方法12.写一个获取非行间样式的函数function getStyle(obj,attr,value){if(!value){if(obj.currentStyle){return obj.currentStyle(attr)}else{obj.getComputedStyle(attr,false)}}else{obj.style[attr]=value}}13.事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！http://www.webasily.com/?p=78 例子可见此链接14.闭包是什么，有什么特性，对页面有什么影响闭包就是能够读取其他函数内部变量的函数。深入理解JavaScript的闭包特性 如何给循环中的对象添加事件 此链接可查看（问这个问题的不是一个公司）15.如何阻止事件冒泡和默认事件canceBubble return false16.添加 删除 替换 插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild17.解释jsonp的原理，以及为什么不是真正的ajax动态创建script标签，回调函数Ajax是页面无刷新请求数据操作18.javascript的本地对象，内置对象和宿主对象本地对象为array obj regexp等可以new实例化内置对象为gload Math 等不可以实例化的宿主为浏览器自带的document,window 等19.document load 和document ready的区别Document.onload 是在结构和样式加载完才执行jsDocument.ready原生种没有这个方法，jquery中有 $().ready(function)20.”==”和“===”的不同前者会自动转换类型后者不会21.javascript的同源策略一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合22.编写一个数组去重的方法function oSort(arr){var result ={};var newArr=[];for(var i=0;i<arr.length;i++){if(!result[arr]){newArr.push(arr)result[arr]=1}}return newArr}

一、html+css部分、（1）css盒模型，可能会要求手写一个布局，这个布局基本上用到的css是margin的负值，boxing-sizing：border-box，布局尽量往这方面想。浏览器布局的基本元素是盒，在w3c的标准模式下，width=width，但是在怪异模式下，width=border*2+padding*2+width;其中后代元素的width：100%；参照的是右边的那个width，（2）html5的新特性1、标签语义化，比如header，footer，nav，aside，article，section等，新增了很多表单元素，入email，url等，除去了center等样式标签，还有除去了有性能问题的frame，frameset等标签2、音视频元素，video，audio的增加使得我们不需要在依赖外部的插件就可以往网页中加入音视频元素。3、新增很多api，比如获取用户地理位置的window.navigator.geoloaction，4、websocketwebsocket是一种协议，可以让我们建立客户端到服务器端的全双工通信，这就意味着服务器端可以主动推送数据到客户端，5、webstorage，webstorage是本地存储，存储在客户端，包括localeStorage和sessionStorage，localeStorage是持久化存储在客户端，只要用户不主动删除，就不会消失，sessionStorage也是存储在客户端，但是他的存在时间是一个回话，一旦浏览器的关于该回话的页面关闭了，sessionStorage就消失了，6、缓存html5允许我们自己控制哪些文件需要缓存，哪些不需要，具体的做法如下：1、首先给html添加manifest属性，并赋值为cache.manifest2、cache.manifest的内容为:CACHE MANIFEST#v1.2CACHE : //表示需要缓存的文件a.jsb.jsNETWORK: //表示只在用户在线的时候才需要的文件，不会缓存c.jsFALLBACK/ /index.html //表示如果找不到第一个资源就用第二个资源代替7、web worker，web worker是运行在浏览器后台的js程序，他不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程，这样在进行复杂且耗时的操作时就不会阻塞主线程了。（3）对html5的语义话的理解html5的语义化指的是用正确的标签包含正确的内容，比如nav标签，里面就应该包含导航条的内容，而不是用做其他的用途，标签语义化的好处就是结构良好，便于阅读，方便威化，也有利于爬虫的查找，提高搜索率。（4）cookie，sessionStorage，localeStorage的区别cookie是存储在浏览器端，并且随浏览器的请求一起发送到服务器端的，它有一定的过期时间，到了过期时间自动会消失。sessionStorage和localeStorage也是存储在客户端的，同属于web Storage，比cookie的存储大小要大有8m，cookie只有4kb，localeStorage是持久化的存储在客户端，如果用户不手动清除的话，不会自动消失，会一直存在，sessionStorage也是存储在客户端，但是它的存活时间是在一个回话期间，只要浏览器的回话关闭了就会自动消失。（5）多个页面之间如何进行通信使用cookie，使用web worker，使用localeStorage和sessionStorage（6）浏览器的渲染过程1、首先获取html，然后构建dom树2、其次根据css构建render树，render树中不包含定位和几何信息3、最后构建布局数，布局是含有元素的定位和几何信息（7）重构、回流浏览器的重构指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程。重构不会引发页面的重新布局，不一定伴随着回流，回流指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置的，他的开销是非常大的，回流可以理解为渲染树需要重新进行计算，一般最好触发元素的重构，避免元素的回流；比如通过通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了，比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。二、JavaScript部分（1）JavaScript的数据类型基本数据类型：Number，String，Boolean，Undefined，Null复杂数据类型：Object，Array，Function，RegExp，Date，Error全局数据类型：Math（2）JavaScript的闭包闭包简单的说就是一个函数能访问外部函数的变量，这就是闭包，比如说：function a(x){var tem=3;function b(y){console.log(x+y+(++tem));}}a函数中的b函数就是闭包了，b函数可以使用a函数的局部变量，参数，最典型的闭包应该是下面这样，将定义在函数中的函数作为返回值function a(x){var tem=3;function b(y){console.log(x+y+(++tem));}return b;}闭包的另一种作用是隔离作用域，请看下面这段代码for(var i=0;i<2;i++){setTimeout(function(){console.log(i);},0);}上面这段代码的执行结果是2,2而不是0,1，因为等for循环出来后，执行setTimeout中的函数时，i的值已经变成了2，这就是没有隔离作用域所造成的，请看下面代码for(var i=0;i<2;i++){(function(i){setTimeout(function(){console.log(i);},0)})(i);}这样就会输出0,1，我们的立即执行函数创建了一个作用域，隔离了外界的作用域，闭包的缺点是，因为内部闭包函数可以访问外部函数的变量，所以外部函数的变量不能被释放，如果闭包嵌套过多，会导致内存占用大，要合理使用闭包。（3）new 操作符到底做了什么首先，new操作符为我们创建一个新的空对象，然后this变量指向该对象，其次，空对象的原型执行函数的原型，最后，改变构造函数内部的this的指向代码如下：var obj={};obj.__proto__=fn.prototype;fn.call(obj);（4）改变函数内部this指针的指向函数call和apply，假设要改变fn函数内部的this的指向，指向obj，那么可以fn.call(obj);或者fn.apply(obj);那么问题来了，call和apply的区别是什么，其是call和apply的区别在于参数，他们两个的第一个参数都是一样的，表示调用该函数的对象，apply的第二个参数是数组，是[arg1,arg2,arg3]这种形式，而call是arg1,arg2,arg3这样的形式。还有一个bind函数，var bar=fn.bind(obj);那么fn中的this就指向obj对象了，bind函数返回新的函数，这个函数内的this指针指向obj对象。（5）JavaScript的作用域和作用域链JavaScript的作用域指的是变量的作用范围，内部作用域由函数的形参，实参，局部变量，函数构成，内部作用域和外部的作用域一层层的链接起来形成作用域链，当在在函数内部要访问一个变量的时候，首先查找自己的内部作用域有没有这个变量，如果没有就到这个对象的原型对象中去查找，还是没有的话，就到该作用域所在的作用域中找，直到到window所在的作用域，每个函数在声明的时候就默认有一个外部作用域的存在了，比如：var t=4;function foo(){var tem=12;funciton bar(){var temo=34;console.log(t+" "+tem+" "+temo);}}bar找t变量的过程就是，先到自己的内部作用域中找，发现没有找到，然后到bar所在的最近的外部变量中找，也就是foo的内部作用域，还是没有找到，再到window的作用域中找，结果找到了（6）JavaScript的继承function A(name){ this.name=name; }A.prototype.sayName=function(){ console.log(this.name); }function B(age){ this.age=age; }原型继承B.prototype=new A("mbj"); //被B的实例共享var foo=new B(18);foo.age; //18,age是本身携带的属性foo.name; //mbj，等价于foo.__proto__.namefoo.sayName(); //mbj,等价于foo.__proto__.proto__.sayName()foo.toString(); //"[object Object]",等价于foo.__proto__.__proto__.__proto__.toString();这样B通过原型继承了A，在new B的时候，foo中有个隐藏的属性__proto__指向构造函数的prototype对象，在这里是A对象实例，A对象里面也有一个隐藏的属性__proto__,指向A构造函数的prototype对象，这个对象里面又有一个__proto__指向Object的prototype这种方式的缺第一个缺点是所有子类共享父类实例，如果某一个子类修改了父类，其他的子类在继承的时候，会造成意想不到的后果。第二个缺点是在构造子类实例的时候，不能给父类传递参数。构造函数继承function B(age,name){ this.age=age;A.call(this,name); }var foo=new B(18,"wmy");foo.name; //wmyfoo.age; //18foo.sayName(); //undefined采用这种方式继承是把A中的属性加到this上面，这样name相当于就是B的属性，sayName不在A的构造函数中，所以访问不到sayName。这种方法的缺点是父类的prototype中的函数不能复用。原型继承+构造函数继承function B(age,name){ this.age=age;A.call(this,name); }B.prototype=new A("mbj");var foo=new B(18,"wmy");foo.name; //wmyfoo.age; //18foo.sayName(); //wmy这样就可以成功访问sayName函数了，结合了上述两种方式的优点，但是这种方式也有缺点，那就是占用的空间更大了。（7）JavaScript变量提升请看下面代码var bar=1;function test(){console.log(bar); //undeifnedvar bar=2;console.log(bar); //2}test();为什么在test函数中会出现上述结果呢，这就是JavaScript的变量提升了，虽然变量bar的定义在后面，不过浏览器在解析的时候，会把变量的定义放到最前面，上面的test函数相当于function test(){var bar;console.log(bar); //undefinedbar=2;console.log(bar); //2}再看var foo=function(){ console.log(1); }function foo(){ console.log(2); }foo(); //结果为1同样的，函数的定义也会到提升到最前面，上面的代码相当于function foo(){ console.log(2); }var foo;foo=funciton(){ console.log(1); }foo(); //1（8）JavaScript事件模型原始事件模型，捕获型事件模型，冒泡事件模型，原始事件模型就是ele.onclick=function(){}这种类型的事件模型冒泡事件模型是指事件从事件的发生地（目标元素），一直向上传递，直到document，捕获型则恰好相反，事件是从document向下传递，直到事件的发生地（目标元素）IE是只支持冒泡事件模型的，下面是兼容各个浏览器的事件监听代码EventUtil={addListener:function(target,type,handler){if(target.addEventListener){target.addEventListener(type,handler);}else if(target.attachEvent){target.attach("on"+type,function(){handler.call(target); //让handler中的this指向目标元素});}else{target["on"+type]=handler;}},removeListener:function(target,type,handler){if(target.removeEventListener){target.removeEventListener(type,handler);}else if(target.detachEvent){target.detachEvent("on"+type,handler);}else{target["on"+type]=null;}},getEvent:function(e){ //获取事件对象var evt=window.event||e;return evt;},getTarget:function(e){ //获得目标对象var evt=EventUtil.getEvent(e);var target;if(evt.target){ target=evt.target;}else {target=evt.srcElement;}return target;},stopPropagation:function(e){ //停止冒泡var evt=EventUtil.getEvent(e);if(evt.stopPropagation) {evt.stopPropagation();}else {evt.cancelBubble=true;}},preventDefault:function(e){ //阻值默认行为的发生var evt=EventUtil.getEvent(e);if(evt.preventDefault){ evt.preventDefault(); }else {e.returnValue=false;}}}（9）内存泄漏内存泄漏指的是浏览器不能正常的回收内存的现象（10）浏览器的垃圾回收机制垃圾收集器必须跟踪哪个变量有用哪个变量没用，对于不再有用的变量打上标记，以备将来收回其占用的内存，内存泄露和浏览器实现的垃圾回收机制息息相关， 而浏览器实现标识无用变量的策略主要有下两个方法：第一，引用计数法跟踪记录每个值被引用的次数。当声明一个变量并将引用类型的值赋给该变量时，则这个值的引用次数就是1。如果同一个值又被赋给另一个变量，则该值的引用次 数加1.相反，如果包含对这个值引用的变量又取得另外一个值，则这个值的引用次数减1.当这个值的引用次数变成0时，则说明没有办法访问这个值了，因此就 可以将其占用的内存空间回收回来。如： var a = {}; //对象{}的引用计数为1b = a; //对象{}的引用计数为 1+1a = null; //对象{}的引用计数为2-1所以这时对象{}不会被回收;IE 6, 7 对DOM对象进行引用计数回收， 这样简单的垃圾回收机制，非常容易出现循环引用问题导致内存不能被回收， 进行导致内存泄露等问题，一般不用引用计数法。第二，标记清除法到2008年为止，IE,Firefox,Opera,Chrome和Safari的javascript实现使用的都是标记清除式的垃圾收集策略（或类似的策略），只不过垃圾收集的时间间隔互有不同。标记清除的算法分为两个阶段，标记(mark)和清除(sweep). 第一阶段从引用根节点开始标记所有被引用的对象，第二阶段遍历整个堆，把未标记的对象清除。（11）同源策略同源策略是浏览器有一个很重要的概念。所谓同源是指，域名，协议，端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况下，不能读写对方的资源。简单的来说，浏览器允许包含在页面A的脚本访问第二个页面B的数据资源，这一切是建立在A和B页面是同源的基础上。（12）跨域的几种方式jsonp（利用script标签的跨域能力）跨域、websocket（html5的新特性，是一种新协议）跨域、设置代理服务器（由服务器替我们向不同源的服务器请求数据）、CORS（跨源资源共享，cross origin resource sharing）、iframe跨域、postMessage(包含iframe的页面向iframe传递消息)（13）异步和同步同步指下一个程序的执行需要等到上一个程序执行完毕，也就是得出结果后下一个才能执行，异步指的是上一个程序指向后，下一个程序不用等到上一个程序出结果就能执行，等上一个出结果了调用回调函数处理结果就好。（14）JavaScript的值类型和引用类型JavaScript有两种类型的数据，值类型和引用类型，一般的数字，字符串，布尔值都是值类型，存放在栈中，而对象，函数，数组等是引用类型，存放在堆中，对引用类型的复制其实是引用复制，相当于复制着地址，对象并没有真正的复制。var a=5;var b=a;a=null; //那么b是5var a={},var b=a;b.name="mbj";console.log(a.name); //mbj，因为a，b指向同一个对象a=null;console.log(typeof b); //object，a=null，只是a不再指向该对象，但是这个对象还是在堆中确确实实的存在，b依然指向它。（15）优化下面代码var str="我喜欢我可爱的女朋友，"； str=str+"她叫喵喵，"; str=str+"她时而可爱，时而认真，"; str=str+"她那天真的笑声可以让人忘掉一切烦恼。"; console.log(str);这里的优化主要是对加号操作符的优化，因为加号在JavaScript中非常耗时和耗内存，需要经过以下六步：1、首先开辟一块临时空间，存储字符串，2、然后在开辟一块空间3、把str中的字符串复制到刚刚开辟的空间 4、在把需要连接的字符串复制到str后面 5、str指向这块空间 6、回收str原来的空间和临时空间优化的方法是使用数组的push方法，数组是连续的存储空间，可以省下很多步var res=[];var str="我喜欢我可爱的女朋友，"； res.push(str);res.push("她叫喵喵，");res.push("她时而可爱，时而认真，");res.push("她那天真的笑声可以让人忘掉一切烦恼。");console.log(res.join(""));（16）封装cookie的添加，删除，查询方法cookie是存储在浏览器端的，可以用于存储sessionID，也可以用于自动登陆，记住密码等，但是在浏览器端并没有官方的操作cookie的方法，下面我们来封装一下：CookieUtil=｛addCookie:function(key,value,options){var str=key+"="+escape(value);if(options.expires){var curr=new Date(); //options.expires的单位是小时curr.setTime(curr.getTime()+options.expires*3600*1000);options.expires=curr.toGMTString();}for(var k in options){ //有可能指定了cookie的path，cookie的domainstr+=";"+k+"="+options[k];}document.cookie=str;},queryCookie:function(key){var cookies=document.cookie;//获得浏览器端存储的cookie,格式是key=value;key=value;key=valuecookies+=";";var start=cookies.indexOf(key);if(start<=-1){ return null; } //说明不存在该cookievar end=cookies.indexOf(";",start);var value=cookies.slice(start+key.length+1,end);return unescape(value);},deleteCookie:function(key){var value=CookieUtil.queryCookie(key);if(value===null){return false;}CookieUtil.addCookie(key,value,{expires:0});//把过期时间设置为0，浏览器会马上自动帮我们删除cookie}｝（17）事件委托机制事件委托指的是，不再事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数，这样可以大大提高性能，因为可以减少绑定事件的元素，比如：

防抖 节流 误区：我们经常说get请求参数的大小存在限制，而post请求的参数大小是无限制的。 实际上HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。为了明确这个概念，我们必须再次强调下面几点: 补充补充一个get和post在缓存方面的区别： 可从IIFE、AMD、CMD、CommonJS、UMD、webpack(require.ensure)、ES Module、 vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。在vue的diff函数中（建议先了解一下diff算法过程）。在交叉对比中，当新节点跟旧节点 头尾交叉对比 没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。map映射的速度更快。vue部分源码如下： 创建map函数 遍历寻找 在React中， 如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.state 。所谓“除此之外”，指的是绕过React通过addEventListener直接添加的事件处理函数，还有通过setTimeout/setInterval产生的异步调用。 **原因：**在React的setState函数实现中，会根据一个变量isBatchingUpdates判断是直接更新this.state还是放到队列中回头再说，而isBatchingUpdates默认是false，也就表示setState会同步更新this.state，但是， 有一个函数batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理过程setState不会同步更新this.state 。 虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。 具体实现步骤如下： 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。 结构：display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击， visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击 继承：display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。 性能：displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大 visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少 联系：它们都能让元素不可见 常用的一般为三种 .clearfix , clear:both , overflow:hidden ; 比较好是 .clearfix ,伪元素万金油版本,后两者有局限性. clear:both :若是用在同一个容器内相邻元素上,那是贼好的,有时候在容器外就有些问题了, 比如相邻容器的包裹层元素塌陷 overflow:hidden :这种若是用在同个容器内,可以形成 BFC 避免浮动造成的元素塌陷 概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。 优点： 缺点： block 元素特点： 1.处于常规流中时，如果 width 没有设置，会自动填充满父容器 2.可以应用 margin/padding 3.在没有设置高度的情况下会扩展高度以包含常规流中的子元素 4.处于常规流中时布局时在前后元素位置之间（独占一个水平空间） 5.忽略 vertical-align inline 元素特点 1.水平方向上根据 direction 依次布局 2.不会在元素前后进行换行 3.受 white-space 控制 4. margin/padding 在竖直方向上无效，水平方向上有效 5. width/height 属性对非替换行内元素无效，宽度由元素内容决定 6.非替换行内元素的行框高由 line-height 确定，替换行内元素的行框高由 height , margin , padding , border 决定 7.浮动或绝对定位时会转换为 block 8. vertical-align 属性生效 GIF : JPEG ： PNG ： 七种数据类型 (ES6之前)其中5种为基本类型: string , number , boolean , null , undefined , ES6出来的 Symbol 也是原始数据类型 ，表示独一无二的值 Object 为引用类型(范围挺大),也包括数组、函数, 输出结果是： 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; 单例模式 只能被实例化(构造函数给实例添加属性与方法)一次 沙箱模式 将一些函数放到自执行函数里面,但要用闭包暴露接口,用变量接收暴露的接口,再调用里面的值,否则无法使用里面的值 1.字面量 2.Object构造函数创建 3.使用工厂模式创建对象 4.使用构造函数创建对象 HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件onclick、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流：事件流描述的是从页面中接收事件的顺序,DOM2级事件流包括下面几个阶段。 addEventListener ： addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 IE只支持事件冒泡 。 获取一个对象的原型，在chrome中可以通过__proto__的形式，或者在ES6中可以通过Object.getPrototypeOf的形式。 那么Function.proto是什么么？也就是说Function由什么对象继承而来，我们来做如下判别。 我们发现Function的原型也是Function。 我们用图可以来明确这个关系： 这里来举个栗子，以 Object 为例，我们常用的 Object 便是一个构造函数，因此我们可以通过它构建实例。 则此时， 实例为instance , 构造函数为Object ，我们知道，构造函数拥有一个 prototype 的属性指向原型，因此原型为: 这里我们可以来看出三者的关系: 在 JS 中，继承通常指的便是 原型链继承 ，也就是通过指定原型，并可以通过原型链继承原型上的属性或者方法。 在函数式编程中，函数是一等公民。那么函数柯里化是怎样的呢？ 函数柯里化指的是将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数的技术。 函数柯里化的主要作用和特点就是参数复用、提前返回和延迟执行。 在一个函数中，首先填充几个参数，然后再返回一个新的函数的技术，称为函数的柯里化。通常可用于在不侵入函数的前提下，为函数 预置通用参数 ，供多次重复调用。 call 和 apply 都是为了解决改变 this 的指向。作用都是相同的，只是传参的方式不同。 除了第一个参数外， call 可以接收一个参数列表， apply 只接受一个参数数组。 bind 和其他两个方法作用也是一致的，只是该方法会返回一个函数。并且我们可以通过 bind 实现柯里化。 如何实现一个 bind 函数 对于实现以下几个函数，可以从几个方面思考 如何实现一个call函数 如何实现一个apply函数 箭头函数其实是没有 this 的，这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this 。在这个例子中，因为调用 a 符合前面代码中的第一个情况，所以 this 是 window 。并且 this 一旦绑定了上下文，就不会被任何代码改变。 关于 let 的是否存在变量提升，我们何以用下面的例子来验证： let 变量如果不存在变量提升， console.log(name) 就会输出 ConardLi ，结果却抛出了 ReferenceError ，那么这很好的说明了， let 也存在变量提升，但是它存在一个“暂时死区”，在变量未初始化或赋值前不允许访问。 变量的赋值可以分为三个阶段： 关于 let 、 var 和 function ： 依次输出：undefined -> 10 -> 20 答案: D colorChange 方法是静态的。静态方法仅在创建它们的构造函数中存在，并且不能传递给任何子级。由于 freddie 是一个子级对象，函数不会传递，所以在 freddie 实例上不存在 freddie 方法：抛出 TypeError 。 1.使用第一次push，obj对象的push方法设置 obj[2]=1;obj.length+=1 2.使用第二次push，obj对象的push方法设置 obj[3]=2;obj.length+=1 3.使用console.log输出的时候，因为obj具有 length 属性和 splice 方法，故将其作为数组进行打印 4.打印时因为数组未设置下标为 0 1 处的值，故打印为empty，主动 obj[0] 获取为 undefined undefined {n:2} 首先，a和b同时引用了{n:2}对象，接着执行到a.x = a = {n：2}语句，尽管赋值是从右到左的没错，但是.的优先级比=要高，所以这里首先执行a.x，相当于为a（或者b）所指向的{n:1}对象新增了一个属性x，即此时对象将变为{n:1;x:undefined}。之后按正常情况，从右到左进行赋值，此时执行a ={n:2}的时候，a的引用改变，指向了新对象{n：2},而b依然指向的是旧对象。之后执行a.x = {n：2}的时候，并不会重新解析一遍a，而是沿用最初解析a.x时候的a，也即旧对象，故此时旧对象的x的值为{n：2}，旧对象为 {n:1;x:{n：2}}，它被b引用着。后面输出a.x的时候，又要解析a了，此时的a是指向新对象的a，而这个新对象是没有x属性的，故访问时输出undefined；而访问b.x的时候，将输出旧对象的x的值，即{n:2}。 在比较相等性，原始类型通过它们的值进行比较，而对象通过它们的引用进行比较。 JavaScript 检查对象是否具有对内存中相同位置的引用。 我们作为参数传递的对象和我们用于检查相等性的对象在内存中位于不同位置，所以它们的引用是不同的。 这就是为什么 { age: 18 } === { age: 18 } 和 { age: 18 } == { age: 18 } 返回 false 的原因。 所有对象键（不包括 Symbols ）都会被存储为字符串，即使你没有给定字符串类型的键。这就是为什么 obj.hasOwnProperty（"1"） 也返回 true 。 上面的说法不适用于 Set 。在我们的 Set 中没有 “1” ： set.has（"1"） 返回 false 。它有数字类型 1 ， set.has（1） 返回 true 。 这题考察的是对象的键名的转换。 catch 块接收参数 x 。当我们传递参数时，这与变量的 x 不同。这个变量 x 是属于 catch 作用域的。 之后，我们将这个块级作用域的变量设置为 1 ，并设置变量 y 的值。现在，我们打印块级作用域的变量 x ，它等于 1 。 在 catch 块之外， x 仍然是 undefined ，而 y 是 2 。当我们想在 catch 块之外的 console.log(x) 时，它返回 undefined ，而 y 返回 2 。

您好：您这样说太乱了有没有感觉？有是速度慢，又是标签不对，又是图片路径等等。你就算把所有问题都讲完，面试的人也不一定能感觉你出彩。你要懂得分类。你可以这样说：您好，我刚才大体看了下网站。我个人感觉有以下几类问题。1.网站整体风格，结合公司的性质来说。2.网站用户体验性，SEO优化问题，包括：html布局，title标签，网站关键词keyword等等。3.网站性能，通过浏览器的性能分析工具来看看就行。F12。...这样不仅让面试官能清楚的认识到你的逻辑条理性，并且能展示你的专业水平。

呵呵哈哈哈姐姐斤斤计较

前端面试一问三不知的时候，千万别慌乱，可以先停一停和面试官说这个问题你需要思考一下再回答，或者说你因为太紧张之类的一时想不起来答案。有些面试官会直接电话过去要求面试，由于面试者(尤其是学生)处于弱势方，可能并不会拒绝面试要求，但并不意味着面试者处于最佳的物理和精神状态下，有可能会导致面试者不能很好的发挥自己原有的实力。所以如果面试官突然打电话过来。没有准备好的话，不要怕冒犯面试官，一定要另外约个时间，面试官肯定会再打过来的。遭到否定面试官有可能会否定你描述的一些东西，有可能是你字眼写的太过，比如将“熟悉”的东西写成了“精通”，勾起了面试官的“好奇”。有可能故意试压，考验你的反应，但遇到否定的时候，不要急于反驳或者是手足无措，而是询问自省和主动讨论。气场不和有的面试官性格严谨沉闷，而面试者可能思维活跃，整个面试过程可能会变成面试官不停的打断面试者让其思维聚焦。而面试者感到思维不停被打断，很是气恼，影响发挥。这种情况不可避免，但遇到这样的面试官，请保持谦和的态度，重点是展示自己技术的广度、深度，气场不和并不会产生决定性的影响，面试官也不会因为这样的原因而给与错误的评判。尽量留下好的印象。结束通知有的面试官会在面试结束后说：“我的问题问完了，如果有进一步消息的话，我们会再联系你”。面试的大部分结果，其实当场就出来了，如果你感觉给出结果的时间点不够明确，可以反问他：“如果三天内没有联系，是不是就代表没有通过？”省得让你怀有不确切的希望。最后，还可以挽留下面试官，讲讲这场面试中你的一些疑惑，获得面试官的反馈，也可以知道自己目前哪一方面做得不足。面试中面对不会的问题面试中遇到问题不会回答，这是非常正常的，毕竟大家在学习过程中遇到的问题，跟我们在工作中遇到的问题是非常不一样的。除此之外，我们看问题的角度，也是有差别很大的。举个例子，很多人都在看ReactFiber，但是如果问你们，为什么要有Fiber这个东西，可能很多人都回答不上来，因为大家只在社区里面看到说，Fiber是怎么工作的啊。但是为什么要有Fiber？如果没有会怎样，而这种思考，其实是非常底层的。我相信，很多人可能都没有思考过。那如果遇到的问题不会，你可以先选择不会，说我觉得自己没有信心能答出这个问题，当然我更希望听到你说。我现在不会，但是你给我两分钟思考一下，我想一下这个问题有没有答案？我觉得这是一个很好的思考习惯，首先你在面对不会的东西是坦然的，我当下不会，很正常，我之前没有思考过这个问题嘛，那我们再花两分钟思考一下。给一个初步的答案。所以说遇到问题，也不用不会就不会，也可以有一个积极的方式回应。从面试官的角度来说，面试中考察的题目，并不是仅仅考察这道题目本身，题目的对错并不跟最终结果直接挂钩。面试官更希望以题目为契机。考察面试者分析问题，解决问题的能力，以及交流过程中所体现的逻辑推理和思维方式等。跟面试官聊业务业务跟项目是完全不一样的东西，业务认知和思考也是很重要的一个考察点，这方面面试官可能会问两个点：业务场景和技术突破。业务场景：面试官会询问面试者他们的产品、业务模式、商业模式等，了解下面试者对于产品的诞生、定位、发展的认知。技术突破：技术与业务相结合这点在阿里也是一直在说但鲜有人做的非常好的地方，所以有的时候也会考察面试者。看看他们所做的技术是如何从业务出发、给业务带来了哪些改变以及如何去评估两者之间产生的结果。面试结束反向互动面试官在挂断之前，基本会给与候选人反问的机会，一般会表述为“你有什么要问我的吗”？无论面试的怎样。都希望你能说出心中的疑惑，比如面试中的某个题目、整体的评价反馈、你的建议或者了解所负责的业务，所在的团队等等，而从面试官的角度来看，如果候选人愿意反问你问题，至少能证明他是个好学的人。所以不要放弃这个互动的机会。面试反馈每场面试结束后，面试官都会在系统里留下面试反馈，如果面试失败，简历会放在人才库里，很多人会在其中捞取简历，以后的面试官也可以看到之前所有的面试记录，之所以讲到这一点，是希望大家在面试中能够保持谦和积极的心态。认真面对每一场面试，即使这场面试没有成功，但如果展示了好的品质，也会增加被发掘的机会，为你以后面试成功铺路。保持联络如果跟面试官聊的比较好，可以请求加个微信之类的，面试是一个长期的事情，哪怕此次面试没有通过。以后还可能面试进来的，与面试官保持联络。前端面试题笔记面试会了，面试题也不能落下，这套面试笔记除了有CSS、JS、Vue、React、性能优化、服务器端口、设计模式、数据结构和算法面试题外，加了手写代码面试题。这下面试官让我们写代码也不怕啦！CSS问题flex布局css3的新特性img中alt和title的区别用纯CSS创建一个三角形如何理解CSS的盒子模型？如何让一个div水平居中如何让一个div水平垂直居中如何清除浮动。

360前端开发工程师面试题 　　1.下面代码的输出值是? 　　alert(1&&2) 　　2.正则表达式匹配，开头为11N, 12N或1NNN，后面是-7-8个数字的电话号码。 　　3.写出下面代码的`输出值： 　　var obj = { 　　a: 1, 　　b: function () {console.log(this.a)} 　　}; 　　var a = 2; 　　var objb = obj.b; 　　obj.b(); 　　objb(); 　　obj.b.call(window); 　　4.写出下列代码的输出值： 　　function A() { 　　} 　　function B(a) { 　　this.a = a; 　　} 　　function C(a) { 　　if (a) { 　　thia.a = a; 　　} 　　} 　　A.prototype.a = 1; 　　B.prototype.a = 1; 　　C.prototype.a = 1; 　　console.log(new A()); 　　console.log(new B()); 　　console.log(new C(2)); 　　5.写出下列代码的输出值： 　　var a = 1; 　　function b() { 　　var a = 2; 　　function c() { 　　console.log(a); 　　} 　　return c; 　　} 　　b()(); 　　HTML&CSS 　　1.写出下列代码在各个浏览器中的颜色值? 　　background: red; 　　_background: green; 　　*background: blue; 　　background: black9; 　　2.添加些css让其水平垂直居中。 　　颜海镜 　　3.如下代码，在空白处填写代码，是其点击时，前景色为白色，背景色为黑色。 　　颜海镜 　　4.书写代码，点击时从1分钟开始，每秒递减到0。 　　颜海镜 　　5.简述在IE下mouseover和mouseenter的区别? ;

参考链接： juejin.im/post/5e8d52… animation、transition、transform、translate 这几个属性要搞清楚： 水平居中： 垂直居中 BFC 是块级格式上下文，IFC 是行内格式上下文： 不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。 box-sizing 属性可以被用来调整这些表现: BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。 五种： BFC 的特性： CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括： 外边距（margin） 、 边框（border） 、 内边距（padding） 、 实际内容（content） 四个属性。 CSS盒模型： 标准模型 + IE模型 标准盒子模型：宽度=内容的宽度（content）+ border + padding 低版本IE盒子模型：宽度=内容宽度（content+border+padding），如何设置成 IE 盒子模型: static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。 relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。 问：为什么会有这种现象？你能解释一下吗 是由块级格式上下文决定的，BFC，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为同正取最大的，同负取绝对值最大的，一正一负，相加 BFC 是页面中一个独立的隔离容器，内部的子元素不会影响到外部的元素。 不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷） 了解更多加入我们前端学习圈

浏览器兼容性涉及的内容有很多，特别是针对IE浏览器，以下整理出五种常见的浏览器兼容性解决方法。 一、样式初始化 由于各大浏览器会有自身的默认样式，并且不尽相同，所以为了尽可能的保证样式的统一性，前端在开发项目之前都会先进行样式格式化，最常见的分为以下几个方面。 1.pandding 值和 margin 值均设置为 0 将html、body、a、li、ol、input、textarea、select、button 等标签的 padding 值和 margin 值设置为 0。 2.html 标签 设置统一的字体，如果使用 rem 单位，则 html 需要设置合适的字号。 3.a 标签 设置统一的颜色，将 text-decoration 属性设置为 none。 4.ol 和 li 标签 list-style 统一设置为 none。 5.input、textarea、select、button 等标签初始化 border 设置为 none； 根据需要设置颜色和背景色。 二、使用不同类型的浏览器内核前缀 1.Chrome（谷歌浏览器） 与 Safari（苹果浏览器） 内核：Webkit （中译无） 前缀：-webkit- 2.IE （IE浏览器） 内核：Trident （中译三叉戟） 前缀：-ms- 3.Firefox （火狐浏览器） 内核：Gecko（中译壁虎） 前缀：-moz- 4.Opera （欧朋浏览器） 内核：Presto（中译迅速） 前缀：-o- 例： -webkit-border-radius: 10px; / 谷歌浏览器 / -ms-border-radius: 10px; / IE浏览器 / -moz-border-radius: 10px; / 火狐浏览器 / -o-border-radius: 10px; / 欧朋浏览器 / border-radius: 10px; 1 2 3 4 5 三、针对IE浏览器不同版本的解决方案 1.对于低版本的 IE 浏览器使用 CSS hack（ 即给特点前缀） 注：以下符号是写在属性名前面。 兼容 IE6 的 hack 符号：- 或 _ 兼容 IE6 、7 的 hack 符号：` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一个符号 兼容 IE6、7、8 的 hack 符号：. 注：以下符号是写在属性值与分号直接，中间不留空格。 兼容 IE8 的 hack 符号：/ 兼容 IE8、9、10 的 hack 符号： 兼容 IE6、7、8、9、10 的 hack 符号：9 例： / hack符号在前 / _border-radius: 10px; / IE6 / +border-radius: 10px; / IE67 / .border-radius: 10px; / IE678 / / hack符号在后 / border-radius: 10px/; / IE8 / border-radius: 10px; / IE8910 / border-radius: 10px9; / IE678910 / 1 2 3 4 5 6 7 8 9 2.为不同的版本编写独立的样式，其他浏览器识别不到。 例：大于 IE9 的浏览器使用这个单独的 style9.css 样式 1 2 3 例：只有 IE6 浏览器使用的 style6.css 样式 1 2 3 四、其他特殊样式 1.cursor 属性的 hand 值和 pointer 值 问题：firefox 浏览器不支持 hand 值，但其他浏览器均支持 pointer 值。 解决: 统一使用 cursor 属性的 pointer 值。 2.水平居中 问题：IE8 及IE8 以下版本浏览器不可通过设置 margin:0 auto 实现水平居中。 解决: 可通过设置父级 text-align:center 实现。 3.属性值 “inherit” 问题：IE8 及IE8 以下版本浏览器不支持属性值 “inherit”。 解决：谨慎使用属性值 “inherit”。 五、JS兼容性 1.ES6语法 问题：IE11 不支持箭头函数、class 语法等（报 SCRIPT1002: 语法错误），不支持 Set 和 Map 数据结构（不报错）及 Promise 对象，支持 let 和 const，IE10 及以下不支持任何 ES6 语法。 解决：如果要兼容IE浏览器的项目请使用 ES5 语法或者使用 Babel 进行转换。 2.操作 tr 标签 问题：IE9 及 IE9 以下版本浏览器，不能操作 tr 标签的 innerHTML 属性。 解决：可以操作 td 标签的 innerHTML 属性。 3.Ajax 问题：IE9 及 IE9 以下版本浏览器无法使用 Ajax 获取接口数据。 解决：在使用 Ajax 请求之前设置 jQuery.support.cors=true。 4.event 对象的 srcElement 属性 问题：IE8 及 IE8 以下版本浏览器 event 对象只有 srcElement 属性，没有 target 属性。 解决：obj = event.target?event.target:event.srcElement。 5.DOM 事件绑定 问题：IE8 及 IE8 以下版本浏览器是用 attachEvent() 方法，而其他浏览器是 addEventListener() 方法。 解决：判断 IE 浏览器版本，如果是 IE8 及以下 事件绑定则使用 attachEvent() 方法，注意 attachEvent() 方法的用法，第一个参数为“onclick” 而不是“click”。并且没有第三个参数。

从以下五个方面做，可以轻松面对前端面试：一、基本知识DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。DOM操作——怎样添加、移除、移动、复制、创建和查找节点。事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。盒模型——外边距、内边距和边框之间的关系，IE8以下版本的浏览器中的盒模型有什么不同。块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。二、少量提问现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题等等。我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。三、解决问题做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。其次，可以测试出他们已经掌握的(还是那句话，“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像，没有意义，也得不到任何有价值的信息。四、有激情要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有 对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能;五、最后一点计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。

想要通过前端面试顺利进入一线大厂成就高薪前端梦。那么首先，我们得知道前端面试中，社招和校招究竟有啥区别？对于前端开发来说，如果说社招更看重对前端技术体系的深入理解，以及解决问题的能力话，那校招更看重的其实是基本功和学习能力（或者说是潜力）。但其实，无论是社招还是校招，面试的时候都会问到一些曾经操作过的项目，尤其是大厂，或者热门高薪部门，面试官除必问的技术经验外，也会对技术深度进行一个基础的考核，那在这种情况下如何hold住大厂面试呢？前端面试三要素：简历、个人介绍、技术能力。下面，就来分别聊一聊。1、简历筛选关：HR一般会去看简历中所提的技术栈是否匹配，怎么看呢？我们可以抓住简历中的技术名词，一般来说如果一点技术名词都没有提到，那么大概有以下几种可能：很水、很牛但概率很小、不会写简历。所以，一部分人可能会因为简历的问题没有了面试机会，这点是需要非常注意的。2、个人介绍关：通过了简历筛选阶段，就真正到了面试环节。这时候一定要准备好一段最多3分钟的个人介绍。请注意，最多3分钟！言简意赅的说明自己的工作时间，擅长技术栈和自己的工作预期。3、项目经验表达：对前端开发学习者而言，JS并不陌生，但大厂的JS面试题却总是显得很“陌生”，怎么样能够真正做到深入理解与高级应用？这不仅是面试过程中对前端求职者的要求，也是大多数前端开发者的痛点。大厂面试中，面试官除了关注你的项目经验外，还往往喜欢和面试者深入探讨前端某些技术领域成体系的前端知识。比如：模块化、异步解决方案、网络、框架及原理、线程等，但在与面试官的正面battle中，求职者总会败下阵来。所以，建议大家在Web前端面试前一定要注重这三个方面的内容。注重了这些想找找到一份适合的Web前端开发工作并不是难事。

前端面试题，js事件机制是什么，这个回答是工作机制

准备好简历。理顺好自己 的思路，比如，自己曾参与过哪些经验项目，对哪些专业知识掌握的比较透彻等。

指一体化皆野用水美

这个区别就是她们的遍历过程不一样

一般HR会这样问：1、以前在哪里做，担任什么职位，主要负责什么2、为什么离开上家公司3、是否不成功案例，你认为你的案例中哪个最好4、最后会问你薪资问题。这里我挑2、4来回答，其它的我相信你应该知道怎么回答。对于第二个问题，很多HR都会问，这里你应该这样回答比较合适：从两方面，第一你可以说公司国转型做其它项目，不做我现在这一块的业务了。第二你可以说公司的发展方向与我的专业不太对，对我自己以后的发展不是很好，所以我想找一份与我专业对口的。对于问题4，有可能是HR提出来，但也有可能没提，这里你应该提出来。怎么说没关系，说出你要的价位就行，他就会知道了。然后他会根据公司的情况和你提的价位来跟你说明。你可以看公司的办公环境以及员工的工作环境，就可以看出该公司老板是否有钱了，呵呵！深圳这边的网页设计薪资挺难说的，有高有低。关键还是看能力与沟通技巧了。好了，以上是我个人经验，希望你能找到一份好工作，开心上班！

标准就是规范、规则比如，在HTML中规定了大部分标签需要结束标记，像<div></div>;小部分标签，像<link><meta>是不需要写结束标记；另外像JS中变量的命名区分大小，类似这些规定就是w3c的标准。有时会因为一点规范的问题导致整段代码执行不了，只有更好按标准写代码，避免出现这种不必要的错误。

实习生的前端面试题比平时的面试题简单。前端实习生主要是做一些基本的辅助工作，和平时招聘的正式员工不同，不涉及核心技术代码，面试题也会相对简单，所以实习生的前端面试题比平时的面试题简单。