前端基础问题(有答案)

10个最基础的JavaScript问题javascript

 

一、介绍js的基本数据类型
Undefined、Null、Boolean、Number、Stringhtml

二、js有哪些内置对象?
数据封装类对象:Object、Array、Boolean、Number 和 String前端

其余对象:Function、Arguments、Math、Date、RegExp、Errorjava

三、this对象的理解
this老是指向函数的直接调用者(而非间接调用者);web

若是有new关键字,this指向new出来的那个对象;typescript

在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this老是指向全局对象Window。数据库

四、eval是作什么的?
它的功能是把对应的字符串解析成JS代码并运行;编程

应该避免使用eval,不安全,很是耗性能(2次,一次解析成js语句,一次执行)。小程序

由JSON字符串转换为JSON对象的时候能够用eval,var obj =eval('('+ str +')')。后端

五、DOM怎样添加、移除、移动、复制、建立和查找节点
// 建立新节点

createDocumentFragment() //建立一个DOM片断

createElement() //建立一个具体的元素

createTextNode() //建立一个文本节点

// 添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

// 查找

getElementsByTagName() //经过标签名称

getElementsByName() //经过元素的Name属性的值(IE容错能力较强,会获得一个数组,其中包括id等于name值的)

getElementById() //经过元素Id,惟一性

学习前端及JavaScript知识,无学习资料无人交流技术也是不行的哦!


六、null和undefined的区别?
null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

undefined:

(1)变量被声明了,但没有赋值时,就等于undefined。

