最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > 工具与技巧> 前端常见面试题

前端常见面试题

文章作者:网友投稿 发布时间:2019-06-20 09:55:00 来源:网络

今天,小编给大家分享一下前端常见的面试题,希望能帮助到大家学习!

今天,小编给大家分享一下前端常见的面试题,希望能帮助到大家学习!


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

name为viewport表示供移动设备使用;


2、前端需要注意哪些 SEO?

1)合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords列举出重要关键词即可

2)语义化的HTML代码,符合W3C规范:语义化代码让搜索引擎容易理解网页

3)重要内容HTML代码放在最前:搜索引擎抓取HTML顺序是从上到下,有的搜索引擎对抓取长度有限制,保证重要内容一定会被抓取

4)重要内容不要用js输出:爬虫不会执行js获取内容

5)少用iframe:搜索引擎不会抓取iframe中的内容

6)非装饰性图片必须加alt

7)提高网站速度:网站速度是搜索引擎排序的一个重要指标


3、你对网页标准和 W3C 重要性的理解?

web标准一般是将结构、表现和行为三部分独立分开,使其更具有模块化。但一般产生行为时,就会有结构或者表现的变化,也使这三者的界限并不那么清晰.

W3C对web标准提出了规范化的要求,也就是在实际编程中的一些代码规范:包含如下几点

1)对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对SEO很有帮助)

(1)标签字母要小写

(2)标签要闭合

(3)标签不允许随意嵌套

2)对于css和js来说

(1)尽量使用外链css样式表和js脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。

(2)样式尽量少用行间样式表,使结构与表现分离,标签的id和class等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版

(3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。


4、type=hidden 隐藏域有什么作用?举例说明。

作用:隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用。

浏览者单击发送按钮发送表单的时候,隐藏域的信息也被一起发送到服务器。

举例:有些时候我们要给用户一信息,让他在提交表单时提交上来以确定用户身份,如sessionkey等。当然这些东西也能用cookie实现,但使用隐藏域就简单的多了.而且不会有浏览器不支持,用户禁用cookie的烦恼。


5、post 和 get 方式提交数据有什么区别?

1)post是向服务器传送数据;get是从服务器上获取数据。

2)get可以传送的数据量则非常小,只能有1024字节,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。

3)安全性问题,使用 get 的时候,参数会显示在浏览器地址栏上,而 post 不会

4)get 存在缓存

5)对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。


6、在 input 里,name 有什么作用?

1)作为可与服务器交互数据的HTML元素的服务器端的标示

2)建立页面中的锚点

3)作为对象的Identity,如Applet、Object、Embed等元素,我们将使用其Name来引用该对象


7、label 有什么作用?如何使用?

用来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。


8、 CSRF 攻击是什么?如何防范?

CSRF(Cross-site request forgery)也被称为 one-click attack或者 session riding,中文全称是叫跨站请求伪造。

防范:

1)验证 HTTP Referer 字段

2)使用验证码

3)在请求地址中添加token并验证

4)在HTTP 头中自定义属性并验证


9、网页验证码是干嘛的?是为了解决什么安全问题?

防止恶意注册和暴力破解


10、 常见 web 安全及防护原理?

1)XSS原理

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者javascript代码;

防范:首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击。

2)尽量采用POST 而非GET 提交表单

3)CSRF攻击

防范:在客户端页面增加伪随机数;通过验证码的方法


11、渐进增强和优雅降级分别是什么意思?

渐进增强:针对最完善、最高级的浏览器来设计网页

优雅降级:针对内容本身而言


12、 什么是 CSS hack?

CSS Hack大致有3种表现形式:CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。

例子:


13、 IE6、7 的 hack 写法是?

div{ 

    text-decoration:overline; 

    *text-decoration:line-through; 

    _text-decoration:underline; 

}


14、列举 CSS 编码规范?

1)统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。

2)原则上,不建议缩写

