2017 web前端面试知识点汇总

跨域

同源策略:浏览器上为安全性考虑实施的安全策略。url由协议、域名、端口号和路径组成,如果两个url的协议、域名和端口号相同,则是同源。

ajax请求受到同源策略的限制

一、jsonp

利用<script>标签的src属性可以加载跨域的js脚本特点,动态创建script标签来载入跨域资源,jquery对该方法进行了封装,需要设置dataType为jsonp,只支持get请求

二、domain

三、CORS

服务端在响应头加上允许访问的domain和HTTP method

四、服务端代理

因为服务端不存在跨域问题。

a、把跨域请求变成本域的请求

b、服务端的动态脚本负责转发客户端实际的请求

闭包

变量作用域:

变量有两种,局部变量和全局变量。在函数内部可以读取全局变量,而在函数外部无法读取函数内部的局部变量。

闭包可以实现在函数外部读取函数内部的局部变量。

使用:

一、读取函数内部变量

二、让变量的值始终保存在内存中,不被垃圾回收机制回收

缺点:

一、变量保存在内存中,内存消耗大,影响网页性能,在IE中可能会导致内存泄露。解决:在退出函数前,将不使用的局部变量删除

二、闭包会在父函数外部,改变父函数内部变量的值

原型链

_proto_是每个对象都有的属性,prototype则是函数才有的属性,_proto_指针指向谁看创建对象的方式。

创建对象的三种方式:

a、字面量方式    _proto_指向Object

b、构造函数方式    _proto_指向该构造函数

c、Object.create(a)    _proto_指向a

原型链:js中万物皆对象,而每个对象都有_proto_属性,所以会形成一条由_proto_连起来的链条,这条链条就是原型链。

当js查找对象的属性时,会先在对象本身上找,如果找不到,则会到原型链上找,直到找到头为止。

js实现继承的几种方式

创建父构造函数Parent和子构造函数Child,Child需要继承Parent的属性和方法

一、借用构造函数实现继承

在Child中设置Parent.call(this),不能继承Parent的原型属性和方法

二、借用原型实现继承

通过设置Child.prototype = new Parent();

三、组合式继承

两种方式的组合

浏览器内核常驻进程

一、浏览器GUI渲染进程

二、javascript引擎进程

三、浏览器事件触发进程

四、浏览器定时器触发进程

五、浏览器HTTP异步请求线程

性能优化

1、雪碧图

2、移动端响应式图片

3、静态资源CDN

4、减少DOM操作(使用事件委托)

5、压缩html,css,js

浏览器渲染原理

1、把HTML解析成DOM Tree,把CSS解析成Rule Tree

2、把DOM Tree和Rule Tree整合成Render Tree

3、计算好每个元素的位置后,浏览器把元素放在它该在的位置上,通过显卡画到屏幕上

前端路由

定义:路由是根据不同的url展示不同的内容或页面

用处:常用在单页面应用(SPA),因为SPA都是前后端分离,后端不会给前端提供路由

技术:

HTML5新的API出现之前,通过hash来实现,兼容性较好。hash就是url中的#后面的部分,通过监听hash变化触发onhashchange事件,当hash值发生变化时,浏览器的历史记录会产生记录,但不会向服务端发出请求,可被客户端用于做前进后退

HTML5 History新增了两个API,history.pushState和history.replaceState,这两个API都会让浏览器产生记录,但都不会向服务端发出请求

优点:

后端路由客户端向服务端发送请求和服务端给客户端响应请求的过程会有网络延迟,前端路由没有网络延迟,用户体验更好

script标签defer、async区别

defer:在HTML加载完成之后才执行,如有多个,则按照加载顺序依次执行

async:加载完之后立即执行,如有多个,跟加载顺序无关

在浏览器中输入一个网址之后,发生了什么?

1、浏览器查找该域名的ip地址

2、浏览器根据解析得到的ip地址,向web服务器发送一个HTTP请求

3、服务器收到请求并进行处理

4、服务器返回一个响应

5、浏览器对该响应进行解码,渲染页面

6、页面显示完成后,浏览器发送异步请求

一次完整的HTTP请求过程

一次完整的HTTP请求从TCP三次握手建立连接成功后开始,客户端按照指定的格式向服务端发送HTTP请求,服务端接到请求后,解析HTTP请求,处理完业务逻辑,然后返回一个指定格式的HTTP响应给客户端。

HTTP请求格式:由请求行、请求头、空行、消息体四部分组成,每部分内容占一行

HTTP响应格式:由状态行、响应头、空行、消息体四部分组成,每部分内容占一行

HTTP协议

HTTP协议是超文本传输协议的缩写,用于从万维网服务器传输超文本到本地浏览器的传送协议。

HTTP协议基于TCP/IP通信协议来传递数据。

特点:

1、简单快速。客户端向服务端发送请求时,只需要传送请求方法和路径

2、灵活。HTTP协议允许传输任何类型的数据

3、无连接。每次连接只处理一个请求,服务器处理完请求,并收到客户端应答后,便断开连接

4、无状态。HTTP协议对事物处理没有记忆能力

HTTP的URL:一个完整的URL由以下几部分组成

http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name

1、协议

2、域名

3、端口号

4、虚拟目录

5、文件名

6、参数部分

7、锚部分

HTTP的请求:

由请求行、请求头、空行、消息体四部分组成,每部分内容占一行

HTTP的响应:

由状态行、响应头、空行、消息体四部分组成,每部分内容占一行

HTTP状态码:

1xx:指示信息-表示请求已接收,要继续处理

