公众账号

二维码 微信扫描关注

当前位置:首页 > 技术文章 > 前端开发 >

前端面试题总结

猜你喜欢

  • 10个最常见的 HTML5 面试题及答案

  • 前端同学大福利,最全的面试题目整理

  • 考验前端的JavaScript底细的14道题

  • 阿里航旅事业部的前端开发面试题

  • 你真的了解HTML吗?–雅虎面试题

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

1、使用flex

HTML代码:

//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代码:

* {
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:220px;
    background-color:green;
}
#content {
    background-color:orange;
    margin-left:220px;
    /*==等于左边栏宽度==*/
}

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

1、减少dom操作

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

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

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

5、使用内容分发cdn加速

6、静态资源缓存

7、图片延迟加载

三、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

(流程说的越详细越好)

输入地址

1、浏览器查找域名的 IP 地址
2、这一步包括 DNS 具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...
3、浏览器向 web 服务器发送一个 HTTP 请求

关于 商务 项目 联系 友情链接网站地图 Copyright ©-2018 UiBQ版权所有(http://www.uibq.com)