微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

前端面试题小集

2017-02-20 21:55 前端大全

(点击上方公众号,可快速关注)


作者:spademan

segmentfault.com/a/1190000008322096

如有好文章投稿,请点击 → 这里了解详情


一、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。


1.使用flex


//html

<div class='box'><div class='left'></div> <div class='right'></div></div>


//css

.box {

    width: 400px;

    height: 100px;

    display: flex;

    flex-direction: row;

    align-items: center;

    border: 1px solid #c3c3c3;

}

.left {

    flex-basis:100px;

    -webkit-flex-basis: 100px;

    /* Safari 6.1+ */

    background-color: red;

    height: 100%;

}

.right {

    background-color: blue;

    flex-grow: 1;

}


2.浮动布局


<div id="left">Left sidebar</div>

<div id="content">Main Content</div>


<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

#left {

    float: left;

    width: 220px;

    background-color: green;

}

#content {

    background-color: orange;

    margin-left: 220px;

    /*==等于左边栏宽度==*/

}

</style>


二、请写出一些前端性能优化的方式,越多越好


1.减少dom操作

2.部署前,图片压缩,代码压缩

3.优化js代码结构,减少冗余代码

4.减少http请求,合理设置 HTTP缓存

5.使用内容分发cdn加速

6.静态资源缓存

7.图片延迟加载


三、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?(流程说的越详细越好)


输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应(从 http://example.com 到 http://www.example.com)

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)

10.浏览器发送异步请求


四、请大概描述下页面访问cookie的限制条件


  1. 跨域问题

  2. 设置了HttpOnly


五、描述浏览器重绘和回流,哪些方法能够改善由于dom操作产生的回流


1.直接改变className,如果动态改变样式,则使用cssText


// 不好的写法

var left = 1;

var top = 1;

el.style.left = left + "px";

el.style.top = top + "px"; // 比较好的写法

el.className += " className1";

// 比较好的写法

el.style.cssText += ";

left: " + left + "px;

top: " + top + "px;";


2.让要操作的元素进行”离线处理”,处理完后一起更新


a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;

b) 使用display:none技术,只引发两次回流和重绘;

c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘


六、vue生命周期钩子


1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed


七、js跨域请求的方式,能写几种是几种


1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据(ie 67 不支持)

5、CORS 需要服务器设置header :Access-Control-Allow-Origin。

6、nginx反向代理 这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求


八、对前端工程化的理解


  • 开发规范

  • 模块化开发

  • 组件化开发

  • 组件仓库

  • 性能优化

  • 项目部署

  • 开发流程

  • 开发工具


九, js深度复制的方式


1.使用jq$.extend(true, target, obj)

2.newobj = Object.create(sourceObj)// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))


十、js设计模式


总体来说设计模式分为三大类:


  • 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

  • 结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

  • 行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模


十一、图片预览


<input type="file" name="file" onchange="showPreview(this)" />

<img id="portrait" src="" width="70" height="75">


function showPreview(source) {

  var file = source.files[0];

  if(window.FileReader) {

      var fr = new FileReader();

      fr.onloadend = function(e) {

        document.getElementById("portrait").src = e.target.result;

      };

      fr.readAsDataURL(file);

  }

}


十二、扁平化多维数组


1、老方法


var result = []

function unfold(arr){

     for(var i=0;i< arr.length;i++){

      if(typeof arr[i]=="object" && arr[i].length>1) {

       unfold(arr[i]);

     } else {        

       result.push(arr[i]);

     }

  }

}

var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)


2、使用tostring


var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

var b = c.toString().split(',')


3、使用es6的reduce函数


var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

var result = flatten(arr)


十三、iframe有那些缺点?


  • iframe会阻塞主页面的Onload事件;

  • 搜索引擎的检索程序无法解读这种页面,不利于SEO;

  • iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。

  • 使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。



看完本文有收获?请转发分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 Chrome 开发者控制台中,你可能意想不到的功能 不装逼地说,在 Google 到底能学到啥? JavaScript This 的六道坎 不装逼地说,在 Google 到底能学到啥? Chrome 开发者控制台中,你可能意想不到的功能
猜您喜欢 信息可以很美(上) kaldi-ctc 构建端到端语音识别系统 MySQL链式复制加速神器: MaxScale Binlog Server(附视频) 拍照怎么搜题?(下) 谷歌发布全新设计语言:跟苹果Swift天壤之别