摘要:写在前面本小菜鸡开学其实已经开始了就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题。而有着固定的大小,高度超过规定高度就会出现滚动条。实现页面加载进度条我们可以将一整个页面大致分为,个区域。
写在前面
本小菜鸡开学(其实已经开始了)就要面临找实习的压力了。所以在此开一贴记录一下搜集的前端面试的问题和自己即将被拷问的问题= =。悔不该当初没有好好学习quq!努力!
面试题目总结 HTML1.html5新增了哪些内容或api,使用过哪些?
HTML5新增input输入类型:
email类型
url类型
number类型提供选择数字的功能,其中min属性设定最小值,max属性设定最大值,value属性设置当前值,step属性设定每次增长值。
range类型,表示限制数字输入的范围域
日期和时间类型:date,month,week,time,datetime,datetime-local
search类型
tel类型
color类型
HTML5新增表单元素
datalist 规定输入域的选项列表
keygen提供一种可靠方法来验证用户
output用于不同类型的输出
还有更多细节内容不列在这里啦。请看这篇博客
2.input和textarea的区别?
是单行文本框。
3.用一个div模拟textarea的实现?
首先我们需要知道div是高度自适应的,高度会随着内容的增加而增加。而textarea有着固定的大小,高度超过规定高度就会出现滚动条。
div有一个属性叫做contenteditable,设置contenteditable属性为true就可以实现,div内容可编辑。
实现了内容可编辑以后,在css中设置好规定的高度,设置overflow-y属性为auto,即可实现滚动条。
4.移动设备忽略将页面中的数字识别为电话号码的方法?
移动设备中经常会出现将一串数字识别为电话的情况,数字的颜色和样式都会变化,点击可以直接拨打。
添加如下代码可以关闭识别。
5.
问题:
会影响页面的并行加载
阻塞onload
可以使用js动态地为iframe的src加载页面内容
6.load事件和DomContentLoaded事件
DomContentLoaded事件在DOM元素加载完毕时触发,也就是HTML文档被加载和解析完成时。
load事件是在页面上所有资源(包括图片、视频、音频)全部加载完时触发。
详情请看这篇文章,写的非常清晰。
CSS1.左右布局:左边定宽、右边自适应,不少于3种方法
方法一:左边模块设置左浮动,右边模块宽度设置100%
方法二:父容器设置display:flex;right部分设置flex:1。display:flex设置为弹性盒子,其子元素可以设置flex的数值来控制其所占空间的比例。
方法三:使用负margin。设置左部分和右部分左浮动,并为right部分设置宽度100%。设置左部分左外边距为负100%。为了避免右部分的内容被覆盖,再为右部分设置添加左边距(左部分的宽度)。
2.CSS3有哪些新特性?
CSS3的选择器
E:last-child / E :nth-child(n) / E : nth-last-child(n) 倒数第n个元素
@Font-face特性用来加载字体样式,可以加载服务器端的字体,显示到客户端,即使客户端并没有安装该字体
圆角:border-radius
弹性盒子模式display:flex。 等等属性
3.BFC与IFC
首先解释FC(Formatting Contexts),这是CSS规范中的一个概念。它指页面中的一块渲染区域,有自己的渲染规则,规定了子元素如何定位,以及和其他元素间的相互作用。
BFC(Block Formatting Contexts),块级格式化上下文。BFC就是页面上一块隔离的渲染区域,容器内的子元素不会影响外界元素的布局。
IFC(Inline Formatting Contexts),内联格式化上下文。IFC的line box高度由其包含的行内元素最高的实际高度计算而来。IFC可以理解为一种盒子从左到右的水平排列方式。
4.对栅格的理解
栅格布局由三个部分组成——容器(container)、行(row)、列(column)也就是栅。
不同的列之间有删间距。
栅格是可以嵌套的。列也可以换行。
5.水平居中有哪些实现方式?
把行内元素包裹在一个属性display:block的元素中,并且把父层元素添加属性:text-align:center;
块状元素解决:添加margin : 10px auto;
多个块状元素解决方案:首先将元素的display属性设置为inline。然后再设置父元素text-align:center。
flexbox布局实现多个块状元素居中:把待居中元素的父元素添加属性display:flex和justify-content:center即可
6.1像素边框问题
border-image图片实现
background-image渐变实现
box-shadow实现
7.flex布局
css3 flex布局详解
8.盒子模型
盒子模型有两种标准,一种是w3c标准,一种是ie标准
基本组成是一样的,从内往外分别是content区域、padding、border、margin
w3c的盒子宽度和高度实际上就是 content部分的宽度和高度。
ie盒子模型的高度和宽度是content+padding+border的值,这个也比较符合我们的理解。
9.实现一个三栏布局,两边定宽,中间自适应
常见的实现方法有圣杯布局、双飞翼布局、以及利用display:flex实现。
实现细节请参考这篇博客
JavaScript1.图片懒加载
图片懒加载的原理是页面加载时不一下加载全部的图片,只加载用户可见区域内的图片,然后根据用户滚动到页面的位置,再生成相应的img标签,显示图片。
2.实现页面加载进度条
我们可以将一整个页面大致分为4,5个区域。
然后在页面的顶端设置一个div用来显示进度条。
每到达指定的节点就用jquery实现进度条动画。
最后加载完成隐藏进度条即可。
3.eval()函数
作用:eval函数会将传入的参数当作实际的javascript语句来执行,然后把执行结果插入到eval()函数所在的位置。
但是eval函数中的任何变量或函数都不会被提升,因为在预解析的时候,这些生命都还只是字符串。
eval函数可以被用来解析json字符串,将其转换为json对象。
但是由于安全考虑,最好不要主动使用eval函数。
4.new操作符调用构造函数的执行过程
首先创建一个新对象
将构造函数的作用域赋给新对象(因此this指向了这个对象)
执行在构造函数中的代码,为新对象添加相应属性
返回新对象
5.Promise对象
Promise对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
关于Promise的详细解析,请看这篇文章
HTTPsession和cookie的区别
Session是在服务端保存的一个数据结构,用来跟踪用户的状态,这个数据可以保存在集群、数据库、文件中;
Cookie是客户端保存用户信息的一种机制,用来记录用户的一些信息,也是实现Session的一种方式。
session的运行依赖于session id 而session id是存在cookie中的,因此如果浏览器禁用了cookie,session也会被禁用。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/51864.html
摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...
摘要:收集的一些前端面试题从面试题发现不足,进而查漏补缺,比通过面试更难得及各大互联网公司前端笔试面试题篇及各大互联网公司前端笔试面试题篇面试题个和个经典面试题前端开发面试题如何面试前端工程师很重要个变态题解析如何通过饿了么面试轻 收集的一些前端面试题 从面试题发现不足,进而查漏补缺,比通过面试更难得 1 BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 2 BAT...
摘要:字囊括上百个前端面试题的项目开源了这个项目是什么项目内容这个项目目前在上刚刚开源主要内容如下前端面试题主要整理了高频且有一定难度的前端面试题对这些面试题进行解读前端原理详解针对一些有一定难度面试题涉及的知识点进行详解比如涉及的编译原理响应式 20W字囊括上百个前端面试题的项目开源了 这个项目是什么? 项目内容 这个项目目前在GitHub上刚刚开源,主要内容如下: 前端面试题: 主要整...
摘要:整理最近的一些面试题请问有哪些数据数据类型,并画出内存图有种简单的数据类型也称为基本数据类型复杂的数据类型即引用数据类型包含对象,对象和等举个例子引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。实际上改变的是堆内存对象。 我们在js的学习中,往往很多东西看过之后,一段时间不用,就忘记了。或者当时就没有深入的理解,能促使我们不断深入学习的动力最好的办法往往参加些面试,能找到...
阅读 3691·2021-11-22 15:24
阅读 1596·2021-09-26 09:46
阅读 1907·2021-09-14 18:01
阅读 2606·2019-08-30 15:45
阅读 3527·2019-08-30 14:23
阅读 1870·2019-08-30 12:43
阅读 2917·2019-08-30 10:56
阅读 802·2019-08-29 12:20