关于前端面试技能点分析

楼主总结了一些关于前端面试时技能点的知识点：里面的知识都是从互联网上找到的。

一、熟练使用HTML/CSS，可以手写符合W3C标准的页面，可以兼容主流浏览器，能够精确还原设计图；

 

浏览器兼容问题：

 

浏览器兼容问题一：不一样浏览器的标签默认的外补丁和内补丁不一样

 

问题症状：随便写几个标签，不加样式控制的状况下，各自的margin 和padding差别较大。

 

碰到频率:100%

 

解决方案：CSS里    *{margin:0;padding:0;}

 

备注：这个是最多见的也是最易解决的一个浏览器兼容性问题，几乎全部的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

 

浏览器兼容问题二：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大

 

问题症状:常见症状是IE6中后面的一块被顶到下一行

 

碰到频率：90%（稍微复杂点的页面都会碰到，float布局最多见的浏览器兼容问题）

 

解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性

 

备注：咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题。

 

浏览器兼容问题三：设置较小高度标签（通常小于10px），在IE6，IE7，遨游中高度超出本身设置高度

 

问题症状：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度

 

碰到频率：60%

 

解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

 

备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。

 

浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，IE6间距bug

 

问题症状：IE6里的间距比超过设置的间距

 

碰到概率：20%

 

解决方案：在display:block;后面加入display:inline;display:table;

 

备注：行内属性标签，为了设置宽高，咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。

 

浏览器兼容问题五：图片默认有间距

 

问题症状：几个img标签放在一块儿的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起做用。

 

碰到概率：20%

 

解决方案：使用float属性为img布局

 

备注：由于img标签是行内属性标签，因此只要不超出容器宽度，img标签都会排在一行里，可是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（个人一个学生使用负margin，虽然能解决，但负margin自己就是容易引发浏览器兼容问题的用法，因此我禁止他们使用）

 

浏览器兼容问题六：标签最低高度设置min-height不兼容

 

问题症状：由于min-height自己就是一个不兼容的CSS属性，因此设置min-height时不能很好的被各个浏览器兼容

 

碰到概率：5%

 

解决方案：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

 

备注：在B/S系统前端开时，有不少状况下咱们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候咱们就会面临这个兼容性问题。

 

浏览器兼容问题七：透明度的兼容CSS设置

 

作兼容页面的方法是：每写一小段代码（布局中的一行或者一块）咱们都要在不一样的浏览器中看是否兼容，固然熟练到必定的程度就没这么麻烦了。建议常常会碰到兼容性问题的新手使用。不少兼容性问题都是由于浏览器对标签的默认属性解析不一样形成的，只要咱们稍加设置都能轻松地解决这些兼容问题。若是咱们熟悉标签的默认属性的话，就能很好的理解为何会出现兼容问题以及怎么去解决这些兼容问题。

 

- /* CSS hack*/

 

我不多使用hacker的，多是我的习惯吧，我不喜欢写的代码IE不兼容，而后用hack来解决。不过hacker仍是很是好用的。使用hacker我能够把浏览器分为3类：IE6 ；IE7和遨游；其余（IE8 chrome ff safari opera等）

 

◆IE6认识的hacker 是下划线_ 和星号 *

 

◆IE7 遨游认识的hacker是星号 *

 

好比这样一个CSS设置：

 

- height:300px;*height:200px;_height:100px;

 

IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 因此当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,因此他又会覆盖掉200px高的设置，把高度设置为100px；

 

IE7和遨游也是同样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，由于它们不认识_height。因此它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;因此他们会把高度解析为300px。由于优先级相同且想冲突的属性设置后一个会覆盖掉前一个，因此书写的次序是很重要的。

 

关于透明度兼容：

function setAlphaOpacity(elm,value){

    elm=typeof elm=="string"?document.getElementById(elm):elm;

    if(document.all){ //IE

        elm.style.filter='alpha(opacity='+value+')';

    }else{            //FF

        elm.style.opacity=value/100;

    }

}

浏览器引擎前缀(Vendor Prefix)有哪些？

 

-moz-    /* 火狐等使用Mozilla浏览器引擎的浏览器 */
-webkit-  /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */
-o-      /* Opera浏览器(早期) */
-ms-      /* Internet Explorer (不必定) */

