前端面试的一些准备

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的异同

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

性能优化

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

如何设置浮动居中

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

描述flex布局

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

promise

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

$q $watch $digest $apply

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

  2. $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++;
  });
});

    ​

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

  4. $ apply可以显式启动$digest循环.当事件触发时，你调用$apply，它会进入angular context，如果没有调用就不会进入.

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

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

插件

  1. $.fn.plugin=function(){}

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

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

方法继承: 拷贝继承(有new或无new都可以)

  1. 拷贝继承:父类的原型赋给子类的原型(出现对象的引用,两个修改一个会互相影.

  2. (不影响)可以用原型拷贝(自己封装拷贝方法)

    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();

    ​

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

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

  2. 然后修改构造器的指向(constructor)child.prototype.constructor=child;

  3. 由于属性修改该变子类;应该分开来继承

    //继承属性
function Bbb(){
  Aaa.call(this);
}
var F = function(){};//为了将属性和方法分开继承 
F.prototype = Aaa.prototype;
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb;

  4. 原型继承.比较适合无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');
        })
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342

推荐阅读更多精彩内容

  • 前端面试题整理
    在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,224评论 24赞 450
  • Spring Cloud
    Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智...
    卡卡罗2017阅读 134,585评论 18赞 139
  • Github_web_2
    五十三：请解释 JavaScript 中 this 是如何工作的。1.方法调用模式当一个函数被保存为一个对象的属性...
    Arno_z阅读 567评论 0赞 2
  • Spring 5.0.0框架介绍_中英文对照_3.4
    文章作者：Tyan博客：noahsnail.com 3.4 Dependencies A typical ente...
    SnailTyan阅读 4,128评论 2赞 7
  • 夜
    夜色 吞没一切 剩下灯火辉煌
    一团菌阅读 249评论 2赞 1