整理了一套初级前端面试题，为了照顾英语不好的同学做了汉语读音比如： header=害得 文章比较长没必要死记硬背

前端面试题 : 1、常用那几种浏览器测试？　　 答： 　　浏览器：IE，Chrome，FireFox，Safari，Opera。 谷歌 火狐 IE qq浏览器

2.HTML5新结构标签： header nav article aside footer 害得 奶吾 啊提扣 恶塞得 福特

请你谈谈Cookie的弊端 优点：极高的扩展性和可用性 哭kin 塞申 1).通过良好的编程，控制保存在cookie中的session对象的大小。 2).通过加密和安全传输技术（SSL），减少cookie被破解的可能性。 3).只在cookie中存放不敏感数据，即使被盗也不会有重大损失。 4).控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。 缺点： 都敏 1).Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2).安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3).有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

CSS 选择符有哪些？ CSS3新增伪类有那些？ 1.id选择器（ # myid） 2.类选择器（.myclassname） 3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p） 5.子选择器（ul > li） 6.后代选择器（li a） 7.通配符选择器（ * ） 8.属性选择器（a[rel = “external”]） 9.伪类选择器（a: hover, li:nth-child） CSS3新增伪类有: p:first-of-type 选择属于其父元素的首个

元素的每个

元素。 p:last-of-type 选择属于其父元素的最后

元素的每个

元素。 p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。 p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :enabled :disabled 控制表单控件的禁用状态。 :checked 单选框或复选框被选中。

行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素 块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素； 行元素转换为块级元素方式：display：block；

2.将多个元素设置为同一行?清除浮动有几种方式? 将多个元素设置为同一行：float，inline-block 清除浮动的方式：方法一：添加新的元素 、应用 clear：both； 方法二：父级div定义 overflow: hidden； 方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。 .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}

4.简述几个css hack? (1) 图片间隙 在div中插入图片，图片会将div下方撑大3px。hack1：将

与 写在同一行。hack2：给 添加display：block； dt li 中的图片间隙。hack：给 添加display：block； (2) 默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px） hack1：给元素添加：font-size：0； hack2：声明：overflow：hidden； 表单行高不一致 hack1：给表单添加声明：float：left；height： ；border： 0； 鼠标指针 hack：若统一某一元素鼠标指针为手型：cursor：pointer； 当li内的a转化块元素时，给a设置float，IE里面会出现阶梯状 hack1：给a加display：inline-block； hack2：给li加float：left；

5.href和src区别? title和alt href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和a 等元素上使用。 src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部分，是引入。在 img、script、iframe 等元素上使用。 title：既是html标签，又是html属性，title作为属性时，用来为元素提供额外说明信息. alt：alt是html标签的属性，alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息.

1.什么是跨域请求 使用ajax获取数据的时候，如果当前界面的地址和所需要的服务器的地址， 协议 域名 端口

2.跨域请求的表现 获取不到数据

3.跨域请求获取不到数据的原因 是浏览器将数据不给ajax中的success

4.如何处理跨域的请求 在服务器处理跨域请求方案 在响应增加Access-Control-Allow-Orign的信息 前端：jsonp

5.跨域请求和OPTIONS请求的关系 简单跨域 Get post 复杂的跨域 Put delete 自定义请求头

OPTIONS：询问请求

6.调用后端接口 在路由里面url调用后端接口

JavaScript部分 1、介绍js的基本数据类型 -web前端开发培训-传智播客 　　答： Undefined、Null、Boolean、Number、String 安迪饭的 布兰 难博 死坠 2、js有哪些内置对象？ 答：数据封装类对象： Object 哦博宅他 、Array、格瑞 Boolean、 Number 和 String 　　其他对象：Function、Arguments、Math、Date、RegExp、 Error 方可神 慢 正则表达式 唉e 3、this对象的理解 D死 答：this总是指向函数的直接调用者（而非间接调用者）； 　　如果有new关键字，this指向new出来的那个对象； 　　在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。 4、eval是做什么的？ 一布欧 　　答：它的功能是把对应的字符串解析成JS代码并运行； 　　应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 　　由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval(’(’+ str +’)’)。 5、JSON 的了解？ 答： 　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。 　　格式：采用键值对，例如：{‘age’:‘12’, ‘name’:‘back’} 6、call() 和 apply() 的区别和作用？ 靠 阿噗莱特 答： apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。 闹 方可神 啊铺赖得 　　如：function.apply(this,[1,2,3]); 　　call()的第一个参数是上下文，后续是实例传入的参数序列。 　　如：function.call(this,1,2,3); 7、你有哪些性能优化的方法？ 答： 　　（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表达式)又称Dynamic properties(动态属性)。 　　（7） 图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。 8、线程与进程的区别 答： 　　一个程序至少有一个进程,一个进程至少有一个线程。 　　线程的划分尺度小于进程，使得多线程程序的并发性高。 　　另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。 　　线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。 　　从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。 9、JSON 的了解？ 答： 　　JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。 　　格式：采用键值对，例如：{‘age’:‘12’, ‘name’:‘back’} 10、new操作符具体干了什么呢? 答： 　　（1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。 　　（2）属性和方法被加入到 this 引用的对象中。 　　（3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。 11、null和undefined的区别？ 安迪饭的 答： 　　null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。 　　undefined： 　　（1）变量被声明了，但没有赋值时，就等于undefined。 　　（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 　　（3）对象没有赋值的属性，该属性的值为undefined。 　　（4）函数没有返回值时，默认返回undefined。 　　null： 　　（1） 作为函数的参数，表示该函数的参数不是对象。 　　（2） 作为对象原型链的终点 12、区分XSS和CSRF的区别？ xss：跨站点攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie，因为有了cookie相当于有了session，有了这些信息就可以在任意能接进互联网的PC登陆该网站，并以其他人的身份登陆做破坏。预防措施防止下发界面显示html标签，把</>等符号转义。 csrf：跨站点伪装请求。csrf攻击的主要目的是让用户在不知情的情况下攻击自己已登录的一个系统，类似于钓鱼。如用户当前已经登陆了邮箱或bbs，同时用户又在使用另外一个，已经被你控制的网站，我们姑且叫它钓鱼网站。这个网站上面可能因为某个图片吸引你，你去点击一下，此时可能就会触发一个js的点击事件，构造一个bbs发帖的请求，去往你的bbs发帖，由于当前你的浏览器状态已经是登陆状态，所以session登陆cookie信息都会跟正常的请求一样，纯天然的利用当前的登陆状态，让用户在不知情的情况下，帮你发帖或干其他事情。预防措施，请求加入随机数，让钓鱼网站无法正常伪造请求。 15.window.onload 和document.ready的区别 鞥楼的 答案：window.onload 是在DOM文档树加载完和所有文件加载完之后执行一个函数 Document.ready是在DOM加载完后就可以对DOM进行操作 16. ””和“=”的不同 答案：前者会自动转换类型,再判断是否相等 后者不会自动类型转换，直接去比较 17. javaScript的2种变量范围有什么不同？ 全局变量：当前页面内有效 局部变量：函数方法内有效 18.什么是闭包？有哪些特性？

