002


1、请列举出7个以上的display属性

none,block,inline,inline-block,list-item,run-in,table,inline-table,table-row-group,inherit,table-caption,table-cell,table-column,table-column-group,table-row,table-footer-group,table-header-group

2、请列举CSS3新增的属性

overflow,border-radius,box-shadow,border-image,background-size,background-origin,text-shadow,word-wrap,@font-face,ranslate(),rotate(),scale()

,skew(),matrix(),transition,@keyframes ,olumn-count,column-gap,column-rule,resize,box-sizing,outline-offset

3、谈谈前端优化

 减少 http 请求次数:css spirit,data uri。 JS,CSS 源码压缩。 前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费,前端用变量保存 AJAX 请求结果,每次操作本地变量,不用请求,减少请求次数。 用 innerHTML 代替 DOM 操作,减少 DOM 操作次数,优化 javascript 性能。 用 setTimeout 来避免页面失去响应。 用 hash-table 来优化查找。 当需要设置的样式很多时设置 className 而不是直接操作 style。 少用全局变量。 缓存 DOM 节点查找的结果。 避免使用 CSS Expression。 图片预载。 避免在页面的主体布局中使用table,table 要等其中的内容完全下载之后才会显示出来,显示比 div+css 布局慢

4、一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

查找浏览器缓存

DNS 解析、查找该域名对应的 IP 地址、重定向(301)、发出第二个 GET 请求

进行 HTTP 协议会话

客户端发送报头(请求报头)

服务器回馈报头(响应报头)

html 文档开始下载

文档树建立,根据标记请求所需指定 MIME 类型的文件

文件显示

浏览器这边做的工作大致分为以下几步:

加载:根据请求的 URL 进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS、图象等)。

解析:对加载到的资源(HTML、JS、CSS 等)进行语法解析,建议相应的内部数据结构(比如 HTML 的

DOM 树,JS 的(对象)属性表,CSS 的样式规则等等)

5、谈谈localStorage 和sessionStorage 

localStorage – 没有时间限制的数据存储

sessionStorage – 针对一个 session 的数据存储

6、 display:none 和 visibility:hidden 的区别是什么

display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在。

visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。

7、浮动之后带来的影响

父元素的高度无法被撑开

浮动元素前同级非浮动元素

浮动元素脱离文档流,在当前行的左边或是右边对齐,如果当前行没有足够的空间,它将下移一行,直到有足够的空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

1.直接给父级元素添加高度

2.使用overflow:hidden

3.通过给父元素以及子元素均产生浮动来消除子元素的浮动对父元素内部其他元素的影响

8、JavaScript window.onload 事件和 jQuery ready 函数有何不同?、

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是,前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它,浏览器会按它们在 HTML 页面里出现的顺序执行它们,相反对于 onload技术而言,只能在单一函数里使用。鉴于这个好处,用 jQuery ready() 函数比用 JavaScriptwindow.onload 事件要更好些。

9、谈谈W3C盒模型与IE盒模型区别

w3c 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。IE 盒子模型的范围也包括 margin、border、padding、content,和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading

10、主流浏览器内核

IE浏览器内核:Trident内核,也是俗称的IE内核; 
Chrome浏览器内核:统称为Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核; 
Firefox浏览器内核:Gecko内核,俗称Firefox内核; 
Safari浏览器内核:Webkit内核; 
Opera浏览器内核:最初是自己的Presto内核,后来是Webkit,现在是Blink内核; 
360浏览器、猎豹浏览器内核:IE+Chrome双内核; 
搜狗、遨游、QQ浏览器内核:Trident(兼容模式)+Webkit(高速模式); 
百度浏览器、世界之窗内核:IE内核; 
2345浏览器内核:以前是IE内核,现在也是IE+Chrome双内核;

作者 dairubin

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注