前端面试宝典(整理ing)

原创 2016年08月30日 20:17:03

1、Doctype作用?标准模式与兼容模式各有什么区别?

(1)<!DOCTYPE>声明位于HTML文档中的第一行,处于html标签前面,告知浏览器的解析器需要用什么文档标准解析这个文档。Doctype不存在或格式不正确会导致文档以兼容模式呈现

(2)标准模式的排版和JS运作模式都是以浏览器支持的最高标准允许。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老浏览器的行为以防止站点无法工作。

2、HTML5为什么只需要写<!DOCTYPE HTML>?

HTML5不基于SGML,因此不需要对DTD进行引用,但是需要Doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要DTD进行引用,才能告知浏览器文档所使用的文档类型。

3、页面导入样式时,使用link和@import有什么区别?

(1)link属于XHTML标签,除了加载css外,还能定义RSS,定义rel连接属性等作用;而@import是css提供的,只能用于加载css

(2)页面被加载时候,link会同时被加载,而@inport引用的css会等到页面被加载完再加载

(3)import是css2.1提出的,只有在IE5以上才能被识别,而link是XHTML标签,无兼容问题。

4、介绍一下你对浏览器内核的理解,常见的浏览器内核?

主要分为两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎:负责取得网页的内容(HTML、XML、图像等)、整理讯息(加入css等),以及计算网页的显示方式,然后输出至显示器。浏览器内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。

JS引擎:解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。

常见的内核:Trident内核:IE,MaxTom,腾讯TT,The World,360,搜狗浏览器等;---Gecko内核:Netscape6及以上版本,FF,等;---Presto内核:Opera7及其以上;---Webkit内核:safari,Chrome等。Blink内核是Webkit内核的分支。

5、html5有哪些新特性、移除了哪些元素?

HTML5已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加。绘制canvas;用于媒介回放的video和audio元素;本地离线存储localStorage长期存储数据,浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除;语义化更好的内容元素,比如article、footer、header、nav、section;表单控件,calender、date、time、email、url、search;新的技术webworker,websocket、Geolocation;

删除的元素:纯表现的元素:basefont、big、center、font、s、strike、tt、u;对可用性产生影响的元素:frame、frameset、noframes;

6、简述一下对HTML语义化的理解?

用正确的标签做正确的事。html语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式css情况下也以一种文档格式显示,并且容易阅读;搜索引擎的爬虫也依赖于HTML标记来确定上下文各个关键字的权重,利于SEO;使阅读源代码的人更容易将网站分块,便于阅读维护理解

7、HTML5离线存储怎么使用,原理?

在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5的离线存储是基于一个新建的appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态下,浏览器会通过被离线存储的数据进行页面展示。

8、浏览器是怎么对HTML5的离线存储资源进行管理和加载的呢?

在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源存储页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生变化,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源进行离线存储。离线的话,浏览器就会直接使用离线存储的资源。

9、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用的hack的技巧?

(1)png24位的图片在IE6浏览器上出现背景,解决办法----做成PNG8

(2)IE6双边距bug:块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大。----浮动IE产生的双倍距离 #box{ float: left;width: 10px; margin: 0 0 0 100px;},这种情况下,会产生20px的距离,解决办法是在float的标签样式控制中加入  _display:inline;将其转化为行内属性。

(3)chrome中文界面下默认将小于12px的文本强制按照12px显示;------可通过加入css属性 -webkit-text-size-adjust:none;

10、对BFC规范(块级格式化上下文)的理解?

具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,例如可以包含浮动元素。

满足下面任一条件的元素,会触发为 BFC :

浮动元素,float 除 none 以外的值;

绝对定位元素,position(absolute,fixed);

display 为以下其中之一的值 inline-blocks,table-cells,table-captions;

overflow 除了 visible 以外的值(hidden,auto,scroll)。

11、如果需要手动写动画,你认为最小时间间隔是多久,为什么?

多数显示器默认频率是60HZ,即1s刷新60次,所以理论上最小间隔是1/60*1000ms=16.7ms.

12、JS基本数据类型?

Undefined、Null、Boolean、Number、String

13、说几条JavaScript的基本规范?

(1)不要在同一行声明多个变量;

(2)请使用===/!==来比较true/false或者数值;

(3)使用对象字面量替代new Array这种形式;

(4)不要使用全局函数

