前端07班 王

QQ截图20151122233151.png

O(∩_∩)O哈哈~
又到了一年一度，一日一次写博客的激动人心的日子，今天的博客其实特简单，就是搜集整理一下若愚老师上课留下的三个问题，希望与大家一起共勉。
好了，开始正题......

问题壹：utf-8和gbk的差别？

答：GBK的文字编码是双字节来表示的，即不论中、英文字符均使用双字节来表示，只不过为区分中文，将其最高位都定成1。

 至于UTF－8编码则是用以解决国际上字符的一种多字节编码，它对英文使用8位（即一个字节），中文使用24位（三个字节）来编码。对于英文字符较多的论坛则用UTF－8节省空间。
 GBK包含全部中文字符，UTF-8则包含全世界所有国家需要用到的字符。

GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准（好像还不是国家标准）
UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。比如，如果是UTF8编码，则在外国人的英文IE上也能显示中文，而无需他们下载IE的中文语言支持包。
所以，对于英文比较多的论坛 ，使用GBK则每个字符占用2个字节，而使用UTF－8英文却只占一个字节。
UTF8能很好的兼容其他国语言，相同数据的数据库占用量是gbk的1.5倍，如果你的网站只面向中国用户，可以只用考虑选择简体版GBK是GB18030的子集,GBK是包括中日韩字符的大字符集合,如果是中文的网站,推荐GB2312 GBK有时还是有点问题.为了避免所有乱码问题，应该采用UTF-8，将来要支持国际化也非常方便 ,UTF-8可以看作是大字符集，它包含了大部分文字的编码。使用UTF-8的一个好处是其他地区的用户（如香港台湾）无需安装简体中文支持就能正常观看你的文字而不会出现乱码。GBK的文字编码是双字节来表示的，即不论中、英文字符均使用双字节来表示，只不过为区分中文，将其最高位都定成1。至于UTF－8编码则是用以解决国际上字符的一种多字节编码，它对英文使用8位（即一个字节），中文使用24位（三个字节）来编码。对于英文字符较多的论坛则用UTF－8节省空间。GBK包含全部中文字符，UTF-8则包含全世界所有国家需要用到的字符。GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准（好像还不是国家标准）,UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。比如，如果是UTF8编码，则在外国人的英文IE上也能显示中文，而无需他们下载IE的中文语言支持包。所以，对于英文比较多的论坛 ，使用GBK则每个字符占用2个字节，而使用UTF－8英文却只占一个字节。请注意：UTF-8版本虽然具有良好的国际兼容性，但中文需要比GBK/BIG5版本多占用50%的数据库存储空间，因此并非推荐使用，仅供对国际兼容性有特殊要求的用户使用。简单地说：对于中文较多的论坛，适宜用GBK编码节省数据库空间。对于英文较多的论坛，适宜用UTF-8节省数据库空间。

  GBK简体中文版和UTF8简体中文版有什么区别?ASCII(ISO-8859-1)是鼻祖，最简单的方式，字节高位为0GB2312、GBK、GB18030，这几个是中文编码方式，并向下兼容。GB2312包含7000多个汉字和字符，GBK包含21000多个，GB18030更厉害，到了27000多个。他们都是用2个字节来表示一个汉字。跟ascii是怎么区分的呢？如果高字节的高位为1（也就是高字节大于127），就表示是汉字，低字节并无明显特征。

