关闭

前端面试宝典(整理ing)

标签: 前端面试
892人阅读 评论(0) 收藏 举报
分类:

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。向前端优化是指,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机能取得的数据不要到远程取,内存能取到的不要到磁盘取。






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:31480次
    • 积分:612
    • 等级:
    • 排名:千里之外
    • 原创:29篇
    • 转载:8篇
    • 译文:0篇
    • 评论:2条