2xx:成功-表示请求已被成功接收、理解和接受

3xx:重定向-表示要完成请求必须进行进一步操作

4xx:客户端错误-请求有语法错误或请求无法实现

5xx:服务端错误-服务端未能实现合法的请求

常见状态码:

200 OK    客户端请求成功

400 Bad Request    客户端请求有语法错误,不能被服务端所理解

403 Forbidden    服务端接收到请求,但拒绝提供服务

404 Not Found    请求资源不存在(输入了错误的URL)

500 Internal Server Error    服务端发生不可预期的错误

503 Server Unavailable    服务端当前不能处理客户端请求,一段时间后可能恢复正常

cookie与session, localStorage与sessionStorage

localStorage和sessionStorage是h5的web storage API提供的

保存位置:

localStorage、sessionStorage和cookie都保存在浏览器端,session保存在服务器端

数据有效期:

localStorage     始终有效,浏览器关闭也一直保存

sessionStorage     在浏览器关闭前有效

cookie     在有效期内有效

session     需向服务端请求,在服务端设置的有效期内有效

保存大小:

cookie     最大4k

localStorage、sessionStorage    比cookie大得多,达到5M甚至更多

优缺点:

cookie     会在同源的HTTP请求中携带,在浏览器和服务器间来回传递

localStorage、sessionStorage    不会在请求中携带,只在本地保存

session     占用服务端空间,但存储数据更安全

时间: 2024-10-07 13:46:25

2017 web前端面试知识点汇总的相关文章

2016年Web前端面试题目汇总

今天收集了一些web前端工程师的经典面试题以及自己面试过程中无法解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的web前端基础知识(http://www.maiziedu.com/course/web/),如有错误或更好的答案,欢迎指正. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框 (border),元素的外边距(margin)四个部分.这四个部分占有的空间

Web前端面试题目汇总

http://www.cnblogs.com/bigboyLin/p/5272902.html HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域.4个部分一起构成了css中元素的盒模型. 2.行内元素有哪些?块级元素有哪些? 空(v

【数据库】数据库面试知识点汇总

转自:https://www.cnblogs.com/wenxiaofei/p/9853682.html 数据库面试知识点汇总 一.基本概念 1.主键.外键.超键.候选键 超键:在关系中能唯一标识元组的属性集称为关系模式的超键.一个属性可以为作为一个超键,多个属性组合在一起也可以作为一个超键.超键包含候选键和主键. 候选键:是最小超键,即没有冗余元素的超键. 主键:数据库表中对储存数据对象予以唯一和完整标识的数据列或属性的组合.一个数据列只能有一个主键,且主键的取值不能缺失,即不能为空值(Nul

web前端面试总结

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个年轻的行业,所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前端程序员必备的技能之一. 前端开发知识点: HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级. HTML5.CSS3.Flexbox JavaScript: 数据类

前端面试知识点集锦

个人总结的比较全面的前端面试知识点.主要是一些个人认为面试时容易考到以及平时需要注意的一些知识点. 本人只是对这些知识进行了一个大概的总结,还有一部分技术还没开始涉及,后期会持续添加.如果需要进行深入了解可以根据知识点查询相关的技术文章. 本文涵盖了以下各个方面的知识: HTML, CSS, JS基础知识 网站性能优化知识 前端项目自动化构建相关知识 算法相关知识 网络与HTTP协议相关知识 前端的安全相关知识 插件编写相关知识 JS模块化编程相关知识 Github Repo:https://g

百度Web前端面试经历

今天面了百度的前端实习职位.一面.时间大概是50分钟.面试官是位很帅气的小伙子,非常友好的一个人.进门的时候他让我等一会,我瞄了一眼他的电脑屏幕,发现他在coding…… 9点50开始的面试. 面试官:自我介绍一下. 我:blablabla. 面试官:javascript的类型转换(比如"2"*1, "a"*1). 我:javascript会调用valueOf来转换为一个基本数据类型,在这种情况下,如果javascript不能通过valueOf转成一个number,

web前端面试经历分享

十天前,我还在纠结这个暑假到底是呆在实验室研究技术好还是找一份实习见识世面好,而现在我已经接到offer准备工作了.这几天真是累得够呛,一方面需要拼命准备期末考试,另一方面,需要往公司里面跑接受面试.欣慰的是,我不仅顺利通过了公司的面试,还认识了好几个厉害的师兄,自己的人生规划也稍有改变. 开始的纠结是有原因的,主要是考虑到了一下几个方面: 第一,作为一个大二的学生有必要这么着急跑出去找实习么? 第二,去找实习主要目的应该是赚钱还是学习技术? 第三,难得有那么两个月的时间,就这样去工作了会不会浪

百度web前端面试2015.10.18

邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对一面试,人很多. 下面是面试过程:没让我自我介绍,有的会让先自我介绍,简单看了下我的简历开始问我是不是自学的,(计算机专业不开设这个专业,都是自学加项目经验)为什么选择前端开发,你怎么看前端开发这个岗位的.说那这样我就从简单到难的问你,由浅入深就知道你的水平了,面试官都很年轻,人都不错. 1:说一下

Web前端面试笔试题总结

最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面希望看到本文的伙伴能自己去找答案,毕竟,技术只有自己真正理解了才是自己的东西,共勉. 小白第一次发文,恭请指点. Web前端面试笔试题 Html+css 1.对WEB标准以及w3c的理解与认识. 2.Xhtml和html有什么区别. 3.css的引入方式有哪些?link和@import的区别是? 4