3)尽量避免使用id来控制样式

4)尽量最多控制在3级选择器以内

5)非必要的情况下不要使用元素标签名和ID或class进行组合


15、什么是盒模型?

元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。


16、CSS 的属性 box-sizing 有什么值?分别有什么作用?

一般在做自适应的网页设计的时候用,用这个属性网页结构才不会被破坏。

常用的值:

1) content-box:宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。

2)border-box:为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制,通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

3)inherit:规定应从父元素继承 box-sizing 属性的值。


17、JavaScript 定义了几种数据类型?哪些是原始类型?哪些是复杂类型?null 是对象吗?

简单数据:undefined, null, boolean, number和string;

复杂数据:object

原始类型:symbol, undefined, null, boolean, number和string

null 不是对象


18、闭包是什么?闭包的作用是什么?闭包有哪些使用场景?

一个函数有权访问另一个函数中的变量;

延长了变量的使用范围;

1)采用函数引用方式的setTimeout调用。 例子

2)将函数关联到对象的实例方法。

3)封装相关的功能集。


19、使用递归完成 1 到 100 的累加?

dg.png

20、谈谈垃圾回收机制的方式及内存管理?

回收机制方式

1)定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

2)原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。

垃圾回收策略:标记清除(较为常用)和引用计数。

IE6的垃圾回收是根据内存分配量运行的,当环境中的变量,对象,字符串达到一定数量时触发垃圾回收。垃圾回收器一直处于工作状态,严重影响浏览器性能。


21、 谈谈你对 JS 执行上下文栈和作用域链的理解?

执行上下文(Execution Contexts)是一种规范设备,用于跟踪ECMAScript实现对代码的 运行时(runtime) 评估。在任何时间点,每个代理程序最多只有一个执行上下文实际执行代码。这称为 代理程序 的 运行执行上下文(running execution context])

作用域负责收集和维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限。


22、 for of、for in 和 forEach、map 的区别?

for…of语句在可迭代对象(Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,为每个不同属性的值执行语句。

for…in用于遍历数组时,可以将数组看作对象,数组下标看作属性名。但用for…in遍历数组时不一定会按照数组的索引顺序。

forEach方法对数组/Map/Set中的每个元素执行一次提供的函数。

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。


23、数组的哪些 API 会改变原数组?

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift


24、判断一个变量是否是数组,有哪些办法?

1)instanceof

var ary = [1,23,4];

console.log(ary instanceof Array)//true;

2)原型链方法 

var ary = [1,23,4];

console.log(ary.__proto__.constructor==Array);//true

console.log(ary.constructor==Array)//true 这两段代码是一样的


25、new 的原理是什么?通过 new 的方式创建对象和通过字面量创建有什么区别?

1)创建一个新对象

2)执行构造函数

3)改变 this 指向

4)返回一个新对象

字面量创建对象,不会调用 Object构造函数, 简洁且性能更好;

new Object() 方式创建对象本质上是方法调用,涉及到在proto链中遍历该方法,当找到该方法后,又会生产方法调用必须的 堆栈信息,方法调用结束后,还要释放该堆栈,性能不如字面量的方式。


26、Object.create 有什么作用?

方法创建一个新对象,使用现有的对象来提供新创建的对象的proto


27、 怎样判断“值”属于哪种数据类型?typeof 是否能正确判断类型?instanceof 呢?instanceof 有什么作用?

typeof 是一个操作符,返回这个表达式的数据类型,无法检测复杂类型,通通返回 Object

instanceof 是用来判断 A 是否为 B 的实例,返回值是布尔值


28、JavaScript 有哪些方法定义对象?

1)字面量:    var obj = {name:"moyu"};

2)new 和构造函数: var obj = new Object();

3)自定义一个对象的构造函数,然后实例化对象

function a(o){

this.name = "moyu"

}

var obj = new a();

4)通过Object.create():  var o1 = Object.create({x:1, y:2});      // o1继承了属性x和y