Unicode是统一编码，它建立了一个全世界统一的码表。世界上的所有文字，在这张码表中都是唯一的。
UTF－8是Unicode的一种存储、传输方式。它将整个Unicode码表分为3部分。0000 - 007F 这部分是最初的ascii部分，按原始的存储方式，即0xxxxxxx。0080 - 07FF 这部分存储为110xxxxx 10xxxxxx0800 - FFFF 这部分存储为1110xxxx 10xxxxxx 10xxxxxx因此，一个汉字究竟被存储为什么，就需要：先查unicode码表，然后根据在码表的位置进行计算。例如：“电”字，在码表中是3575，计算成utf8就是E794B5，而在GB2312的码表中为B5E7UTF－8的好处：兼容ASCII，存储英文文件都是单字节，文件小。当然，当以存中文为主时就变成了3字节编码了，比GB系列还大！如何标明一个文件是utf8格式呢？这个标记是可选的：EF BB BF。比如，用windows自带的记事本创建一个utf8格式的文件，就会加上这个标记。但是，如果用ultraedit创建utf8文件，并不会加上这个标记。这个标记有个术语，叫做BOM（Byte Order Mark）。不带BOM的utf8文件和GB2312文件怎么区分呢？我也不知道。唯一能想到的办法就是：先用一种试，如果出现乱码，就用另一种再试
UTF－16是双字节存储，这就带来一个问题，即高低字节的顺序。两个字节有两种顺序，它们也用BOM来标明。分为大尾码和小尾码两种。大尾码的BOM是FEFF，小尾码的BOM是FFFE，所以我觉得还是GBK好些，如果你是中文站的话。
UNICODE,GBK,UTF-8区别：简单来说，unicode，gbk和大五码就是编码的值，而utf-8,uft-16之类就是这个值的表现形式．而前面那三种编码是一兼容的，同一个汉字，那三个码值是完全不一样的．如＂汉＂的uncode值与gbk就是不一样的，假设uncode为a040，gbk为b030，而uft-8码，就是把那个值表现的形式．utf-8码完全只针对uncode来组织的，如果ＧＢＫ要转ＵＴＦ－８必须先转uncode码，再转utf-8就ＯＫ了．

问题贰：常见的浏览器有哪些，有哪些内核？
答：我们日常接触电脑最频繁的使用的一款应用程序应该就是浏览器了。
那么，我们浏览的所有网页都要通过浏览器进行浏览，还有很多插件需要通过浏览器进行使用。浏览器有多重要？可以说，没有浏览器，我们上网就没有什么意义。

QQ截图20151122225842.png

 下面说一说我们常见的浏览器有哪些，

 谷歌浏览器：
 浏览器使用配额最高的一款浏览器。占有份额百分之四十以上。
 里面含有各种各样的插件，因有尽有。其缺点就是有点占用内存。

IE浏览器：
windows系统自带的一款浏览器。与windows融为一体的浏览器。界面简洁明了，就是插件太少，使用不是非常的方便。

火狐浏览器：
小巧方便快捷。一般正常使用需要的插件里面都有。

 欧朋浏览器：
 速度快，但是其使用起来有很多的不方便之处，很多播放器都要其内部的专门的插件还有其它的不支持，并且下载插件不支持中文界面，使用起来尤为的不方便。

 遨游浏览器：
 集成了很多内部插件，不如记事本，截图工具，在线翻译等等，比较适合不太会使用计算机的人使用。使用起来简单明了方便。

 简单来说，浏览器组成可分两部分：Shell+内核。shell就是指浏览器外壳，就是我们用肉眼能看到的部分，如菜单、工具栏等用户界面。内核，我们就看不到了，他是幕后英雄，我们上网看到的所有东西都先需要经过它处理，然后再把内容呈现到我们眼前。

浏览器内核又可以分成两部分：渲染引擎(layout engineer或者Rendering Engine)和JS引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至 显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内 容的应用程序都需要内核。JS引擎则是解析Javascript语言，执行javascript语言来实现网页的动态效果。最开始渲染引 擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

“内核”只是一个通俗的说法，其英文名称为“Layout engine”，翻译过来就是“排版引擎”，也被称为“页面渲染引擎”（下文中各种说法通用）。它负责取得网页的内容（HTML、XML、图像等等）、整理信息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要排版引擎。

而浏览器的Shell(“外壳)便很好理解了，它是一个面向用户的界面，也就是网页浏览器为我们实现的各种功能。

浏览器的外壳开发和内核开发完全是两个不同的领域。相对而言，内核开发更简单一些，因为其用户需求简单而明确，面对的使用者也都是程序员；外壳开发要面对最终用户，要考虑适应不同的用户使用习惯，特别是还要和各种弹出广告的网站做斗争

QQ截图20151122233138.png

在技术上，其实内核开发和外壳开发很多地方是相通的，我认识的一些外壳开发者可以在非常短的时间内成为Gecko内核的开发者。不过内核开发和外壳开发还是有很多不同的，其中最大的区别在于引擎的可信程度，在外壳开发时，可以假设完全信任渲染引擎，假设其没有Bug；而在浏览器内核开发时，这些假设不存在。另外，对于程序员的要求也有很大的不同，特别是浏览器的DOM、插件、Layout和JavaScript模块，这些模块的部分代码对于性能的要求非常严格。我曾经犯了一个错误，在发行代码中多写了一句调试用的printf，结果导致CPU占有率增加了接近30%。而同样的问题，在外壳开发中则很少会遇到。