二、深刻理解JavaScript高级特性（如OOP、继承、原型链、闭包等），了解ES6新特性

 

OOP：面向对象是一种编程思想，用一句话来讲，就是抽象封装继承多态。

 

继承：有四种：

一、原型链继承

二、构造函数继承

三、组合继承

四、冒充对象继承

 

原型链：

有限的实例对象和原型之间组成有限链，就是用来实现共享属性和继承的

 

闭包：

一、有权访问另外一个函数做用域内变量的函数都是闭包

二、闭包的做用:

（1）、造成隔离的封闭空间

（2）、延长变量的生命周期（正常状况下，函数调用结束以后，那么函数内部的变量都会被销毁）

（3）、缓存数据

三、缺点：

（1）消耗内存

（2）内存泄漏：闭包，全局变量，没有清理的DOM元素引用，被遗忘的定时器回调

 

ES6新特性：

（1）块级做用域

（2）关键字

（3）变量解构赋值

（4）字符串的扩展

（5）数组扩展

（6）函数扩展

三、熟练使用Ajax进行先后台数据交互，熟练使用JSONP解决浏览器常见的跨域请求问题

 

var xhr =null;//建立对象

if(window.XMLHttpRequest){

   xhr = new XMLHttpRequest();

}else{

   xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

     xhr.open(“方式”,”地址”,”标志位”);//初始化请求

     xhr.setRequestHeader(“”,””);//设置http头信息

     xhr.onreadystatechange =function(){}//指定回调函数

     xhr.send();//发送请求

 

Ajax原生代码：

    // 1.实例化对象

    var xhr = new XMLHttpRequest();

 

    // 2.设置请求行(请求方式,请求地址)  要使用open方法来设置

    // false表明不是异步 是同步  已经被弃用

    xhr.open('post','./anync.php',true);

 

    // 3.设置请求头(post请求必须写这样的请求头)

    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    // 4.设置请求正文 格式:key=value&key=value  

 

    xhr.send('username=wanlum&password=1314520');

 

    // 5.监听并处理响应

    // xhr.onreadystatechange=function(){

    //   if(xhr.readyState == 4 && xhr.status== 200){

    //     // document.querySelector('p').innerHTML +=xhr.responseText;

    //     console.log(xhr.responseText);

    //   }

1. 建立XMLHttpRequest对象,也就是建立一个异步调用对象

2. 建立一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

优势：

 Ajax能够实现异步通讯效果，实现页面局部刷新，带来更好的用户体验；按需获取数据，节约带宽资源；

缺点：

一、ajax不支持浏览器back按钮。

 二、安全问题 AJAX暴露了与服务器交互的细节。

 三、对搜索引擎的支持比较弱。

 四、破坏了程序的异常机制。

get和post（ajax版本）

 

get通常用来进行查询操做，url地址有长度限制，请求的参数都暴露在url地址当中，若是传递中文参数，须要本身进行编码操做，安全性较低。

post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

 

JSONP:

 

　Jsonp并非一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是经过动态建立script标签，而后经过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，须要事先在页面定义好回调函数，本质上使用的并非ajax技术

 

Ajax是全称是asynchronous JavaScript andXML，即异步JavaScript和xml，用于在Web页面中实现异步数据交互，实现页面局部刷新。

优势：可使得页面不重载所有内容的状况下加载局部内容，下降数据传输量，避免用户不断刷新或者跳转页面，提升用户体验

缺点：对搜索引擎不友好；要实现ajax下的先后退功能成本较大；可能形成请求数的增长跨域问题限制；

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优势：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

 

原生代码：

function myJsonp(url,data,callback){

 

            var fnName = "myJsonp_" + Math.random().toString().replace('.','');

 

            window[fnName] = callback;

 

            var querystring = '';

 

            for(var attr in data){

 

                querystring += attr + '=' + data[attr] + '&'

 

            }

 

            var script = document.createElement('script');

 

            script.src = url + '?' + querystring + 'callback='+ fnName;

 

            script.onload = function(){

 

                document.body.removeChild(script);

 

            }

 

            document.body.appendChild(script);

 

        }

 

四、熟悉流式布局和响应式布局原理，熟悉Bootstrap前端框架，可以开发响应式页面

 

模态框。分页。字体。遮罩层。下拉框。TAB栏

 

响应式布局是关于网页制做的过程当中让不一样的设备有不一样的尺寸和不一样的功能。响应式设计是让全部的人能在这些设备上让网站运行正常

 

五、对前端模块化有必定的了解，对less等预处理有必定的了解

 

模块化：

一个模块就是实现特定功能的文件，有了模块，咱们就能够更方便地使用别人的代码，想要什么功能，就加载什么模块。

 

less和sass是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。

变量符不同，less是@，而Sass是$;

Sass支持条件语句，可使用if{}else{},for{}循环等等。而Less不支持;

Sass是基于Ruby的，是在服务端处理的，而Less是须要引入less.js来处理Less代码输出Css到浏览器

 

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增长了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制做主题、扩充。

六、熟悉主流模板引擎、并熟练操做arttemplate和xtemplate

 

客户端渲染路线：1. 请求一个html -> 2. 服务端返回一个html -> 3. 浏览器下载html里面的js/css文件 -> 4. 等待js文件下载完成 -> 5. 等待js加载并初始化完成 -> 6. js代码终于能够运行，由js代码向后端请求数据( ajax/fetch ) -> 7. 等待后端数据返回 -> 8. 客户端从无到完整地，把数据渲染为响应页面

 

服务端渲染路线：2. 请求一个html -> 2. 服务端请求数据( 内网请求快 ) -> 3. 服务器初始渲染（服务端性能好，较快） -> 4. 服务端返回已经有正确内容的页面 -> 5. 客户端请求js/css文件 -> 6. 等待js文件下载完成 -> 7. 等待js加载并初始化完成 -> 8. 客户端把剩下一部分渲染完成( 内容小，渲染快 )

七、使用git、gulp对代码进行管理和构建，npm、bower等依赖管理工具

 

给远程仓库地址起一个别名

git remote add abc ../../hello.git

这个克隆的名字默认是origin。

克隆下的项目会自动创建跟踪分支（git push 或者 git pull）

git remote查看有哪些远程地址的别名

这时候若是为空则须要本身加

git remote add abc ../../hello.git

更新一下

git pull origin master

想要直接推

git push -u origin master这样就创建了关联。（-u的做用就是创建了跟踪分支,只须要第一次使用，之后能够直接git push）

git remote show origin看出每个别名的地址是什么

 

八、熟练使用Angular，理解MVC、MVVM开发模式和SPA程序开发

 

MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、下降了代码间的耦合度、功能结构清晰可见。

 

     模型（Model）通常用来处理数据（读取/设置），通常指操做数据库。

     视图（View）通常用来展现数据，好比经过HTML展现。

     控制器（Controller）通常用作链接模型和视图的桥梁。

 

 

单页面应用（SPA）：

SPA（Single Page Application）指的是通单一页面展现全部功能，经过Ajax动态获取数据而后进行实时渲染，结合CSS3动画模仿原生App交互，而后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

 

在PC端也有普遍的应用，一般状况下使用Ajax异步请求数据，而后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并无真实存在于文档中，因此当再次刷新页面时新添加的DOM元素会“丢失”，经过单页面应能够很好的解决这个问题。

 

九、熟练使用前端基础类库，如jQuery

 

（1）事件操做

（2）DOM样式操做

（3）标签获取

 

十、对Web前端技术有强烈兴趣，对Node.js有必定的使用经验；

 

NodeJS

是一个运行环境，其使用了一个事件驱动、非阻塞式（异步） I/O的模型，使其轻量又高效

 

宿主环境

  ECMAScript语法规则，须要不一样版本实现。若是说ECMAScript运行在浏览器，称为javascript，简称JS。若是说ECMAScript运行flash环境，称为ActionScript，简称AS。若是ECMAScript运行在Node环境，称为Nodejs。这个环境就是宿主环境。必须依赖于某个环境，ECMAScript须要“寄生在某一宿主环境”。

 

 

十一、熟练使用HTML5和CSS3相关技术开发移动端和PC端前端应用

 

H5 C3的新属性

 

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...

 

CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,

border-color, transform...;

新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了如下的几大类元素。

 

内容元素，article、footer、header、nav、section。

 

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

 

控件元素，webworker, websockt, Geolocation。

 

移出的元素有下列这些：

 

显现层元素：basefont，big，center，font, s，strike，tt，u。

 

性能较差元素：frame，frameset，noframes。

css3:

gradient：gradient(linear,0% 0%,100% 0%,form(red),to(balck))

transform

Transition：property duration timing-function delay

animation

 

十二、了解浏览器和服务器的交互

 

譬如一个http://danYoo网站，以indexhtml为主页，该主页使用index.manifest文件为manifest文件，在该文件中请求本地缓存index.html、hello.js、hello.jpg、hello2.jpg这几个资源文件。

1)    首次访问http://danYoo网站时，它们的交互过程以下所示：

