前端面试题小集

bawn 发布于2019-08-20 14:15 / 2886人阅读

摘要：一一个页面上两个左右铺满整个浏览器，要保证左边的一直为，右边的跟随浏览器大小变化比如浏览器为，右边为，浏览器为，右边为，请写出大概的代码。如果需要使用，最好是通过动态给添加属性值，这样可以绕开以上两个问题。

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

1.使用flex

//html

//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;
}

在线demo

2.浮动布局

Left sidebar
Main Content

demo
更多布局栗子请移步

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

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设计模式

总体来说设计模式分为三大类：
创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

详细说明 请移步alloyteam的文章

十一、图片预览

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

GPU云服务器云服务器面试题栈面试题笔试面试题面试题内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81487.html

2017-10-09 前端日报

摘要：前端日报精选传送门浏览器性能优化渲染性能在生产中的使用发送推送第期巧用匿名函数重构你的代码中文可持久化数据结构以及结构分享众成翻译学习笔记的模板学习笔记教程的作用域插槽教程移动助手实践一基于的换肤功能掘金网站压力及性能测试一篇 2017-10-09 前端日报精选传送门：React Portal浏览器性能优化-渲染性能在生产中的Progressive Web App使用Service...

WilsonLiu95 2019-08-21 16:55 评论0 收藏0
Java 知识小集

摘要：锁的两种主要特性互斥同一时间只允许一个线程持有某个特定的锁。可见性线程释放锁之前对共享数据做出的更改对于随后获得该锁的另一个线程是可见的。在商业上的成功奠定了字符存储以位即一个字节为单位的基础。 1.锁的两种主要特性：互斥：同一时间只允许一个线程持有某个特定的锁。线程持有该锁相当于令牌去访问线程共享的数据。可见性：线程释放锁之前对共享数据做出的更改对于随后获得该锁的另一个线程是可见的...

XBaron 2019-08-15 12:18 评论0 收藏0
你不能错过的前端面试题合集

摘要：收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

ninefive 2019-08-21 16:18 评论0 收藏0
你不能错过的前端面试题合集

摘要：收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻收集的一些前端面试题从面试题发现不足，进而查漏补缺，比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...

darkbaby123 2019-07-30 14:38 评论0 收藏0
前端开发面试题链接

摘要：手册网超级有用的前端基础技术面试问题收集前端面试题目及答案汇总史上最全前端面试题含答案常见前端面试题及答案经典面试题及答案精选总结前端面试过程中最容易出现的问题前端面试题整理腾讯前端面试经验前端基础面试题部分最新前端面试题攻略前端面试前端入手册网：http://www.shouce.ren/post/index 超级有用的前端基础技术面试问题收集：http://www.codec...

h9911 2019-08-02 16:11 评论0 收藏0