美文网首页
前端面试题小集

前端面试题小集

作者: sponing | 来源:发表于2017-02-21 11:39 被阅读0次

前端面试题小集


一、一个页面上两个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.浮动布局

html

<div id="left">Left sidebar</div>
<div id="content">Main Content</div>

css

<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.comhttp://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;";
  1. 让要操作的元素进行”离线处理”,处理完后一起更新
  • 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
  • 使用display:none技术,只引发两次回流和重绘;
  • 使用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设计模式

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

  1. 创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
  2. 结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
  3. 行为型模式,共十一种:策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

十一、图片预览

<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属性值,这样可以绕开以上两个问题。

相关文章

  • 前端面试题小集

    一、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比...

  • 前端面试题小集

    前端面试题小集 一、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • PHPer 面试指南-扩展阅读资源整理

    前端篇 收集的前端面试题和答案 前端开发面试题 史上最全的web前端面试题汇总及答案 前端工程师手册 HTTP协议...

  • 值得看的前端面试文章- 收藏集 - 掘金

    【前端面试 -- 四月二十家前端面试题分享】1-5 套个人解题答案 - 前端 - 掘金前端面试题 前端面试--四月...

  • 总结前端问题

    前端经典面试题: 1、(前端面试题)https://zhuanlan.zhihu.com/p/84212558?f...

  • web前端面试题总结

    web前端试题集 WEB前端面试题

  • 笔试11

    摘自:* markyun 2014年最新前端开发面试题 和 前端开发面试题 darcyclarke Front...

  • 前端面试比较好的文章

    1、前端开发面试题2、vue面试题总汇

  • 面试题小集

    1.Java线程池 有哪几种? 同步vs异步 固定大小 vs 动态大小 2.SVM 高维变换和非线性变换,哪个因素...

网友评论

      本文标题:前端面试题小集

      本文链接:https://www.haomeiwen.com/subject/pdnywttx.html