前端面试题杂烩part1
web app
- 问题:手机端
click
事件会有大约300ms
的延迟
原因:手机端事件touchstart
--\>touchmove
-->touchend
ortouchcancel
-->click
,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟
解决方法:使用touch事件来代替click事件,如 zepto.js 的tap事件和fastClick,还有我自己也写了个移动端手势操作库mTouch,都有相应的事件可以代替click事件解决这个问题
- 问题:在部分机型下(如小米4、小米2s、中兴)
body
设置的font-size
是用rem
单位的话,若其他元素没有设置font-size,该font-size值继承于body,则会很高概率出现字体异常变大的情况
原因:估计是跟app的webview默认设置有关,body的font-size使用rem单位,就是相对于当前根节点的font-size来确定的,可能在某些webview的设置下,body用的是webview设置的默认字体大小,因为在我给html设置了一个px单位的默认font-size时,还是会出现字体异常变大的情况,具体webview的一些细节就没有再研究了
解决方法:body设置一个px
单位的默认font-size值,不用rem,或者给字体会异常变大的元素设定一个px单位的font-size值
- 问题:使用zepto的
tap
事件时会出现“点透”bug,比如:一个元素A绑定了tap事件,紧跟其后的元素B绑定了click事件,A触发tap事件时将自己remove掉,B就会自动“掉”到A的位置,接下来就是不正常的情况,因为这个时候B的click事件也触发了
原因:因为tap事件是通过touchstart
、touchmove
、touchend
这三个事件来模拟实现的,在手机端事件机制中,触发touch事件后会紧接着触发touch事件坐标元素的click事件,因为B元素在300ms内刚好“掉”回来A的位置,所以就触发了B的click事件,还有zepto的tap事件都是代理到body的,所以想通过e.preventDefault()阻止默认行为也是不可行的
解决方法:(1)A元素换成click事件;(2)使用我写的库 mTouch 来给A绑定tap事件,然后在事件回调中通过e.preventDefault()来阻止默认行为,或者换用其他的支持tap事件的库
- 问题 iOS自动识别数字为手机号码,导致部分设置好的样式无效(字体颜色等)
原因 iOS自动识别数字后会给数字加上数字
标签,所以数字的部分样式继承了a标签的样式,导致部分样式无效
解决方法:(1)meta
标签加上阻止默认识别数字为电话;(2)设置样式的时候 css 选择器把a标签选上,如:
123 // 原来样式 .number { color: #f00; } // 修改后样式 .number, .number a { color: #f00; }
- 通过设置css属性
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
取消掉手机端webkit浏览器 点击按钮或超链接之类的 默认灰色背景色
- 设置css属性
-webkit-user-select:none;
控制用户不可选择文字
- 区域性
overflow: scroll | auto
滚动时使用原生效果:-webkit-overflow-scrolling: touch
(ios8+,Android4.0+)
- 单行、多行溢出省略
/* 单行省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }/* 多行省略 */ .ellipsis-2l { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 数值代表显示几行 */ -webkit-box-orient: vertical; }
- 垂直居中常用方法:
/* css样式 *//* (1) 模仿单行文字居中的方式 */ .wrap { width: 200px; height: 80px; line-height: 80px; }.box { display: inline-block; vertical-align:middle; }/* (2) 已知宽高,通过position:absolute; */ .wrap { width: 200px; height: 200px; position: relative; }.box { width: 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; }/* (3) 未知宽高,通过css3属性 transfrom */ .wrap { width: 200px; height: 200px; position: relative; }.box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }/* (4) 通过flex布局 *//* css样式 */.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; }/* 水平居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; }/* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
- retina屏幕实现真正的1px边框
/* css样式 */.box { width: 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; }/* 去掉元素原有的边框 */ .retina-border { position: relative; border: none; }/* 通过设置伪元素放大到2倍的宽高,设置1px边框,再缩小1倍,以达到0.5px边框的效果*/ .retina-border:after { content: ''; display: block; width: 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); }.rt-bd-all:after { border-width: 1px; }/* 如果只是想设置一条边框,可以这样改一下,以此类推 */ /* css样式 */.tr-bd-b:after { border-bottom-width: 1px; }.tr-bd-t:after { border-top-width: 1px; }.tr-bd-l:after { border-left-width: 1px; }.tr-bd-r:after { border-right-width: 1px; }
- 关于水平、垂直、多列布局的多种实现参照:《利用HTML和CSS实现常见的布局》
目录
- 前言
- HTML 部分
- CSS 部分
- JavaScript 部分
- 其他问题
面试有几点需注意:(来源程劭非老师 github:@wintercn)
- 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑、深度↑、方向↑。
- 题目类型: 技术视野、项目细节、理论知识题,算法题,开放性题,案例题。
- 进行追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种关联知识是长时期的学习,绝对不是临时记得住的。
- 回答问题再棒,面试官(可能是你的直接领导面试),会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲)
- 资深的工程师能把absolute和relative弄混,这样的人不要也罢,因为团队需要的你这个人具有可以依靠的才能(靠谱)。
HTML&CSS:
对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript:
数据类型、面向对象、继承、闭包、插件、作用域、跨域、原型链、模块化、自定义事件、内存泄漏、事件机制、异步装载回调、模板引擎、Nodejs、JSON、ajax等。其他:
HTTP、安全、正则、优化、重构、响应式、移动端、团队协作、可维护、SEO、UED、架构、职业生涯
作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:
1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。2、DOM操作——如何添加、移除、移动、复制、创建和查找节点等。3、事件—— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。9、HTML与XHTML——二者有什么区别,你觉得应该使用哪一个并说出理由。10、JSON—— 作用、用途、设计结构。
HTML
- Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
(1)、 声明位于文档中的最前面,处于标签之前。告知浏览器的解析器, 用什么文档类型 规范来解析这个文档。 (2)、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。(3)、在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
- 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
(1)CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值, 比如div默认display属性值为“block”,成为“块级”元素; span默认display属性值为“inline”,是“行内”元素。(2)行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p(3)知名的空元素:
文章图片
电子邮件处理提交表单
在打开的子窗口刷新父窗口的代码里如何写?
window.opener.location.reload()
如何设定打开页面的大小
在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动
body
{background-image:url(logo.gif); background-repeat:no-repeat; background-position:center }
19. 检查一段字符串是否全由数字组成
20. 获得一个窗口的大小
document.body.clientWidth,document.body.clientHeight
21. 怎么判断是否是字符
if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");
else alert("全是字符");
22.TEXTAREA自适应文字行数的多少
23. 日期减去天数等于第二个日期
24. 选择了哪一个Radio
Style
Barcode
25.获得本页url的request.servervariables("")集合
Response.Write "
" "Variables value
for each ob in Request.ServerVariables
Response.Write " ""&ob&" "&Request.ServerVariables(ob)&"
next
Response.Write "
26.
本机ip
服务器名
服务器IP
服务器端口
服务器时间
IIS版本
脚本超时时间
本文件路径
服务器CPU数量
服 务器解译引擎
服务器操作系统
27.ENTER键可以让光标移到下一个输入框
28. 检测某个网站的链接速度:
把如下代码加入区域中:
29. 各种样式的光标
auto :标准光标
default :标准箭头
hand :手形光标
wait :等待光标
text :I形光标
vertical-text :水平I形光标
no-drop :不可拖动光标
not-allowed :无效光标
help :?帮助光标
all-scroll :三角方向标
move :移动标
crosshair :十字标
e-resize
n-resize
nw-resize
w-resize
s-resize
se-resize
sw-resize
上面的错误
将彻底屏蔽鼠标右键
这个是彻底的!但是在下觉得都是自欺欺人的东西
彻底禁止右键快捷菜单的出现呢?其实只要将上述代码做如下修改即可。
< Script Language=javascript>
function Click(){
alert('版权所有(C)2001 XXX工作室');
window.event.returnvalue=https://www.it610.com/article/false;
}
document.oncontextmenu=Click;
< /Script>
这 样无论采取什么方式点击鼠标,都不会再出现快捷菜单了。不过值得注意的是,如果访问者直接在浏览器地址栏中键 入"javascript:alert(document.oncontextmenu='')",就可以解除对右键菜单的屏蔽。对这类访问者怎样防范 呢?其实,把地址栏隐藏掉就可以了,具体方法见本文介绍的"屏蔽窗口菜单栏查看方式"。
屏蔽窗口菜单栏查看方式
制作过网页的朋友都知道,对新打开窗口的各种属性可以进行控制,具体包括控制菜单栏、滚动条及地址栏是否可见等。如果把父窗口关闭,并将新打开窗口的菜单栏和地址栏隐藏,不就可以屏蔽窗口菜单栏查看方式了吗?实现代码如下:
< Head>
< Object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
< Param name="Command" value="https://www.it610.com/article/Close">
< /Object>
< /Head>
< Body>
< Script Language=javascript>
closes.Click()
window.open("XXX.htm","","menubar=no,location=no,
scrollbars=yes,resizable=yes")
< /Script>
< /Body>
这 种方法的原理就是首先将自己网站的首页制作成index.htm形式,把首页设计成一个过渡页。然后将自己的真正主页制作成default.htm形式 (具体实现过程见本文所附源代码)。这样访问者无论如何也无法查看网页源代码了。这不仅仅保护了您的版权,也为进一步开发提供了保障。通过此方法,您可以 结合Cookie技术,真正做到限制用户浏览网页,从而避免主页资料被非法访问者访问。
附:源代码清单
index.htm
< Head>
< Object id=closes type="application/x-oleobject" classid="clsid:
adb880a6-d8ff-11cf-9377-00aa003b7a11">
< Param name="Command" value="https://www.it610.com/article/Close">
< /Object>
< /Head>
< Body>
< Script Language=javascript>
closes.Click()
window.open("defalut.htm","","menubar=no,location=no,
scrollbars=yes,resizable=yes")
< /Script>
< /Body>
default.htm
< Html>
< Head>
< Script Language=javascript>
function Click(){
alert('版权所有(C)2001 XXX工作室');
window.event.returnvalue=https://www.it610.com/article/false;
}
document.oncontextmenu=Click;
< /Script>
< /Head>
< Body>
... ...
< /Body>
< /Html>
来自:http://blog.csdn.net/21aspnet/article/details/166576
js 验证表单 js提交验证类http://www.cnblogs.com/zwl12549/archive/2008/01/07/1028701.html 附加:js验证radio是否选择
1. 长度限制
2. 只能是汉字
3." 只能是英文
4. 只能是数字
5. 只能是英文字符和数字
6. 验证油箱格式
7. 屏蔽关键字(这里屏蔽***和****)
8. 两次输入密码是否相同
够了吧
屏蔽右键 很酷
oncontextmenu="return false" ondragstart="return false" onselectstart="return false"
加在body中
二
2.1表单项不能为空
2.2比较两个表单项的值是否相同
2.3表单项只能为数字和"_",用于电话/银行帐号验证上,可扩展到域名注册等
2.4表单项输入数值/长度限定
2.5中文/英文/数字/邮件地址合法性判断
2.6限定表单项不能输入的字符
去除数组中所有重复元素http://www.cnblogs.com/AndyCf/p/5207123.html //去除数组中重复元素
var arr = [0,2,3,1,5,5,8,8,2,1,10,10,43,43];
var json = {};
for (var i = 0; i < arr.length; i++) {
if (!json[arr[i]]) {
json[arr[i]] = arr[i];
}
};
输出结果:0,1,2,3,5,8,10,43
//删除函数中指定的元素
//这样就构造了这样一个函数,比如我有有一个数组:
var emp = ['abs','dsf','sdf','fd']
emp.remove('fd');
前几天去面试了一家公司,整下改公司的面试题。
1.新的 HTML5 文档类型和字符集是? HTML5 文档类型很简单:
HTML5 使用 UTF-8 编码示例:
2.HTML5 中如何嵌入音频? 当前,audio 元素支持三种音频格式:
文章图片
文章图片
3.HTML5 中如何嵌入视频? 当前,video 元素支持三种视频格式:
4.除了 audio 和 vidio,HTML5还有哪些媒体标签?