前端面试题2

谈谈之前端角度出发作好SEO须要考虑什么

一、了解搜索引擎如何抓取网页和如何索引网页 
  你须要知道一些搜索引擎的基本工做原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web cra何进行工做，搜索引擎如何对搜索结果进行排序等等。  

 二、Meta标签优化 
  主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字好比Au者），Category（目录），Language（编码语种）等。  

 三、如何选取关键词并在网页中放置关键词 
  搜索就得用关键词。关键词分析和选择是SEO最重要的工做之一。首先要给网站肯定主关键词（通常在5个上后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

  四、了解主要的搜索引擎 
  虽然搜索引擎有不少，可是对网站流量起决定做用的就那么几个。好比英文的主要有Google，Yahoo，Bing等有百度，搜狗，有道等。不一样的搜索引擎对页面的抓取和索引、排序的规则都不同。还要了解各搜索门户和搜索的关系，好比AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。  

 五、主要的互联网目录   Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。  

 六、按点击付费的搜索引擎 
  搜索引擎也须要生存，随着互联网商务的愈来愈成熟，收费的搜索引擎也开始大行其道。最典型的有Overture固然也包括Google的广告项目Google Adwords。愈来愈多的人经过搜索引擎的点击广告来定位商业网站，这里面化和排名的学问，你得学会用最少的广告投入得到最多的点击。  

 七、搜索引擎登陆 
  网站作完了之后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）擎。若是你的是商业网站，主要的搜索引擎和目录都会要求你付费来得到收录（好比Yahoo要299美圆），可是好消少到目前为止）最大的搜索引擎Google目前仍是免费，并且它主宰着60％以上的搜索市场。

   八、连接交换和连接普遍度（Link Popularity） 
  网页内容都是以超文本（Hypertext）的方式来互相连接的，网站之间也是如此。除了搜索引擎之外，人们也不一样网站之间的连接来Surfing（“冲浪”）。其它网站到你的网站的连接越多，你也就会得到更多的访问量。更重你的网站的外部连接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名

 

前端页面有哪三层构成，分别是什么？做用是什么？

网页分红三个层次，即：结构层、表示层、行为层。

网页的结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责建立。标签，也就是那些出如今尖括号里的单词，对网页内容的语义含义作出

这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentationlayer）由CSS 负责建立。CSS 对“如何显示有关内容”的问题作出了回答。

网页的行为层（behaviorlayer）负责回答“内容应该如何对事件作出反应”这一问题。这是Javascript 语言和DOM 主宰的领域

 

有没有关注HTML5和CSS3?若有请简单说一些您对它们的了解状况！ 
HTML5标签的改变：<header>,<footer>, <dialog>, <aside>, <figure>, <section> 等 IE9以上开始支持 
CSS3实现圆角，阴影，对文字加特效，增长了更多的CSS选择器

 

以CSS3标准定义一个webkit内核浏览器识别的圆角（尺寸随意）

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;。

 Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

Doctype声明位于文档中的最前面的位置，处于标签以前。此标签可告知浏览器文档使用哪一种 HTML 或 XHTML 规范。该标签可声明三种DTD 类型。

 

  HTTP协议的状态消息都有哪些?(如200、302对应的描述)

成功（2字头）这一类型的状态码，表明请求已成功被服务器接收、理解、并接受

重定向（3字头）这类状态码表明须要客户端采起进一步的操做才能完成请求。一般，这些状态码用来重定向，后续的请求地址（重定向目标）在本次响应的 Location 域中指明。

请求错误（4字头） 这类的状态码表明了客户端看起来可能发生了错误，妨碍了服务器的处理。

服务器错误（五、6字头） 这类状态码表明了服务器在处理请求的过程当中有错误或者异常状态发生，也有多是服务器意识到以当前的软硬件资源没法完成对请求的处理。

 

Javascript继承两种形式

 Js的继承在不少书里面细致的分了不少种类型和实现方式，大致上就是两种：对象冒充、原型方式。这两种方式各有优势和缺陷

 

 cookie的属性有哪些

name字段为一个cookie的名称。

value字段为一个cookie的值。    

domain字段为能够访问此cookie的域名。

path字段为能够访问此cookie的页面路径。 好比domain是abc.com,path是/test，那么只有/test路径下的页面能够读取此cookie。

expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一块儿失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

Size字段 此cookie大小。

http字段  cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能经过document.cookie来访问此cookie。

secure 字段 设置是否只能经过https来传递此条cookie

 

一次完整的HTTP事务是怎样的一个过程？

基本流程：  

a. 域名解析  
b. 发起TCP的3次握手  
c. 创建TCP链接后发起http请求  
d. 服务器端响应http请求，浏览器获得html代码

e. 浏览器解析html代码，并请求html代码中的资源  

f. 浏览器对页面进行渲染呈现给用户

 

 html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

 HTML5 如今已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增长。

绘画 canvas   用于媒介回放的 video 和 audio 元素

 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；   sessionStorage 的数据在浏览器关闭后自动删除 
  语意化更好的内容元素，好比 article、footer、header、nav、section 

（<article> 标签订义外部的内容。）

表单控件，calendar、date、time、email、url、search 

 新的技术webworker, websockt, Geolocation

移除的元素-纯表现的元素：basefont，big，center，font, s，strike，tt，u，对可用性产生负面影响的元素：frame，frameset，noframes；

 

如何区分： DOCTYPE声明\新增的结构元素\功能元素，语义化的理解？

用正确的标签作正确的事情！ 
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析； 在没有样式CCS状况下也以一种文档格式显示，而且是容易阅读的。 搜索引擎的爬虫依赖于标记来肯定上下文和各个关键字的权重，利于 SEO。 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

 

HTML5的离线储存？ 

localStorage    长期存储数据，浏览器关闭后数据不丢失； sessionStorage  数据在浏览器关闭后自动删除

 

介绍一下CSS的盒子模型

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border). 

 

CSS3有哪些新特性

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），   对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） 
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜   增长了更多的CSS选择器  多背景 rgba

 

css定义的权重

权重的规则：标签的权重为1，class的权重为10，id的权重为100

/*权重为1*/ div{} 
/*权重为10*/ .class1{} /*权重为100*/ #id1{} 
/*权重为100+1=101*/ #id1 div{} 
/*权重为10+1=11*/ .class1 div{} 
/*权重为10+10+1=21*/ .class1 .class2 div{}  
若是权重相同，则最后定义的样式会起做用，可是应该避免这种状况出现 

 

Node.js的适用场景？

高并发、聊天、实时消息推送 

 

Javascript如何实现继承

经过原型和构造器

 

事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1. 咱们在网页中的某个操做（有的操做对应多个事件）。例如：当咱们点击一个按钮就会产生一个事件。是能够被 JavaScript 侦测到的行为。   
 2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；  3. ev.stopPropagation(); 

 

什么是闭包（closure），为何要用它？

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，由于say667()的内部函数的执行须要依赖say667()中的变量。这是对闭包做用的很是直白的描述. 

  function say667() { 
    // Local variable that ends up within closure     

　 var num = 666; 

    var sayAlert = function() { 

　　alert(num); 

　 }     

　 num++;    

　 return sayAlert; 

  } 
 var sayAlert = say667(); 
 sayAlert()//执行结果应该弹出的667 

 

如何判断一个对象是否属于某个类？

使用instanceof （待完善）  

 if(a instanceof Person){

       alert('yes');    

}

 

 JSON 的了解？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小 {'age':'12', 'name':'back'}

 

 js延迟加载的方式有哪些？

defer和async、动态建立DOM方式（用得最多）、按需异步载入js

 

如何解决跨域问题?

jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面 

 

异步加载的方式有哪些？

 (1) defer，只支持IE  

 (2) async： 

 (3) 建立script，插入到DOM中，加载完毕后callBack

 

Jquery与jQuery UI 有啥区别？

jQuery是一个js库，主要提供的功能是选择器，属性修改和事件绑定等等。

*jQuery UI则是在jQuery的基础上，利用jQuery的扩展性，设计的插件。  提供了一些经常使用的界面元素，诸如对话框、拖动行为、改变大小行为等等

 

那些操做会形成内存泄漏？

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在

垃圾回收器按期扫描对象，并计算引用了每一个对象的其余对象的数量。若是一个对象的引用数量为 0（没有其余对象引用过该对象），或对该对象的唯一引用是循环的，那么该对象的内存便可回收。 setTimeout 的第一个参数使用字符串而非函数的话，会引起内存泄漏。

 