(5)Switch语句必须带有default分支;

(6)函数不应该有时候有返回值,有时候没有返回值;

(7)For循环必须使用大括号;

(8 )for in循环中的变量 应该使用var关键字明确限定作用域,从而避免作用域污染

14、前端性能优化的办法?

(1)减少http请求次数:css Sprites,JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存,图片服务器

(2)前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数;

(3)用innerHTML代替DOM操作,减少DOM操作次数,优化JavaScript性能;

(4)当需要设置的样式很多时设置className而不是直接操作style;

(5)少用全局变量、缓存DOM节点查找的结果,减少IO读取操作;

(6)避免使用css Expression又称Dynamic Properties(动态属性);

(7)图片预加载,将样式表放在顶部,将脚本放在底部,加上时间戳;

(8)避免在页面的主题布局中使用table,table要等其中的内容完全下载后才会显示出来,显示比div+css布局慢;

总体来说,进来向前端优化、减少数据库操作、减少磁盘IO。向前端优化是指,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机能取得的数据不要到远程取,内存能取到的不要到磁盘取。






前端面试宝典——来自cnblog

前言   本文总结了一些优质的前端面试题(多数源于网络),初学者阅后也要用心钻研其中的原理,重要知识需要系统学习,透彻学习,形成自己的知识链。万不可投机取巧,只求面试过关是错误的! 面试有几点...
  • piaoxuetianya1
  • piaoxuetianya1
  • 2014年08月01日 16:02
  • 27410

前端面试宝典(内容很多,也有很多重复)

二、JS基础 1、javascript的typeof返回哪些数据类型 Object number function boolean underfind 2、例举3种强制类型转换和2种隐式类型转换...
  • liuwengai
  • liuwengai
  • 2016年10月07日 20:18
  • 6691

2017年前端面试题整理汇总100题

2017年前端面试题整理汇总100题
  • kebi007
  • kebi007
  • 2017年02月05日 18:14
  • 112422

Web前端面试指导(五):掌握面试技巧,让面试变得轻松

5.1 面试形式 1)        一般而言,小公司做笔试题;大公司面谈项目经验;做地图的一定考算法 2)        面试官喜欢什么样的人 ü  技术好、自信、谦虚、善于沟通、表达。 ...
  • lxcao
  • lxcao
  • 2016年09月21日 15:06
  • 3397

程序员面试宝典

初次接触编程是在上大学,从C语言的hello world学起,再到后面的C++,JAVA,数据库,计算机网络,WEB开发,汇编,软件工程,编译原理,操作系统,嵌入式编程等等,每学期流水账似的数十门课程...
  • u012155923
  • u012155923
  • 2016年04月02日 22:20
  • 1570

Java面试宝典2017版

一. Java基础部分............................................................................................
  • longyajidi
  • longyajidi
  • 2017年06月19日 08:53
  • 47998

c++程序员面试宝典

静态存储区 static静态变量 全局变量 栈 局部变量 堆 动态分配的 栈堆:循环的迭代用中 数据量大 则溢出 239 static作用:静态变量的生存周期和作用域...
  • cyuyanchenxi
  • cyuyanchenxi
  • 2017年03月20日 23:28
  • 510

《Java面试宝典2016》学习实践与笔记

11、“==”和“equal”方法究竟有什么区别 如下编码所示,相同的字符串,两次不同的声明,分配的地址不一样。除非编译器有优化。 package somethingelse; public...
  • stubbornying
  • stubbornying
  • 2016年06月15日 22:52
  • 6395

C++面试宝典 知识点集锦

1.new、delete、malloc、free关系 delete会调用对象的析构函数,和new对应,free只会释放内存,new调用构造函数。malloc与free是C++/C语言的标...
  • u012339746
  • u012339746
  • 2014年06月27日 16:13
  • 4976

【JAVA程序员面试宝典】2天看完了-谈谈我的理解吧

今天开启阅读了这本书,中断了原计划中算法中级层次的系统性训练,我觉得先看看面试题吧。先给这本书A掉再说。 阅读了一天,大概阅读了一半,有点失望,因为这本书讲解的面试都是基础中的基础,我看着都着急,作者...
  • superMarss
  • superMarss
  • 2014年09月07日 23:44
  • 5137
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端面试宝典(整理ing)
举报原因:
原因补充:

(最多只允许输入30个字)