记录了2017年5月下旬刚毕业时面试的经典面试题

布局方面

1. 响应式布局,左侧栏目固定,右侧内容随着屏幕宽度变化而变化(高频)

  • flex布局
  • position布局
  • css3计算宽度
  • float布局

flex布局

// html
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div> // css .box {
display: flex;
}
.left {
width: 200px;
}
.right {
flex: ;
}

右侧div设置flex:1  自动填充满容器。

position布局

//    html

<div class="box">
<div class="left"></div>
</div> // css .box {
padding-left: 200px;
width: %;
position: relative;
}
.left {
position: absolute;
width: 200px;
left: ;
}

用pading将要显示的右侧内容挤到右边,常用在图文列表

css3计算宽度

// html

<div class="box">
<div class="left"></div>
<div class="right"></div>
</div> // css .left {
float: left;
width: 200px;
}
.right {
float: left;
width: calc(% - 200px);
}

通过css3的calc函数可以计算宽度来定义宽度

float布局(面试官想要的答案)

// html

<div class="box">
<div class="left"></div>
<div class="right">
<div class="inner"></div>
</div>
</div> // css .left {
float: left;
width: 200px;
margin-right: -200px;
}
.right {
float: left;
width: %;
}
.inner {
margin-left: 200px;
}

根据float元素的margin特性布局,兼容性好。以上css都没有给出高度和颜色区分。

javascript方面

1. 闭包和作用域、this的理解

2. 原型链有关的问题

3. es6方面:let块级作用域、generator函数的应用

4. javascript中的setTimeout、promise异步的考查

5. jQuery中的设计模式

  • 原型模式  : 整个jQuery库的构造就是一个原型继承的模式。
  • 发布/订阅模式:事件监听模块为发布订阅模式
  • 代理模式:jQuery中内置proxy方法便是代理模式
  • 外观模式:post、get等方法是对ajax的包装
  • 等等

6. jsonp的实现原理

js算法技巧方面

1. a[n] 数组中取值是 [1, n-1] ,也就是必然有重复数字,在时间复杂度和空间复杂度最小的情况下找出一个重复数字

博主也不懂复杂度,用正则写了个, a[n].toString().match(/(\d+).*?\1/)[1]

2. 两个单向链表的交点

博主懵逼,不懂数据结构不知啥叫链表交点。后来查了下就是两个链表成Y状,相交后必定后面的数据一样。这就不难了。

3. 给定一个 ram函数,该函数有50%几率返回0 和 50%几率返回1,根据这个ram函数写一个ran函数,ran函数有25%几率返回0 1 2 3。

博主脑子转不快,很慢很慢才理清楚这个简单的题,很尴尬。

http方面

1.  在浏览器输入一个网址到页面呈现,计算机做了哪些事情。

在一家公司的CTO问的,尴尬了,之前博主故意百度看了一遍这个问题,结果也是忘得一干二净。

在前端层面上就是 发送请求资源 - 建立连接 -  数据传输 - 解析数据

有很多大神写了完整过程: http://blog.csdn.net/xingxingba123/article/details/52743335      http://www.cnblogs.com/webhb/p/5615063.html

2. put和post请求的区别

一般情况我们用post请求来插入一条数据,用put请求更新一条数据。插入与更新的区别。。。

3. cookie和localStorage、sessionStorage的区别

cookie存储量小,存储数据小,跟随着http请求传输。

几次面试的总结,希望尽快掌握,下一次面试表现好一些

web前端面试题记录的更多相关文章

  1. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  2. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  3. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  4. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  5. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  6. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

  7. 2015腾讯web前端笔试题

      1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...

  8. 腾讯2013笔试题—web前端笔试题 (老题练手)

    问题描述(web前端开发附加题1): 编写一个javascript的函数把url解析为与页面的javascript.location对象相似的实体对象,如:url :'http://www.qq.co ...

  9. web前端笔试题

    1, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母.数字.下划线,总长度为5-20 var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/; reg.test ...

随机推荐

  1. iOS项目中常见的文件

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. php生成器使用总结

    一般我们在迭代一组数据的时候,需要创建一个数据,如果数组很大,则会消耗很大性能,甚至造成内存不足抛出error比如: //Fatal error: Allowed memory size of 134 ...

  3. PHP常用的三种设计模式

    本文为大家介绍常用的三种php设计模式:单例模式.工厂模式.观察者模式,有需要的朋友可以参考下. 一.首先来看,单例模式 所谓单例模式,就是确保某个类只有一个实例,而且自行实例化并向整个系统提供这个实 ...

  4. 在github上搭建免费的博客

    github好多年前,大家都开始玩啦,我这个菜鸟近几年才开始.github不仅可以管理项目,还可以搭建博客.技术人员,一般用的博客为博客园,CSDN多一些.看到朋友们都弄一个,我也开始弄起来,先找点资 ...

  5. OpenCV 玩九宫格数独(二):knn 数字识别

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者:刘潇龙 前言 首先需要说明,这里所说的数字识别不是手写数字识别! 但凡对机器学习有所了解的人,相信看到数 ...

  6. Angular2.js——表单(下)

    这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...

  7. Java多线程中的单例模式

    一.在多线程环境下创建单例 方式一: package com.ietree.multithread.sync; public class Singletion { private static cla ...

  8. 使用window.btoa和window.atob来进行Base64编码和解码

      方法描述 WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据. WindowBase64.btoa() 函数 将ascii字符串或二进制数据转换成一个base ...

  9. Maven的pom.xml配置文件详解

    Maven简述 Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具.由于 Mav ...

  10. linux 内核的spinlock

    spinlock设计成了三层,第一层是接口,第二层raw实现层,第三层是CPU平台层.在第二层raw实现层提供了两个分支,分别是单CPU和多CPU(核).第三层是不同CPU的锁操作实现.raw层除了调 ...