参考:前端开发面试题
前端综合
1. 对Web标准的理解
Web标准是一系列标准的集合:结构标准(XHTML/HTML)、表现标准(CSS)和行为标准(ECMAScript/DOM/BOM)。还有这些代码的书写标准。
要实现的Web标准是:结构化文档;内容、表现和行为三者间的分离。
2. 浏览器内核差异
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink。
HTML
1. HTML的<!DOCTYPE>,所谓的“严格模式”和“混杂模式”
(1)<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。
(2)严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。
(3)在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
(4)DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2.<link>
和@import 的区别
(1)<link>属于XHTML标签,而@import是CSS提供的;
(2)页面被加载的时,<link>会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3)import只在IE5以上才能识别,而<link>是XHTML标签,无兼容问题;
(4)<link>方式的样式的权重 高于@import的权重。
3.块级元素、行内元素、空(void)元素有哪些?
(1)块级元素。默认display属性是block。div ul ol li dl dt dd h1 h2 h3 h4…p。
(2)行内元素。默认display属性是inline。a b span img input select strong。
(3)空元素。功能性元素,标签可以不闭合。<br> <hr> <img> <input> <link> <meta>
4.常见的HTML浏览器兼容性问题
(1)获取标签的自定义属性。
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。
解决方法:统一通过getAttribute()获取自定义属性。
(2)even对象。
IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,event对象有pageX,pageY属性,但是没有x,y属性。
解决方法:var x = (event.x ? event.x : event.pageX)
5.HTML语义化
(1)用正确的标签做正确的事情!
(2)html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
(3)在没有样式CSS情况下也以一种文档格式显示,并且是容易阅读的。
(4)搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
(5)使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
6.iframe的缺点
(1)iframe会阻塞主页面的Onload事件;
(2)iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
解决方法:使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
HTML5
1.HTML5的离线储存
localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。
2.cookies,sessionStorage 和 localStorage 的区别
(1)cookie在浏览器和服务器间来回传递, sessionStorage和localStorage不会。
(2)sessionStorage和localStorage的存储空间更大。
(3)sessionStorage和localStorage有更多丰富易用的接口。
(4)sessionStorage和localStorage各自独立的存储空间。
3.如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
4.webSocket如何兼容低浏览器?(阿里)
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR
CSS
1. 布局
Table布局,Div+CSS布局,响应式设计。
2. 盒子模型
(1)有两种, IE 盒子模型、标准 W3C 盒子模型;IE的content部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
3.选择器优先级及使用
1.id选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(div > p)(选择父元素为 <div> 元素的所有 <p> 元素。)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li: nth - child)
优先级:
1.!important > id > class > tag
2.important 比 内联优先级高
4. CSS3新特性
CSS3实现圆角(border-radius:8px),阴影(box-shadow:10px),对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)、
缩放scale(0.85,0.90),定位translate(0px,-30px),倾斜skew(-9deg,0deg)
增加了更多的CSS选择器 多背景 rgba
5.CSS定义的权重
标签的权重为1,class的权重为10,id的权重为100。
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
6.如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)
多数显示器默认频率是60Hz,即1秒刷新60次,所以理论上最小间隔为1/60*1000ms = 16.7ms
7.去除display:inline-block显示间隙?(携程)
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
8.CSS的浏览器兼容性
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
JavaScript:
1.Node.js的适用场景?
高并发、聊天、实时消息推送
2Javascript如何实现继承?
通过原型和构造器
3.This对象的理解
this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象
4.如何判断一个对象是否属于某个类?
使用instanceof (待完善)
if(a instanceof Person){
alert('yes');
}
5.new操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
6.Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?
hasOwnProperty
7.JSON 的了解?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}
8.如何解决跨域问题?
jsonp、 iframe、window.name、window.postMessage、服务器上设置代理页面
9.模块化怎么做?
立即执行函数,不暴露私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
10.documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
11.call, apply方法区别
call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.
应用场景:当参数明确时可用call, 当参数不明确时可用apply给合arguments
12.针对 jQuery 的优化方法?
(1)基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。
(2)频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。
比如:var str=$("a").attr("href");
(3)for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组 (arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:
for (var i = size, length = arr.length; i < length; i++) {}
13.那些操作会造成内存泄漏?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
(1)垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
(2)setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
(3)闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
14.如何判断当前脚本运行在浏览器还是node环境中?(阿里)
通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中
相关推荐
web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题面试题汇总+前端优化总结 web前端笔试题...
这里将收集我做过的所有的前端面试笔试题,并根据自己的理解提供解答,以及一些关于前端找工作方面的经验等。 前端笔试面试题部分 试题链接 原题概述 标签分类 1.md CSS部分 CSS 2.md HTML部分 HTML 3.md FEX ...
前端笔试面试题目总结.docx
web前端笔试面试总结+js+css,适合小白面试使用,很全
web前端优化知识总结+笔试+面试总结.pdf
web前端优化知识总结+笔试+面试总结[参照].pdf
个人前端面试题的一些汇总和面试题网址
web前端笔试题面试题汇总+前端优化总结.pdfweb前端笔试题面试题汇总+前端优化总结.pdf
2023年最全前端面试(20w字)HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试 (一开始就是在CSDN博客上写的,现在应部分同学的要求,我直接将博客内容复制成pdf
..
..
对一次高德面试的总结,希望能帮助到你!包括技术基础及其他问题的总结。
【吐血整理】阿里前端面试题总结(2)【超全超细带答案!!】 包含各个大厂的笔试面试内容,绝对干货!
本文整理总结自己在毕业季找工作时,前端笔试遇到的各种细小知识点,多为基础知识,既不全面,也不系统。因此,对于读者而言,本文适用于笔试前对前端知识点的复习,或作为前端参考知识阅读,但不适用于对前端知识...
1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验 2. 从服务商角度而言,优化能够减少页面请求数、或者减小
个人校招总结的前端笔面试文档,县分享给大家,后期会不定时更新。内容包含基础面试题、笔试、vue以及自己的踩坑指南。
阿里巴巴校园招聘笔试面试题淘宝校园招聘笔试试题27个文档资料合集: 2012阿里巴巴校园招聘阿里云C++笔试试题.doc 2013年阿里巴巴校园招聘笔试试题研发工程师.doc 2014年3月阿里巴巴实习招聘笔试题及部分答案.docx ...
百度2010-2011年各部门招聘笔试题及面经总结.doc 百度2014校园招聘笔试试题-产品经理笔试题.doc 百度2014校园招聘笔试试题-北京站未知岗位.docx 百度2014校园招聘笔试试题-南京PC客户端开发笔试题.doc 百度2014校园...
web前端的好资料啊~涵盖了面试,笔试,总结性的各种信息,js常用组件,基础。。。。。。。。。