同样，在外壳开发中的鼠标手势、广告过滤和书签管理等功能在内核开发中根本不会遇到，可以这么认为，虽然外壳和内核都是浏览器开发，但实际上是截然不同的两种软件。

浏览器内核的优缺点
Trident：这种浏览器内核是IE浏览器用的内核，因为在早期IE占有大量的市场份额，所以这种内核比较流行，以前有很多网页也是根据这个内核的标准来编写的，但是实际上这个内核对真正的网页标准支持不是很好，甚至在2005年，与网页标准制定组织(W3C理事会)所制定的标准发生了脱节，同时 Trident 内核本身的BUG比较多，对一些符合W3C标准的网页代码支持不是很好，这在早期的IE版本中比较明显，比如IE5.5以前(包括IE5.5)，其实IE6对W3C标准的支持也不是很好，而我们现在很多人都在使用IE6，事实上它也属于一个比较早的版本。

但是由于IE的高市场占有率，微软也很长时间没有更新Trident内核，这导致了二个结果

1，Trident内核和W3C标准脱节。

2，Trident内核的大量Bug等安全问题没有得到解决，加上一些专家学者公开自己认为IE浏览器不安全的观点，使很多用户开始转向其他浏览器，FF,Opera就是这时期兴起的。

Gecko：这是Firefox 和 Flock 所采用内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。

Presto：Opera 采用的是 Presto内核，Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。

Webkit：Webkit 是 Safari 采用的内核，不过 Safari 是苹果系统下的浏览器(虽然也有windows版，但是比较少)，所以只简单介绍一下这个内核的优点和缺点，优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。

现在的浏览器内核及支持的浏览器主要有以下几种：
四大引擎内核：Trident，Gecko，Presto，Webkit

Gecko是C++开发的，Open Source的渲染引擎，包括了SpiderMonkey(Rhino)。主要的使用者有Firefox。

Webkit是苹果公司基于KHTML开发的。他包括Webcore和JavaScriptCore（SquirrelFish,V8）两个引擎。主要的使用者有Safari，Chrome。

Presto由Opera Software公司开始的，用于Opera的渲染引擎。Macromedia Dreamweaver （MX版本及以上）和Adobe Creative Suite 2也使用了Presto的内核。

WebCore及WebKit引擎，它们均是KHTML的衍生产品
Safari浏览器版本不同，使用内核不同。老版本使用WebCore内核，新版本都使用WebKit内核。

从该表上，我们可以看到主要是前4个内核占领了大部分市场。而我们常用的IE浏览器，所用的内核是Trident。

现在见到的浏览器：遨游、搜狗、360、TT等，最开始用的都是单独Trident内核，可现在新版本已是双核了。

   国内的开源浏览器开发氛围状况
   其实，开发浏览器内核并不难，至少没有大家想像的难，比开发操作系统内核简单多了。一般一个有中等c++开发经验的程序员学习1-2个月就可以上手。至于具体能作到什么层次，需要看个人的努力程度了。至于开发Firefox浏览器外壳（做扩展）则相对简单一些，有一定的网页制作基础就可以了。

  国内的开源浏览器开发氛围，和国内的开源软件的大环境很像，公司的领导还很难接受自己投资开发的软件拿出去让其他人“白”用，而国内的开源浏览器开发最大的问题在于高质量的开发人员太少，当然，这可能和国内的大环境有关。如果不能很好的解决程序员的生存和发展问题，开发人员短缺的问题将一直存在。

主流浏览器所使用的内核分类
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等

典型的双核浏览器包括：
搜狗2.0：Trident内核和WebKit内核
傲游3.0Beta：Trident和WebKit内核
QQ浏览器5：Trident内核和WebKit内核
使用双核浏览器时，可以自动/手动切换内核来浏览网页。

问题叁：px和em，rem的区别？
答：

Paste_Image.png

 PX特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

   任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

 所以我们在写CSS的时候，需要注意两点：

1. body选择器中声明Font-size=62.5%；

2. 将你的原来的px数值除以10，然后换上em作为单位；

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

   也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。
   rem特点
   rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子：
p {font-size:14px; font-size:.875rem;}注意：

    选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

在这里为大家提供一个px,em,rem单位转换工具
地址：http://pxtoem.com/

2.jpg

    好了，今晚就了解这么多，希望跟着老师的脚步越走越远。
    谢谢七班的伙子美女们，谢谢我们的饥人谷，谢谢大前端给我一个拼搏的机会......