前端面试的一些准备

2016-12-29 本文已影响47人 Nico酱

bootstrap优势

1.节省时间,可以利用现成的代码片段
2.可定制化
3.栅格系统
4.前端 ui 库，通过现成的ui组件能够迅速搭建前端页面。
5.Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
6.类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局
7./* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
8.增加的标签 <del> <mark> <s> <ins></ins> <u></u> <small>
9.响应式工具 visible | hidden
10.“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）

Web服务器的工作原理可以简单地定义为：

1	客户机通过TCP/IP协议建立到服务器的TCP连接
2	客户端向服务器发送HTTP协议请求包，请求服务器里的资源文档
3	服务器向客户机发送HTTP协议应答包，如果请求的资源包含有动态语言的内容，那么服务器会调用动态语言的解释引擎负责处理“动态内容”，并将处理得到的数据返回给客户端
4	客户机与服务器断开。由客户端解释HTML文档，在客户端屏幕上渲染图形结果

cookie,localStorage,sessionStorage的异同

都是存储在客户端,都有大小限制
cookie主要用户和服务器进行交互,而webstorage主要用于在本地存储
cookie限制大小每个4k,不能超过300个,webstorage能达到5M;
cookie有时效性,可以设置时间有效期,还可以设置作用域
localstorage如果不手动清除会一直保存,而sessionStorage会在会话窗口关闭后失效

性能优化

文件合并,压缩,使用css spirit
减少DOM结构
资源请求不同的域名
js文件放在页面的底部,压缩,删除不必要的脚本;
css文件放在页面头部,从外部引入,
使用cdn服务,减少src为空的img标签
合理的设置http缓存,控制好cookie和webstorage的使用

如何设置浮动居中

<style>
.box{
  float:left;
  width:200px;
  height:200px;
  position:relative;
  left:50%;
  margin-left:-100px;
}
</style>

描述flex布局

flex是flexible box,为弹性布局,任何一个容器可以被制定为flex'布局
容器有两根轴,主轴和交叉轴,默认项目沿主轴排列;
容器有以下属性对其项目进行操作:flex-direction,flex-wrap,flex-flow,justify-content,align-items,align-content,单个项目:align-self ,order

promise

promise是抽象异步处理对象以及对齐进行各种操作的组件,异步的处理
promise.then(function onFulfilled(){}).catch(function onRejected(){})

$q $watch $digest $apply

$q是$http 机制的promise,管理异步回调

$watch队列, 监视器,当绑定东西到ui上是就会往$watch队列里面插入一条;可以检测它监视的model里面

app.controller('MainCtrl', function($scope) {
  $scope.name = "Angular";

  $scope.updated = 0;

  $scope.$watch('name', function(newValue, oldValue) {
    if (newValue === oldValue) { return; } // AKA first run
    $scope.updated++;
  });
});

$digest循环,浏览器接收到一个事件，进入angular context。$digest循环开始执行，这个循环是由两个更小的循环组合起来的。一个处理evalAsync队列，另一个处理$watch队列。由于监视$scope.name的$watch报告了变化，它会强制再执行一次$digest循环。新的$digest循环没有检测到变化。浏览器拿回控制权，更新与$scope.name新值相应部分的DOM。
$ apply可以显式启动$digest循环.当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入.

element.bind('click', function() {
scope.$apply(function() {
   scope.foo++;
   scope.bar++;
});
})

//$watch 例子
element.bind('click', function() {
  scope.$apply(function() {
      scope.foo++;
      scope.bar++;
  });
})

插件

$.fn.plugin=function(){}

继承:子类不影响父类,子类可以继承父类的一些功能

属性继承:调用父类的构造函数(call)

方法继承: 拷贝继承(有new或无new都可以)
拷贝继承:父类的原型赋给子类的原型(出现对象的引用,两个修改一个会互相影.
(不影响)可以用原型拷贝(自己封装拷贝方法)
function Child(){
    //分开继承方法
    Parent.call(this);
}

//继承方法;
function copy(obj1,obj2){
    for(var attr in obj2){
        obj1[attr] = obj2[attr]
    }
}
//如果直接让原型赋值相等,不能体现各异性,修改一个值会影响所有的子类
copy(Child.prototype,Parent.prototype);
var a = new Parent();
var b = new Child();

类式继承(比较适合构造函数):

构造函数想象看作是类,父类的实例赋值给子类的原型

然后修改构造器的指向(constructor)child.prototype.constructor=child;
由于属性修改该变子类;应该分开来继承
//继承属性
function Bbb(){
  Aaa.call(this);
}
var F = function(){};//为了将属性和方法分开继承 
F.prototype = Aaa.prototype;
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb;
原型继承.比较适合无new的形式
var a ={
  name:'xiaoming'
}
var b = clone(a);
b.name;
function clone(obj){
  var F = function(){};
  F.prototype = obj;
  return new F();
}

attribute和property的区别

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

创建

DOM对象初始化时会在创建默认的基本property；
只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；
attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中；
attribute的值都是字符串；
数据绑定

attributes的数据会同步到property上，然而property的更改不会改变attribute；
对于value，class这样的属性/特性，数据绑定的方向是单向的，attribute->property；
对于id而言，数据绑定是双向的，attribute<=>property；
对于disabled而言，property上的disabled为false时，attribute上的disabled必定会并存在，此时数据绑定可以认为是双向的；
使用

可以使用DOM的setAttribute方法来同时更改attribute；
直接访问attributes上的值会得到一个Attr对象，而通过getAttribute方法访问则会直接得到attribute的值；
大多数情况（除非有浏览器兼容性问题），jQuery.attr是通过setAttribute实现，而jQuery.prop则会直接访问DOM对象的property；
到这里为止，得出，property是DOM对象自身就拥有的属性，而attribute是我们通过设置HTML标签而给之赋予的特性，attribute和property的同名属性/特性之间会产生一些特殊的数据联系，而这些联系会针对不同的属性/特性有不同的区别。

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

a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面结构，页面重构和用户体验；
e. 处理hack，兼容、写出优美的代码格式；
f. 针对服务器的优化、拥抱最新前端技术。

XML

XML 指可扩展标记语言（EXtensible Markup Language）
XML 是一种标记语言，很类似 HTML
XML 的设计宗旨是传输数据，而非显示数据
XML 标签没有被预定义。您需要自行定义标签。
XML 被设计为具有自我描述性。
XML 是 W3C 的推荐标准

兼容性问题

1、在IE6中图片会存在间隙问题

把img转块元素

2、双倍边距，当IE6及更低版本浏览在解析浮动元素，会错误把浮向边距加倍显示

把浮动元素转行内元素

3、默认高度，IE6部分块元素在低于18PX的时候拥有默认高度

font-size：0或者overflow：hidden

4、几大浏览器表单行高可能不一致，表单元素对齐方式也不一致

给表单元素添加：float：left

5、按钮默认值不同

统一大小，在input外套个div，给div写样式，同事去掉input的border

6、透明度

ie:filter:alpha(opacity:80);ff、chrome：opacity：0.8；

7、当div宽小于图片，ie6 div会撑大到图片大小，而其他不会撑

将图片定义成div大小

8、当子元素没有浮动时，设置margin-top会把该属性给父元素。

`给父元素添加overflow:hidden，或者给子元素设置float`

闭包

使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念

闭包有三个特性：

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

   function aaa() {  
          var a = 1;  
          return function(){
           alert(a++)
          };  
        }         
        var fun = aaa();  
        fun();// 1 执行后 a++，，然后a还在~  
        fun();// 2   
        fun = null;//a被回收！！

谈谈你对Ajax的理解？(概念、特点、作用)

AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML）是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。

优点

a、不需要插件支持
b、优秀的用户体验
c、提高Web程序的性能
d、减轻服务器和带宽的负担

缺点

a、破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补
b、对搜索引擎的支持不足

<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

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

基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户

你所了解到的Web攻击技术

（1）XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击。
（2）SQL注入攻击
（3）CSRF（Cross-Site Request Forgeries，跨站点请求伪造）：指攻击者通过设置好的陷阱，强制对已完成的认证用户进行非预期的个人信息或设定信息等某些状态更新。

http请求

首先是域名解析,建立tcp协议(3次握手),客户端向服务端请求html,服务器响应请求,浏览器得到代码,然后请求代码中的资源,浏览器对页面进行渲染并呈现给用户

兼容性问题

图片间隙问题解决display:block

浮动元素的双边距问题,display:inline

ie6的块有默认高度;用fontsize:0;

按钮的大小不一致外面包一个div,写样式

表单行高不一致float:left

透明度问题:opacity filter:alpha(opacity:)

//gulp使用
var gulp = require('gulp'),
    plugins = require('gulp-loading-plugins')();
gulp.task('autoless',function(){
  gulp.src('*.cless')
  .pipe(plugins.less())
  .pipe(gulp.dest('/js'))
})
gulp.task('watch',function(){
  gulp.watch('*.less',['autoless'])
})

//继承
//拷贝继承
function Parent(){
  this.name = 'name'
}
Parent.prototype.say=function(){
  console.log(this.name)
}
function Child(){
  Parent.call(this);
}
function copy(obj1,obj2){
  for(var arttr in obj2){
    obj1[attr] = obj2[attr]
  }
}
copy(Child,Parent);

//类式继承
function F(){};
F.prototype = Parent.prototype;
Child.prototype = new F();
Child.prototype.constructor = Child;

//以往类式继承的问题
1, Child.prototype = new Parent(); //首先new Parent()实例覆盖了原型,改变了constructor的指向,所以添加Child.Prototype.constructor = Child;
2, 对于属性的继承,例如是this.name = [],在子例使用push等方法时,会使所有的后代属性发生改变(如果直接赋值就不一样了,b.name = ['2'],重写了属性,此时并不是在原型下修改)
3, 正确做法应该采取将属性和方法分开继承
4,创建一个空的var F=function(){};F.prototype = Parent.prototype;
5, Child.prototype = new F();
6, 此时,chil就只继承了原型,没有继承方法

JQ插件实例

 ;(function($,window,document,undefined){
            var defaults = {

            }
            function Drag(ele){
                //注意传进来的为jq对象
                this.$ele=ele;
                
            }
            Drag.prototype.init=function(){
                var that = this;
                this.$ele.mousedown(function(e){
                    that.mouseDown(e);
                    //需要jq对象
                    $(document).mousemove(function(e){
                        that.mouseMove(e)
                    })
                    $(document).mouseup(function(){
                        that.stop();
                    })
                });
                return this;
            }
            Drag.prototype.mouseDown=function(e){
                var e = e ||Event
                     this.disX= e.offsetX;
                     this.disY = e.offsetY;
                
            }
            Drag.prototype.mouseMove=function(e){
                    var e = e ||Event;
                    var L = e.clientX-this.disX,
                        T = e.clientY-this.disY;

                    this.$ele.css({
                        left:L,
                        top:T
                     });
                    
            }
            Drag.prototype.stop = function(){
                // $(document).on('mousemove',null);
                // $(document).on('mouseup',null);
                $(document).off()
            }
            $.fn.myplugin=function(){
                var drag = new Drag(this);
                return drag.init();
            }
        })(jQuery,window,document)
        $(function(){
            $('.box').myplugin().css('background','green');
        })

前端面试的一些准备

插件

你所了解到的Web攻击技术

猜你喜欢

热点阅读