①浏览器请求访问http://danYoo

②服务器返回index.html网页

③浏览器解析index.html网页，请求页面上全部资源文件，包括HTML文件、图像文件、CSS文件、JavaScript脚本文件，以及manifest文件

④服务器返回全部资源文件

⑤浏览器处理manifest文件，请求manifest中全部要求本地缓存的文件，包括index.html页面自己，即便刚才已经请求过这些文件。若是你要求本地缓存全部文件，这将是一个比较大的重复的请求过程。

⑥服务器返回全部要求本地缓存的文件

⑦浏览器对本地缓存进行更新，存入包括页面自己在内的全部要求本地缓存的资源文件，而且触发一个事件，通知本地缓存被更新。

2)    若是再次打开浏览器访问http://danYoo网站，并且manifest文件没有修改过

①浏览器再次请求访问http://danYoo

②浏览器发现这个网页被本地缓存，因而使用本地缓存中index.html页面

③浏览器解析index.html页面，使用全部本地缓存中的资源文件.

④浏览器向服务器请求manifest文件

⑤服务器返回一个304代码，通知浏览器manifest没有发生变化

只要页面上的资源文件被本地缓存过，下次浏览器打开这个页面时，老是先使用本地缓存中的资源，而后请求manifest文件

3)    若是再次打开浏览器时manifest文件已经被更新过了，那么浏览器与服务器之间的交互以下：

