13个重要的前端面试题(附答案哦)
文章来源:https://segmentfault.com/a/1190000008322096 作者:spademan
一:一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的css代码。
1、使用flex
//html <divclass='box'><divclass='left'></div><divclass='right'></div></div> //css .box{ width:400px; height:100px; display:flex; flex-direction:row; align-items:center; border:1pxsolid#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的限制条件
跨域问题
设置了HttpOnly
五、描述浏览器重绘和回流,哪些方法能够改善由于dom操作产生的回流
1.直接改变className,如果动态改变样式,则使用cssText
// 不好的写法 varleft=1; vartop=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){ varfile=source.files[0]; if(window.FileReader){ varfr=newFileReader(); fr.end=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会阻塞主页面的事件;
● 搜索引擎的检索程序无法解读这种页面,不利于SEO;
● iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
● 使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过java动态给iframe添加src属性值,这样可以绕开以上两个问题。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法