前端面试题整理【转】
HTML&CSS
----------------------------
1.请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
存储大小:
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
有期时间:
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
2.iframe有那些缺点?
iframe会阻塞主页面的Onload事件;
搜索引擎的检索程序无法解读这种页面,不利于SEO;
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。
3.如何实现浏览器内多个标签页之间的通信?
WebSocket、SharedWorker
也可以调用localstorge、cookies等本地存储方式。
localstorge另一个浏览上下文里被添加、修改或删除时,它都会触发一个事件,我们通过监听事件,控制它的值来进行页面信息通信。
注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常。
4.如何在页面上实现一个圆形的可点击区域?
(1)map+area或者svg
(2)border-radius
(3)纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
5.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的?
(1)有两种, IE 盒子模型、W3C 盒子模型。
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)。
(3)区 别: IE的content部分把 border 和 padding计算了进去。
6.CSS优先级算法如何计算?
优先级就近原则,同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important比内联优先级高(style)
7.为什么要使用CSS sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-position”的组合进行背景定位,这样可以减少很多图片请求的开销,因为请求耗时比较长;请求虽然可以并发,但是如果请求太多会给服务器增加很大的压力。
8.display:none和visibility:hidden的区别?
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。
9.position的absolute与fixed区别
absolute浮动定位是相对于父级中设置position为relative或者absolute最近的父级元素
fixed浮动定位是相对于浏览器视窗的
10.IE 8以下版本的浏览器中的盒模型有什么不同?
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
JavaScript
----------------------------
1.JS数组去重
以下是展示三种方法:
Array.prototype.unique1 = function () {
var n = []; //一个新的临时数组
for (var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
Array.prototype.unique2 = function()
{
var n = {},r=[]; //n为hash表,r为临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
if (!n[this[i]]) //如果hash表中没有当前项
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
Array.prototype.unique3 = function()
{
var n = [this[0]]; //结果数组
for(var i = 1; i < this.length; i++) //从第二项开始遍历
{
//如果当前数组的第i项在当前数组中第一次出现的位置不是i,
//那么表示第i项是重复的,忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i) n.push(this[i]);
2.js操作获取和设置cookie
//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';
}
document.cookie = cookieText;
}
//获取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
3.ajax 有那些优缺点?如何解决跨域问题?
(Q1)
优点:
(1)通过异步模式,提升了用户体验.
(2)优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用.
(3)Ajax在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。
(4)Ajax可以实现动态不刷新(局部刷新)
缺点:
(1)安全问题 AJAX暴露了与服务器交互的细节。
(2)对搜索引擎的支持比较弱。
(3)不容易调试。
(Q2)jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面。
4.JavaScript原型,原型链 ? 有什么特点?
(1)原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。
(2)原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。
5.GET和POST的区别,何时使用POST?
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符
POST:一般用于修改服务器上的资源,对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值,而POST方式通过Request.Form来获取变量的值,也就是说Get是通过地址栏来传值,而Post是通过提交表单来传值。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。
6.请解释一下 JavaScript 的同源策略
概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。
这里的同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议。
指一段脚本只能读取来自同一来源的窗口和文档的属性。
为什么要有同源限制?
我们举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。
7.Flash、Ajax各自的优缺点,在使用中如何取舍?
Flash适合处理多媒体、矢量图形、访问机器;对CSS、处理文本上不足,不容易被搜索。
Ajax对CSS、文本支持很好,支持搜索;多媒体、矢量图形、机器访问不足。
共同点:与服务器的无刷新传递消息、用户离线和在线状态、操作DOM
8.什么是闭包?
闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:
(1)作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
(2) 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
9.javascript里面的继承怎么实现,如何避免原型链上面的对象共享
用构造函数和原型链的混合模式去实现继承,避免对象共享可以参考经典的extend()函数,很多前端框架都有封装的,就是用一个空函数当做中间变量
10.ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
其他
----------------------------
1.一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?
(1)查找浏览器缓存
(2)DNS解析、查找该域名对应的IP地址、重定向(301)、发出第二个GET请求
(3)进行HTTP协议会话
(4)客户端发送报头(请求报头)
(5)服务器回馈报头(响应报头)
(6)html文档开始下载
(7)文档树建立,根据标记请求所需指定MIME类型的文件
(8)文件显示
2.为什么换工作?
3.你常用的开发工具是什么,为什么?
4.对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?
5.加班的看法?
加班就像借钱,原则应当是------救急不救穷
转载于:https://www.cnblogs.com/Candy1029/p/5540418.html
前端面试题整理【转】相关推荐
- 前端面试题整理汇总(一)
前端面试题整理汇总(一) 优才网 关于前端面试题,优优之前推荐过,如下,点击即可查看: 5个经典的前端面试问题 2016年十家知名公司前端面试经验总结 前端面试会问哪些问题? 前端开发面试题汇总[HT ...
- 前端面试题整理2020
前端面试题整理2020 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5. ...
- 前端面试题整理——(第一弹 HTML和CSS)
文章目录 前端面试题整理--(第一弹 HTML和CSS) 1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? 2. 每个HTML文件里开头都有个很重要的东西,Doctype,知道这是干什 ...
- 最新前端面试题整理和答案(全)一直更新
最新前端面试题整理和答案(全) 参考地址:https://blog.csdn.net/wdlhao/article/details/79079660 javascript: JavaScript中如何 ...
- 前端面试题整理-ing---kalrry
前端面试题整理-ing---kalrry 前言 一.Html/Css面试题 1. img中的alt和title的区别 2. rem/em/vw的区别 3. BFC 是什么 4. @media all ...
- 前端面试题整理(定期更新)
前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
- 【前端】前端面试题整理
前端和计算机相关知识 你能描述一下渐进增强和优雅降级之间的不同吗 浏览器兼容问题 如何对网站的文件和资源进行优化? 怎么学习前端?怎么接触前端新知识? 关于前后端分离 关于浏览器内核(渲染引擎) 浏览 ...
- 菜鸡前端面试题整理日记
一直以来都有写点什么东西的想法,但又整天犹犹豫豫的,一会觉得准备不够充分,写的内容没什么质量,一会又觉得没什么内容可写的,以至于一拖再拖.万事开头难,难着难着就没有下面了,以此先开个头,记录自己的成长 ...
- WEB前端面试题整理
WEB前端面试题 文章目录 WEB前端面试题 一.html部分 1.Doctype有什么作用?标准模式与兼容模式有什么区别 2.标准模式与兼容模式(怪异模式)各有什么区别? div1和div2之间的距 ...
- 前端面试题整理 (ES6篇)
分享一个前端面试题库小程序 MST题宝库 1.es5和es6的区别,说一下你所知道的es6 ECMAScript5,即ES5,是ECMAScript的第五次修订,于2009年完成标准化 ECMA ...
最新文章
- 创业路上的这点事之 从无到有,从有到......
- 图片裁剪功能集成优化
- numpy和pandas的基础索引切片
- .Net应用程序打包部署总结
- Vlan的详解-----看完明白tag and untagged
- Sumatra PDF——好用快捷工具介绍及使用
- 象棋在线对战网页源码源码安装
- L-ScanPort2.0beta版+完整源代码
- 北斗在线app服务器,北斗卫星导航app,北斗卫星导航app官网手机版预约 v1.0 - 浏览器家园...
- Java计算税收代码实现
- SOI上的FinFET
- 一个程序员的成长进阶路径
- UE4(unreal engine4)蒙太奇动画删除不想要的帧数
- 离岸人民币和跨境人民币收款业务
- 为什么要阅读计算机经典著作
- 我看你骨骼惊奇,送你本武林秘籍--《三子棋至多子棋的扩展》
- 笔记本电脑键盘按键有两个功能,如何切换
- DB2与Sybase/Oracle/Informix的比较
- C_教程_Ubuntu安装COMSOL-MATLAB-FDTD Solutions
- tomcat 的优化配置