Henry前端笔记之 问答与思考

一 问答

1.什么是盒子模型

首先盒子模型包括分为两种：W3C标准盒子模型与IE盒子模型
标准盒子模型：总的width = content-box + padding + border + margin 给盒子设置width属性是指的content-box宽度
IE盒子模型：总的width = border-box+ margin （border-box-content= padding + border +content） 给盒子设置width属性指的是border-box宽度
IE5.5及更早的版本使用的是IE盒模型。IE6及其以上的版本在标准兼容模式下使用的是W3C的盒模型标准。我们说这是一个好消息因为这意味着此盒模型问题只会出现在IE5.5及其更早的版本中。只要为文档设置一个DOCTYPE，就会使得IE遵循标准兼容模式的方式工作
css3的box-sizing属性给了开发者选择盒模型解析方式的权利。W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

2.src与href的区别

href标识超文本引用，用在link与a等元素上，是引用和页面关联，link是在当前元素和引用资源之间建立联系

src表示引用资源，表示替换当前元素，用在img，script，iframe上，src是页面内容不可缺少的一部分

src是source的缩写，是指向外部资源的位置，指向的内部会迁入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到当前文档中，例如js脚本，img图片和frame等元素。

<script src="js.js"></script>当浏览器解析到这一句的时候会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕，图片和框架等元素也是如此，类似于该元素所指向的资源嵌套如当前标签内，这也是为什么要把js放在底部而不是头部。

<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css而不是使用@import。

3.link和@import的区别

两者都是外部引用CSS的方式，但是存在一定的区别：

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。

4.简述同步和异步的区别?

同步和异步其实只是一种消息通知机制。
同步：js因为是单线程的，当程序执行到某个任务时，需要等到结果返回在执行下一个任务，这时候就是同步进行。
异步：当程序运行到某个任务时，不等待结果的返回，直接往下执行，当有结果的时候，会通过消息通知已经处理完成。

5 本地存储异同

localstorage常用方法

//存储
localStorage.setItem(key,value);
//获取
localStorage.getItem(key);
//删除
localStorage.removeItem(key);

6 请说出三种减少页面加载时间的方法

• 压缩JS，CSS代码，把CSS放在顶部，把JS放在底部，最好把CSS和JS放到外部文件。
• 合并图片，做成雪碧图。
• 标明图片的宽度及高度。
• 使用CDN(Content Delivery Network)网络加速
• 服务器启用gzip压缩功能
• 使用多域名负载网页内的多个文件、图片
• 重复的HTTP请求数量应尽量减少

二，思考

1.站点Logo是否应该出现在标签h1中？

logo一般是作为图片或者图标的形式放在左上角，但是不应该放h1中，h1最好放网站的名称，这样更利于爬虫的抓取，有利于语义化。

2.是否应该支持IE6?

IE6的市场份额应该非常小了，但是如果是做的产品是面向政府等，如果他们还应用比较多，那就需要兼容，如果是面向整个互联网用户，我觉得没必要兼容了。

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

我觉得需要符合Web的语义化，链接的文字就应该是描述这个链接的，而不是“Click here”这一类的。

6.链接是否应该在新窗口打开？

我觉得如果是跳转到别的站点的链接，就应该在新窗口打开，如果是网站本身的页面，就可以直接采用跳转的形式。