前端面试问题总结

青春..荒唐

浏览: 976223 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

笔记随笔

笔记随笔

闭包:

闭包:https://segmentfault.com/a/1190000000652891
js链式作用域结构,作用:①函数外部访问局部函数内部变量;②将变量保存在内存里,不会被垃圾回收机制回收
缺点:内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除

HTTP

浏览器本地存储:
HTML5中提供了localStorage,持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
相对比sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

css相关:
①display:none和visibility:hidden的区别:
display不占空间,visibility(清晰度)透明,任然占空间
②CSS中 link 和@import 的区别
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
(4) link方式的样式的权重高于@import的权重.
③position:absolute和float属性的异同
共同点：
对内联元素设置`float`和`absolute`属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：
float仍会占据位置，position会覆盖文档流中的其他元素。
④box-sizing属性
主要用来控制元素的盒模型的解析模式。默认值是content-box。
content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

[注意]:标准浏览器下，按照W3C规范对盒模型解析，一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。
⑤CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些?
优先级:!important > id > class > tag
important 比内联优先级高,但内联比 id 要高
伪元素::enabled :disabled 控制表单控件的禁用状态 :checked 单选框或复选框被选中

html相关:
语义化:选择合适的标签
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档
DOCTYPE文档类型:严格版本、过渡版本以及基于框架的 HTML 文档,DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现
HTML与XHTML——二者有什么区别:
XHTML相对更加严谨,比如图片必须加文字说明,所有标签的元素和属性的名字都必须使用小写

常见兼容性问题:
①浏览器默认的margin和padding不同。解决方案是(初始化css里)加一个全局的*{margin:0;padding:0;}来统一
②Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.
③超链接访问过后hover样式就不出现了被点击访问过的超链接样式不在具有hover(悬停)和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}---爱恨原则LoVe/HAte

清除浮动:
①直接给父级添加高度,前提是知道并计算好内容高度
②在父级标签尾部,添加标签<div class="clear"></div>,然后给clear类添加css属性:clear:both;

即额外标签法<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁）
③比较简便的方法:给父级添加css属性:overflow:hidden;即可.因为这个属性是把父级紧贴内容,从而实现清除浮动.

DOM操作——怎样添加、移除、移动、复制、创建和查找节点
（1）创建新节点
      createDocumentFragment()    //创建一个DOM片段
      createElement()   //创建一个具体的元素
      createTextNode()   //创建一个文本节点
（2）添加、移除、替换、插入
      appendChild()
      removeChild()
      replaceChild()
      insertBefore() //在已有的子节点前插入一个新的子节点
（3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
      getElementById()    //通过元素Id，唯一性

html5和html的区别 :
可以大致理解为:HTML 5 ≈ HTML4.0+CSS3+JS+API
①在文档声明上，HTML5更加简洁,<!DOCTYPE html>.而HTML有很长段代码,如<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
②结构语义上更加优化<header> 、<nav>、<article>、<aside>、<footer>.
③添加了许多新功能:绘图,视频标签等

实现浏览器内多个标签页之间的通信:
调用localstorge,cookies等本地存储

减少页面加载时间的方法:
①优化css;②优化图片;③标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

css link和@import区别用法:
都是引入css到html,用法:
①在html里
<style type="text/css">
@import url(CSS文件路径地址)
</style>
②在css里
直接使用
@import url(CSS文件路径地址)
<link>是html标签，只能放入html源代码中使用，@import可看作为css样式，作用是引入css样式功能。@import在html使用时候需要<style type="text/css">标签，同时可以直接“@import url(CSS文件路径地址);”放如css文件或css代码里引入其它css文件

null和undefined的区别:null是不存在;而undefined是未定义

new操作符:
1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用，并且最后隐式的返回 this

js延迟加载的方式:
defer和async、动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）、按需异步载入js
是将 js 切分成许多模块,就像图片的延迟加载，在图片出现在可视区域内时（在滚动条下拉）才加载显示图片。

js异步加载:http://blog.csdn.net/m13666368773/article/details/7586106
同步加载:和开发的瀑布模型类似,会阻止浏览器的后续处理,比如文件的加载,渲染等
之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为

解决跨域问题:jsonp的原理是动态插入script标签

documen.write和 innerHTML的区别:
①document.write只能重绘整个页面
②innerHTML可以重绘页面的一部分

判断当前脚本运行在浏览器还是node环境中:
控制台检验alert(this);判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

对前端界面工程师这个职位是怎么样理解的？
前端是最贴近用户的程序员，比后端、数据库都更加近。
1、实现界面交互;2、提升用户体验

页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么?
连接建立TCP/IP连接，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。Web服务器提供资源服务后，客户端开始下载资源。

平时如何管理你的项目？
先确定好确定好全局样式（globe.css），编码模式(utf-8)
页面进行标注（例如页面模块开始和结束）；标注模块

javascript对象的几种创建方式;
1，工厂模式2，构造函数模式3，原型模式

[注意]ajax过程
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

异步加载和延迟加载

1.异步加载的方案：动态插入script标签
2.通过ajax去获取js代码，然后通过eval执行
3.script标签上添加defer或者async属性
4.创建并插入iframe，让它异步执行js
5.延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。

GET和POST区别:
Get是通过地址栏来传值，而Post是通过提交表单来传值
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

Javascript无阻塞加载具体方式:
将脚本放在底部。<link>还是放在head中，用以保证在js加载前，能加载出正常显示的页面。<script>标签放在</body>前

ajax的缺点
在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载
1、安全问题 AJAX暴露了数据交互的细节。
2、不容易调试。