29、 JS 原型是什么?

原型对象就是拥有公用属性和方法的对象,所有对象一经创建都会自动引用该对象,以此来实现继承。


30、JS 如何实现继承?

1)借用构造函数

2)原型继承

3)组合继承


31、JSON 格式的数据需要遵循什么规则?

1)在书写json的数据格式的时候,当遇到遇到键与值是同名的情况下,可以只使用一个变量名

({url:url)}==>{(url)}

2)对象的成员名称必须使用双引号

3)数组或对象最后一个成员的后面,不能加逗号


32、 XML 和 JSON 的区别?

1)JSON只提供整体解析方案,而这种方法只在解析较少的数据时才能起到良好的效果;

XML目前设计了两种解析方式:DOM和 SAX。XML提供了对大规模数据的逐步解析方案,这种方案很适合于对大量数据的处理。

2)JSON的编码要比XML简单且具有可读性;XML比较适合于标记文档,而JSON却更适于进行数据交换处理。


33、 eval 是做什么的?

可以把一个字符串当作一个JavaScript表达式一样去执行它


34、深拷贝和浅拷贝的区别?

浅拷贝是复制,两个对象指向同一个地址;

深拷贝是新开栈,两个对象指向不同的地址


35、iframe 有那些缺点?

1)会产生很多页面,不容易管理。

2)iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

3)代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

4)很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

5)iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。 分析了这么多,现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。


36、 怎么添加、移除、复制、创建、和查找节点?

创建: createElement()   document.write()

添加: appendChild()   

复制: cloneNode()

查找: getElementsByTagName() //通过标签名称

       getElementsByName() //通过元素的Name属性的值

       getElementById() //通过元素Id,唯一性


37、 setTimeout、setInterval、requestAnimationFrame 各有什么特点?

setTimeout:用于延时执行参数指定的代码

setInterval: 用于每隔一段时间执行指定的代码,永无停歇

requestAnimationFrame :一般用于动画,与 setTimeout 方法类似,区别是 setTimeout 是用户指定的,而 requestAnimationFrame 是浏览器刷新频率决定的,一般遵循 W3C 标准,它在浏览器每次刷新页面之前执行。


38、JS 延迟加载的方式有哪些?

1)defer属性:(页面load后执行)

2)async属性:(页面load前执行)


39、JSON 和 JSONP 的区别?

JSON:它是以json格式在前后台进行数据的传输,返回给前台的数据一定要转成json格式的,通过json_encode将数组转换成json格式

JSONP:jsonp的原理就是通过script的src,将函数作为src请求地址的参数来传递数据,所以jsonp只有get一种传输方式。


40、cookies,sessionStorage 和 localStorage 的区别?

cookies:保存在客户端;存储大小不超过4kb;浏览器有效期一直存在

sessionStorage:保存在服务器端;存储大小不定;浏览器关闭就失效

localStorage:保存在本地;数据永远存在,除非手动删除


41、如何实现同一个浏览器多个标签页之间的通信?

1)调用 localstorge、cookies 等本地存储方式

2)使用cookie+setInterval


42、浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?

在线的情况下,浏览器发现html头部有manifest属性,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。


43、web 开发中会话跟踪的方法有哪些?

1)cookie

2)session

3)url重写

4)隐藏input

5)ip地址


44、HTTP 和 HTTPS 的区别?

1)https协议需要到ca申请证书,一般免费证书较少,因而需要一定费用。

2)http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。

3)http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。

4)http的连接很简单,是无状态的;HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。


45、如何实现页面每次打开时清除本页缓存?


46、谈谈你对 AMD、CMD 的理解?

AMD推崇依赖前置,在定义模块的时候就要声明其依赖的模块

CMD推崇就近依赖,只有在用到某个模块的时候再去移入。


上一篇: 跨域的概念及解决方案

下一篇: 正则表达式教程

共有0条评论网友评论