①浏览器再次请求访问http://danYoo

②浏览器发现这个页面被本地缓存，因而使用本地缓存中的index.html页面

③浏览器解析index.html页面，使用全部本地缓冲中的资源文件

④浏览器向服务器请求manifest文件

⑤服务器返回更新过的manifest文件

⑥浏览器处理manifest文件，发现该文件已被更新，因而请求全部要求进行本地缓存的资源文件，包括indexhtml页面自己

⑦浏览器返回要求进行本地缓存的资源文件

⑧浏览器对本地缓存进行更新，存入因此新的资源文件。而且触发一个事件，通知本地缓存被更新

须要注意的是，即便资源文件被修改过了，在上面的第3中已经装入的资源文件是不会发生变化的，譬如图片不会忽然变成新的图片，脚本文件也不会忽然使用新的脚本文件，也就是说，这时更新事后的本地缓存中的内容还不能被使用，只有从新打开这个页面的时候才会使用更新事后的资源文件。另外，若是你不想修改manifest文件中对于资源文件的设置，可是你对服务器上请求缓存的资源文件进行了修改，那么你能够经过修改版本号的方式来让浏览器认为imanifest文件已经被更新过了，以便从新下载修改过的资源文件。

 

 ------

额外：

十二、H5C3快速搭建页面布局

 

HTML5/CSS3响应式布局介绍及设计流程，利用css3的media query媒体查询功能。

肯定须要兼容的设备类型、屏幕尺寸

专业技能整理1

制做线框原型

测试线框原型

视觉设计

前端实现

 

1三、懒加载

 

一、大型的电商网站的一个页面上有大量的图片，加载很面。解决办法：

（1）图片懒加载，在页面的未但是区域添加一个滚动条事件。判断图片位置与浏览器顶端的距离与页面的距离，若是前者小于后者，有限加载

（2）若是为幻灯片、相册等，可使用图片预加载技术，将当前展现图片的前一张和后一张优先下载。

（3）若是图片为css图片，可使用CSSsprite、SVGsprite、Iconfont、Base64等技术。

（4）当图片过大，可使用特殊编码的图片，加载时会先加载一张亚索的特别厉害的缩略图，以提升用户体验。

（5）若是图片展现区域小于图片的真实大小，则因在服务器端根据业务须要先行进行图片压缩，图片压缩后大小与展现一致。