前端模块化:
使用define定义模块，使用require调用模块,export导出模块

网站重构:优化网站

输入url到页面加载完成经历了什么?
①URL包含协议,IP,资源路径.所以输入地址后会先查找IP,然后向服务器发送HTTP请求
②服务器处理好请求后,返回一个HTTP响应,浏览器显示HTML中资源
③根据资源类型进行渲染

cookie:
可以将数据持久保存在客户端,但有大小限制

初始化CSS样式:解决浏览器兼容性

JSON 是存储和交换文本信息的语法,用于数据交换
①向服务器发送数据时一般是字符串,可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
②接收服务器数据时一般也是字符串,可以用 JSON.parse() 方法将数据转换为 JavaScript 对象

MongoDB
非关系型数据库,将数据存在文档里,数据结构由键值对组成,文档类型相当JSON对象
一个mongodb中可以建立多个数据库。
默认数据库为"db"，该数据库存储在data目录中

AngularJS
AngularJS是一个JS框架。通过指令扩展了HTML，且通过表达式绑定数据到HTML

跨域:
网址:http:// www . google : 8080 / script/jquery.js
http:// （协议号）www （子域名）google （主域名）8080 （端口号）script/jquery.js （请求的地址）
定义: 当协议、子域名、主域名、端口号中任意一各不相同时，都算不同的域
处理跨域方法:代理,通过后台获取其他域名下的内容,再返回给前端.也就是A的服务在后台做了一个代理，前端只需要访问A的服务器也就相当与访问了B的服务器。这种代理属于后台的技术

CSS相关:
①z-index 属性设置元素的堆叠顺序
②position类型:absolute,relative,fixed,static(默认无定位)
③水平居中:行级元素设置其父元素的text-align.块级元素设置其本身的left 和 right margins为auto
④垂直居中:
1.单行文本垂直居中:line-height
2.图片垂直居中:
①父级元素设置line-height;图片设置(垂直)vertical-align: middle;(正中)
②适用：通用
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {display: table;}
#child {display: table-cell;vertical-align: middle;}
低版本 IE fix bug：
#child {display: inline-block;}
3.多行内容居中，且容器高度可变:给出一致的 padding-bottom 和 padding-top
4.把容器当作表格单元:
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
display: table-cell;height: 300px;vertical-align: middle;

垂直居中例子网址:http://www.blueidea.com/tech/web/2006/3231.asp

HTTP协议网络:
是基于TCP的应用层协议,客户端和服务端数据传输的格式和数据交互行为,最初是用来向客户端传输HTML页面的内容
通常，由HTTP客户端发起一个请求，建立一个到服务器指定端口（默认是80端口）的TCP连接。
{TCP基于字节流的传输层通信协议}
HTTP服务器则在那个端口监听客户端发送过来的请求。一旦收到请求，服务器（向客户端）发回一个状态行，比如"HTTP/1.1 200 OK"，和（响应的）消息，消息的消息体可能是请求的文件、错误消息、或者其它一些信息
用于从WWW服务器传输超文本到本地浏览器的传输协议,输入URL(统一资源定位符)确定后,HTTP从服务器提取网页代码到浏览器进行渲染

盒子模型:
页面布局时所用,标准W3C盒子模型和传统IE盒子模型.
区别:标准盒子模型content只是content,而IE的content包含padding,border

行内元素和块级元素的区别:
块级元素会自动换行，而行内元素不会自动换行
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
行内元素转换为块级元素display:block

行内块级元素
在IE8以下的兼容性
div {
    display： inline-block；
    *zoom： 1；
    *display： inline；
}
解析：
*zoom：1作用是在IE下触发hasLayout
*display：inline作用作用是一旦触发了hasLayout设置display：inline和display：block效果相似。

文档流和文本流:
文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。

分享到：

git基础 | 面试总结---函数调用

2017-09-09 15:32
浏览 1269
评论(3)
分类:Web前端
查看更多

3 楼青春..荒唐 2017-09-12

标准
①lang 属性规定元素内容的语言，lang="zh-CN"内地；en为英文，这时有的浏览器会提示你是否需要翻译
②根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。但通常在开发时，css最好加上type属性

2 楼青春..荒唐 2017-09-12

新增1：
①垂直居中一个img：
img{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
②字体大小：px与em区别
px的值是固定的，em值不是固定的，并且em会继承父级元素的字体大小
③CSS基本属性构成：选择器，属性，值
④JS数据类型转换：转字符串toString();parseInt() 转换成整数，parseFloat()转换成浮点数
⑤split与json区别：分割字符串，数组转字符串

1 楼青春..荒唐 2017-09-12

新增：
①事件委托：利用事件冒泡，自己所触发的事件，让父元素代替执行。
②对this的理解：一般情况下是全局对象Global，作为方法调用时，this指向调用函数的对象
③Table布局和DIV CSS布局区别：Table布局影响页面加载和渲染，限制页面设计的自由性；
而DIV CSS布局页面加载速度更快，且易于优化
④title与alt区别：alt是图片加载失败时显示，而title是鼠标悬停时提示文字
⑤src与href区别：
src：指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，这也是为什么将js脚本放在底部而不是头部。
href：如果我们在文档中添加 link href=”common.css” rel=”stylesheet”
那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。
⑥设置CSS样式的方式：外部样式表，内部样式表，内联样式表
⑦CSS通过哪些属性定义，可以使DOM元素不显示在浏览器可视范围内：
最基本的：display:none;class:hide;
技巧性：宽高为0；visibility:none（透明度）；z-index：-1000；

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论