(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。

(3)对象没有赋值的属性,该属性的值为undefined。

(4)函数没有返回值时,默认返回undefined。

null:

(1) 做为函数的参数,表示该函数的参数不是对象。

(2) 做为对象原型链的终点。

七、new操做符具体干了什么呢?
(1)建立一个空对象,而且 this 变量引用该对象,同时还继承了该函数的原型。

(2)属性和方法被加入到 this 引用的对象中。

(3)新建立的对象由 this 所引用,而且最后隐式的返回 this 。

八、JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

格式:采用键值对,例如:{'age':'12', 'name':'back'}

九、call() 和 apply() 的区别和做用?
apply()函数有两个参数:第一个参数是上下文,第二个参数是参数组成的数组。若是上下文是null,则使用全局对象代替。

如:function.apply(this,[1,2,3]);

call()的第一个参数是上下文,后续是实例传入的参数序列。

如:function.call(this,1,2,3);

十、如何获取UA?
function whatBrowser() {

document.Browser.Name.value=navigator.appName;

document.Browser.Version.value=navigator.appVersion;

document.Browser.Code.value=navigator.appCodeName;

document.Browser.Agent.value=navigator.userAgent;

}

 

 

1.页面从输入URL到页面加载显示完成,这个过程当中都发生了什么?(流程说的越详细越好)

1.输入域名地址
2.发送至DNS服务器并得到域名对应的WEB服务器IP地址;
3.与WEB服务器创建TCP链接;
4.服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个HTTP响应
8.浏览器显示 HTML
9.浏览器发送请求获取的资源(如图片、音频、视频、CSS、JS等等)
10.浏览器发送异步请求

 

2.浏览器工做原理

1.用户界面 2.网络 3.UI后端 4.数据存储 5.浏览器引擎 6.渲染引擎 7.js解释器

3.浏览器解析过程:

流程:解析html以构建dom树->构建render树->布局render树->绘制render树

4.介绍一下你对浏览器内核的理解?

主要分红两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,而后会输出至显示器或打印机。

浏览器的内核的不一样对于网页的语法解释会有不一样,因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。

JS引擎则:解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并无区分的很明确,后来JS引擎愈来愈独立,内核就倾向于只指渲染引擎。

5.常见的浏览器内核有哪些?

Trident内核:IE,360,傲游,搜狗,世界之窗,腾讯等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

6.请描述一下 cookies,sessionStorage 和 localStorage 的区别?

cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(一般通过加密),数据会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:

 

cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,
能够达到5M或更大。

有期时间:

 

localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage  数据在当前浏览器窗口关闭后自动删除。
cookie          设置的cookie过时时间以前一直有效,即便窗口或浏览器关闭

 

7.请大概描述下页面访问cookie的限制条件

跨域问题,设置了HttpOnly。

8.如何实现浏览器内多个标签页之间的通讯? (阿里)

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

9.页面可见性(Page Visibility API) 能够有哪些用途?

经过 visibilityState 的值检测页面当前是否可见,以及打开网页的时间等;
在页面被切换到其余后台进程的时候,自动暂停音乐或视频的播放

10.网页验证码是作什么的,是为了解决什么安全问题。

区分用户是计算机仍是人的公共全自动程序。能够防止恶意破解密码、刷票、论坛灌水;
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。

11.为何利用多个域名来存储网站资源?

CDN缓存更方便 ,突破浏览器并发限制 
节约cookie带宽 ,节约主域名的链接数,优化页面响应速度 防止没必要要的安全问题

12.谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让web发展的更‘健康’,开发者遵循统一的标准,下降开发难度,开发成本,SEO也会更好作,也不会由于滥用代码致使各类BUG、安全问题,最终提升网站易用性。

13.知道什么是微格式吗?

微格式(Microformats)是一种让机器可读的语义化XHTML词汇的集合,是结构化数据的开放标准。是为特殊应用而制定的特殊格式

优势:将智能数据添加到网页上,让网站内容在搜索引擎结果界面能够显示额外的提示。

14.一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载,给用户更好的体验。

(1)图片懒加载,在页面上的未可视区域能够添加一个滚动条事件,判断图片位置与浏览器顶端的距离与页面的距离,若是前者小于后者,优先加载。
(2)若是为幻灯片、相册等,可使用图片预加载技术,将当前展现图片的前一张和后一张优先下载。
(3)若是图片过大,可使用特殊编码的图片,加载时会先加载一张压缩的特别厉害的缩略图,以提升用户体验。
(4)若是图片展现区域小于图片的真实大小,则因在服务器端根据业务须要先行进行图片压缩,图片压缩后大小与展现一致。

15.谈谈之前端角度出发作好SEO(搜索引擎)须要考虑什么?

合理的标签使用, 主要的互联网目录,连接交换和连接普遍度。

16.请写出一些前端性能优化的方式,越多越好

1.减小dom操做
2.部署前,图片压缩,代码压缩
3.优化js代码结构,减小冗余代码
4.减小http请求,合理设置 HTTP缓存
5.使用内容分发cdn加速
6.静态资源缓存
7.图片延迟加载

17.描述一下渐进加强和优雅降级之间的不一样?

区别:优雅降级是从复杂的现状开始,并试图减小用户体验的供给,而渐进加强则是从一个很是基础的,可以起做用的版本开始,并不断扩充,以适应将来环境的须要。降级(功能衰减)意味着往回看;而渐进加强则意味着朝前看,同时保证其根基处于安全地带。

18.webSocket如何兼容低浏览器?(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR

19.web开发中会话跟踪的方法有哪些

1.cookie 2.session

2.url重写 4.隐藏input 5.ip地址

20.HTTP method

1.一台服务器要与HTTP1.1兼容,只要为资源实现GET和HEAD方法便可。

2.GET是最经常使用的方法,一般用于请求服务器发送某个资源。

3.HEAD与GET相似,但服务器在响应中值返回首部,不返回实体的主体部分。

4.PUT让服务器用请求的主体部分来建立一个由所请求的URL命名的新文档,或者,若是那个URL已经存在的话,就用干这个主体替代它。

5.POST起初是用来向服务器输入数据的。实际上,一般会用它来支持HTML的表单。表单中填好的数据一般会被送给服务器,而后由服务器将其发送到要去的地方。

6.TRACE会在目的服务器端发起一个环回诊断,最后一站的服务器会弹回一个TRACE响应并在响应主体中携带它收到的原始请求报文。TRACE方法主要用于诊断,用于验证请求是否如愿穿过了请求/响应链。

7.OPTIONS方法请求web服务器告知其支持的各类功能。能够查询服务器支持哪些方法或者对某些特殊资源支持哪些方法。

8.DELETE请求服务器删除请求URL指定的资源。

21.HTTP response报文结构是怎样的

rfc2616中进行了定义:

1.首行是状态行包括:HTTP版本,状态码,状态描述,后面跟一个CRLF

2.首行以后是若干行响应头,包括:通用头部,响应头部,实体头部

3.响应头部和响应实体之间用一个CRLF空行分隔

22.HTTP状态码及其含义

状态码类型
状态码 类别 缘由短语
1XX Information(信息性状态码) 接收的请求正在处理
2XX Success(成功状态码) 请求正常处理完毕
3XX Redirection(重定向状态码) 须要进行附加的操做以完成请求
4XX Client Error(客户端错误状态码) 服务器没法处理请求
5XX Server Error(服务端错误状态码) 服务器处理请求出错
204:服务器成功处理,但未返回内容。
304:Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源。客户端一般会缓存访问过的资源,经过提供一个头信息指出客户端但愿只返回在指定日期以后修改的资源
400:Bad Request 客户端请求的语法错误,服务器没法理解
403:Forbidden 服务器理解请求客户端的请求,可是拒绝执行此请求
404:Not Found 服务器没法根据客户端的请求找到资源(网页)。经过此代码,网站设计人员可设置"您所请求的资源没法找到"的个性页面

23.什么是同源:协议相同 域名相同 端口相同

同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
若是非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 没法读取。
(2) DOM 没法得到。
(3) AJAX 请求不能发送。

24.关于建站安全防御

答:要作好防XSS、CSRF、SQL注入攻击.DDOS攻击。
XSS概念:
译为跨站脚本攻击,具体是指攻击者在Web页面里插入恶意Script脚本,当用户浏览该网页时,Script代码会被执行,从而进行恶意攻击。
XSS预防:
关键cookie字段设置httpOnly
输入检查,特殊字符 < > / &等,对其进行转义后存储
CSRF概念:
本质上讲,是黑客将一个http接口中须要传递的全部参数都预测出来,而后无论以什么方式,他均可以根据他的目的来任意调用你的接口,对服务器实现CURD。
CSRF 预防:
使用验证码,更高级用图灵测试
SQL概念:
一般没有任何过滤,直接把参数存放到了SQL语句当中
SQL预防:
根本上防止SQL注入的方法,就是参数化查询或者作词法分析。
DDOS概念:
利用木桶原理,寻找利用系统应用的瓶颈;阻塞和耗尽;当前问题:用户的带宽小于攻击的规模,噪声访问带宽成为木桶的短板。
DDOS预防:用软硬件结合的方式来防护是最有效的

25.对前端工程化的理解

1.开发规范
2.模块化开发
3.组件化开发
4.组件仓库
5.性能优化
6.项目部署
7.开发流程
8.开发工具

26.AMD和CMD是什么?它们的区别有哪些?

AMD和CMD是二种模块定义规范。如今都使用模块化编程,AMD,异步模块定义;CMD,通用模块定义。AMD依赖前置,CMD依赖就近。CMD的API职责单一,没有全局require,AMD的一个API能够多用。

27.MVC BFC

mvc是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范使用MVC的目的是将M和V的实现代码分离,从而使同一个程序可使用不一样的表现形式。MVC对应Html,CSS,js。

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。流体特性:块状水平元素,如div元素(下同),在默认状况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;BFC元素特性表现原则就是,内部子元素不会影响外部的元素。

28.你如何对网站的文件和资源进行优化?

期待的解决方案包括:文件合并文件最小化/文件压缩使用CDN托管缓存的使用(多个域名来提供缓存)其余。

29.若是网页内容须要支持多语言,你会怎么作?

1.应用字符集的选择,选择UTF-8编码
2.语言书写习惯&导航结构
3.数据库驱动型网站

30.若是设计中使用了非标准的字体,你该如何去实现?

所谓的标准字体是多数机器上都会有的,或者即便没有也能够由默认字体替代的字体。
方法:
用图片代替
web fonts在线字库,如Google Webfonts,Typekit等等;http://www.chinaz.com/free/20...;
@font-face,Webfonts(字体服务例如:Google Webfonts,Typekit等等。)

31.如何自学一门新编程语言

(1)了解背景知识:历史、现状、特色、应用领域、发展趋势
(2)搭建开发环境,编写HelloWorld
(3)声明变量和常量
(4)数据类型
(5)运算符
(6)逻辑结构
(7)通用小程序
(8)函数和对象
(9)第三方库、组件、框架
(10)实用项目

32.什么是哈希表?

散列表(也叫哈希表),是根据关键码值直接进行访问的数据结构。也就是说,它经过把关键码值映射到表中一个位置来访问记录,以加快查找的速度。这个映射函数叫作散列函数,存放记录的数组叫作散列表。

33.静态网页和动态网页区别:

静态:网页内容任何人在任什么时候间访问都是不变的

HTML/CSS/JS/视频/音频

动态:网页内容不一样人在不一样时间访问多是不一样的

  JSP/PHP/ASP.NET/Node.JS

34.SQL语句的分类

DDL:数据定义语句 CREATE/DROP/ALTER…
DCL:数据控制语句 GRANT…
DML:操做操做语句 INSERT/UPDATE/DELETE
DQL:查询语句 SELECT

35.什么是弹性布局?
解决某元素中“子元素”的布局方式,为布局提供最大的灵活性。
设为flex布局之后,子元素的float、clear和vertical-align属性将失效!!!
display:flex; 属性align-self 定义子元素的位置。

36.编写响应式?
1.声明viewport元标签 2.使用流式布局 3.全部容器使用相对尺寸,不用绝对尺寸4.(最重要原则)使用CSS3 Media Query技术

37.常见的浏览器兼容问题?
1.不一样浏览器的标签默认的内.外补丁不一样。
*{margin:0;padding:0;}
2.图片默认有间距
使用float属性为img布局 
3.居中问题(而FF默认为左对齐)
margin: 0 auto;
4.CSS 兼容前缀
-ms- IE
-moz- Firefox
-o- Opera
-webkit- Chrome
5.使用CSS Hack
如: +:IE6,7的前缀

 -:IE6的前缀

38.H5新特性:
(1)Canvas绘图
(2)SVG绘图
(3)地理定位
(4)Web Worker
web worker 是运行在后台的 JS,独立于其余脚本,不会影响页面的性能。
(5)Web Storage
1.Cookie技术 ( 兼容性好,数据不能超4kb,操做复杂)2.(兼容性差,数据8MB,操做简单)sessionStorage 3.localStorage 
(6)Web Socket
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通讯——容许服务器主动发送信息给客户端。

39.C3新特性:
1.复杂的选择器
2.弹性布局
3.动画

40.什么是typescript
1.它是JavaScript的一个超集,并且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
2.TypeScript扩展了JavaScript的语法,因此任何现有的JavaScript程序能够不加改变的在TypeScript下工做。
TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。

41.三大框架的区别:
Angular带有比较强的排它性的
React主张是函数式编程的理念,侵入性没有Angular那么强,主要由于它是软性侵入。
Vue 渐进式的

42.spa应用
优势:用户体验好 、良好的先后端分离。
缺点:
1.不利于SEO。
2.初次加载耗时相对增多。
3.导航不可用,若是必定要导航须要自行实现前进、后退。

43.什么是模块化编程?
每一个模块内部,module变量表明当前模块。
这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,实际上是加载该模块的module.exports属性。

44.性能优化?
1.使用 CDN
2.图片懒加载
3.使用外部 JavaScript 和 CSS
4.压缩 JavaScript 、 CSS 、字体、图片等
5.优化 CSS Sprite
6.减小 HTTP 请求数
7.减小 DNS 查询
8减小 DOM 元素数量
9.减小 DOM 操做
10.把脚本放在页面底部

45.什么是HTTP协议:
HTTP是一个客户端和服务器端请求和应答的标准(TCP)。
HTTP1.1和2.0协议的区别:
HTTP1.1不支持header数据的压缩,而2.0支持

 

友情连接:http://mp.weixin.qq.com/s/lJvri6IGbU8TXCRrkcleaQ

相关文章
相关标签/搜索