对前端工程师这个职位你是怎么样理解的？ 

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

b. 参与项目，快速高质量完成实现效果图，精确到1px；

c. 与团队成员，UI设计，产品经理的沟通；

d. 作好的页面结构，页面重构和用户体验；

e. 处理hack，兼容、写出优美的代码格式；

f. 针对服务器的优化、拥抱最新前端技术。

 

浏览器的内核分别是什么? 

IE: trident内核 
Firefox：gecko内核

Safari：webkit内核 

Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核 

Chrome：Blink(基于webkit，Google与Opera Software共同开发) 

 

怎样添加、移除、移动、复制、建立和查找节点？

1）建立新节点 
createDocumentFragment() //建立一个DOM片断 

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

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

2）添加、移除、替换、插入 

appendChild() //添加

removeChild() //移除

 replaceChild() //替换

 insertBefore() //插入  

3）查找 
getElementsByTagName() //经过标签名称 
getElementsByName() //经过元素的Name属性的值 getElementById() //经过元素Id，惟一性 

 

请描述一下cookies，sessionStorage和localStorage的区别

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销 毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而
localStorage用于持久化的本地存储，除非主动删除 数据，不然数据是永远不会过时的。  
web storage和cookie的区别  
Web Storage的概念和cookie类似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，而且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还须要指定做用域，不能够跨域调用。 
除此以外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开发者本身封装 setCookie，getCookie。可是Cookie也是不能够或缺的：Cookie的做用是与服务器进行交互，做为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

 

什么叫优雅降级和渐进加强？ 

渐进加强 progressive enhancement： 
针对低版本浏览器进行构建页面，保证最基本的功能，而后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。  
优雅降级 graceful degradation： 
一开始就构建完整的功能，而后再针对低版本浏览器进行兼容。  区别：  
a. 优雅降级是从复杂的现状开始，并试图减小用户体验的供给  
b. 渐进加强则是从一个很是基础的，可以起做用的版本开始，并不断扩充，以适应将来环境的须要  
c. 降级（功能衰减）意味着往回看；而渐进加强则意味着朝前看，同时保证其根基处于安全地带  

 

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，而且em会继承父级元素的字体大小。 
浏览器的默认字体高都是16px。因此未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em

 

简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。 
同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。 

 

什么是CSS Hack? 

通常来讲是针对不一样的浏览器写不一样的CSS,就是 CSS Hack。 
IE浏览器Hack通常又分为三种，条件Hack、属性级Hack、选择符Hack

 

JavaScript原型，原型链 ? 有什么特色？

原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有本身的原型，若是一个原型对象的原型不为null的话，咱们就称之为原型链。

原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

JavaScript的数据对象有那些属性值？

writable：这个属性的值是否能够改。 　　configurable：这个属性的配置是否能够删除，修改。 　　enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。 　　value：属性值。

页面重构怎么操做？
* 当咱们须要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 若是没有的话，就会查找他的Prototype对象是否有这个属性。 function clone(proto) { 　　function Dummy() { } 　　Dummy.prototype = proto; 　　Dummy.prototype.constructor = Dummy; 　　return new Dummy(); //等价于Object.create(Person); } function object(old) {     function F() {};     F.prototype = old;     return new F(); } var newObj = object(oldObject);

为何要初始化CSS样式。
编写 CSS、让页面结构更合理化，提高用户体验，实现良好的页面效果和提高性能。

• 由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

• 固然，初始化样式会对SEO有必定的影响，但鱼和熊掌不可兼得，但力求影响最小的状况下初始化。

eval是作什么的？

它的功能是把对应的字符串解析成JS代码并运行； 避免使用eval，不安全，很是耗性能（2次，一次解析成js语句，一次执行）。

99%的网站都须要被重构是那本书上写的？

WEB应用从服务器主动推送Data到客户端有那些方式？
网站重构：应用web标准进行设计（第2版）

html5 websoket WebSocket经过Flash XHR长时间链接 XHR Multipart Streaming 不可见的Iframe <script>标签的长时间链接(可跨域)

js的几种数据类型：number,string,boolean,object,undefined js的常见内置对象类：Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以

CSS3

标准定义一个

webkit

内核浏览器识别的圆角（尺寸随意）