欢迎来到河南丰泽教育咨询有限公司官网!

河南IT培训领导品牌    全国咨询热线:0371-63614567

丰泽教育logo
当前位置: 首页 > 新闻 > Html5

前端面试必看:十大前端面试必出题

Html5    24.04.17/79人气/ 15推荐


哈,这种心态太好了。面试是一个很消耗元气的事情,不管你本身的技能怎么样,作为一个初出茅庐的学生,在找工作的过程中,都会遇到各种问(刁)题(难)。我们应该用一种非常快乐、非常正的能量去面对所有的事情。调整心态,全力以赴,属于你的work.right就在不远处等着你。
下面是小编整理的前端面试常见问题和答案,仅供参考,仅供参考,仅供参考。这些问题并不能保证你一定能得到心仪的Offer,但是可以肯定的是,看过它,面试的时候你心里一定不会那么方。
前端面试

一、请写出一些前端性能优化的方式,越多越好
1.减少dom操作
2.部署前,图片压缩,代码压缩
3.优化js代码结构,减少冗余代码
4.减少http请求,合理设置 HTTP缓存
5.使用内容分发cdn加速
6.静态资源缓存
7.图片延迟加载


二、描述浏览器重绘和回流,哪些方法能够改善由于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 技术,引发一次回流和重绘;


三、写一个获取非行间样式的函数
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}


四、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为900,右边div为800),请写出大概的CSS代码。(考察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>

五、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么(流程说的越详细越好)输入地址
1.浏览器查找域名的 IP 地址
2.这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…
3.浏览器向 web 服务器发送一个 HTTP 请求
4.服务器的永久重定向响应(从 http://datafz.cn 到 http://www.datafz.cn)
5.浏览器跟踪重定向地址
6.服务器处理请求
7.服务器返回一个 HTTP 响应
8.浏览器显示 HTML
9.浏览器发送请求获取嵌入在 HTML 中的资源(如图片、音频、视频、CSS、JS等等)
10.浏览器发送异步请求


六、图片预览
<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);
}
}


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

八、扁平化多维数组
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)

九、对前端工程化的理解
开发规范
模块化开发
组件化开发
组件仓库
性能优化
项目部署
开发流程
开发工具

十、CSS实现垂直水平居中一道经典的问题,实现方法有很多种,以下是其中一种实现
HTML结构:
<div class="wrapper">
<div class="content"></div>
</div>

CSS:
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
小伙伴认为面试都是套路对不对?
但除了套路深之外,我们更应该拥有金刚钻,用硬实力碾压。以上十道题,如果小伙伴们能吃透,做到举一反三,找到月薪10000元的工作So Easy,妈妈再也不用担心你的就业!
 
79

点赞