闭包是指有权访问另一个函数作用域中的变量的函数； 闭包的特性： 封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的。除非闭包主动向外界提供访问接口 持久性：一般的函数，调用完之后，系统会自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包依然存在。 18.了解过圣杯布局和双飞翼布局吗？ 圣杯布局是中间栏为两边腾开位置。双飞翼布局则是中间栏不变，将内容部分为两边腾开位置，总体思路都是实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

Vue传值： 父传子：props 普肉剖死 子传父： e m i t 因 密 特 路 由 传 ： emit 因密特 路由传： emit因密特路由传：router.path、params、 query 汝特 帕特 派弱

弹性布局：display:flex 抵死普雷设为弗莱石

JS数据类型：Boolean、Number、String、Undefined、Null

点击穿透：阻止事件冒泡到父元素，在上层加入：event.stopPropagation(); 一文特死淘破破逮神

排序：冒泡排序、选择排序、插入排序、快速排序、希尔排序、归并排序

拆可死否奥 穿c的 水平垂直居中：父级只给宽高,子级transform: translate(-50%, -50%)（偏移自身上下一半的距离）,和绝对定位top: 50%,left: 50%;

定位的几种方式：relative（相对定位）；absolute（绝对定位）；fixed（固定定位）；sticky 粘性定位

Vue如何双向绑定，怎么简写：v-modle（双向绑定），简写“ : ”

声明变量的方法： var：var没有块的概念，定义的变量，可以跨块访问，但是不能跨函数访问 let：let定义的变量，不能跨块访问，也不能跨函数访问 const：const用来定义常量，使用时必须初始化，只能在块作用域里访问，而且不能修改

JS的同步异步： 为什么会有同步和异步：因为JavaScript的单线程，所以同步异步可以先挂起处于等待的任务，先运行排在后面的任务（同步异步） 同步：同步是指在主线程上排队执行的任务，只有上一个任务执行完毕，才能继续执行下一个任务 异步：异步是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程：某个异步任务可以执行了，该任务才会进入主线程

JS常用方法总结： 淘乐恶k toLowerCase(): 把字符串转为小写，返回新的字符串。

兔破k toUpperCase(): 把字符串转为大写，返回新的字符串。 杀呢 charAt(): 返回指定下标位置的字符。

charCodeAt(): 返回指定下标位置的字符的unicode编码。 indexOf(): 返回某个指定的子字符串在字符串中第一次出现的位置。 莱听带死of lastIndexOf(): 返回某个指定的子字符串在字符串中最后出现的位置 撒掊死坠。 substring(): 提取字符串中介于两个指定下标之间的字符。 substr(): 返回从指定下标开始指定长度的的子字符串 split(): 把字符串分割成字符串数组。 锐破雷 replace(): 在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

败吃 match(): 返回所有查找的关键字内容的数组。

在调用子组件的方法时，加入 n e x t T i c k ， 这 样 调 用 子 组 件 里 的 方 法 时 ， 会 先 等 待 子 组 件 渲 染 完 毕 再 调 用 ： t h i s . nextTick，这样调用子组件里的方法时，会先等待子组件渲染完毕再调用： this. nextTick，这样调用子组件里的方法时，会先等待子组件渲染完毕再调用：this.nextTick(() => { this.$refs.HomeTopSearchIF.ContentValueSearch(); }) 生命变量的方法：var , let , conse

内连接：指连接结果仅包含符合连接条件的行，参与连接的两个表都应该符合连接条件。 外连接：连接结果不仅包含符合连接条件的行同时也包含自身不符合条件的行。包括左外连接、右外连接和全外连接。

continue语句和break语句的区别： 1） continue语句只结束本次循环，而不是终止整个循环的执行。 2） break语句则是结束整个循环过程，不再判断执行循环的条件是否成立 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 面向对象(Object Oriented)是软件开发方法，一种编程范式。面向对象的概念和应用已超越了程序设计和软件开发，扩展到如数据库系统、交互式界面、应用结构、应用平台、分布式系统、网络管理结构、CAD技术、人工智能等领域。面向对象是一种对现实世界理解和抽象的方法，是计算机编程技术发展到一定阶段后的产物。

能看到这里只能说你很勇

文章的最后让我们一起加油吧菜鸟们。

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。