Web浏览器
1.1、中国市场上常用的Web浏览器
1.2、有头 vs 无头

通常,我们会把Web浏览器分为PC端浏览器移动端浏览器

根据能不能看到界面,我们还可以把Web浏览器分为有头浏览器无头浏览器有头浏览器是指有界面的浏览器,我们可以看到它的展现。上面我们提到的那些全部是有头浏览器无头浏览器是指没有界面的浏览器。 那么无头浏览器有什么用处呢?无头浏览器通常用来进行Web自动化测试的,它不是用来给我们普通人看的。PhantomJS就是一个无头浏览器

还有一种有头浏览器是使用在命令行下的,叫做文本浏览器,因为在命令行下只能展示文本。linkslynx就是一种文本浏览器。

1.3、Web浏览器的引擎

为了便于在不同操作系统之间的移植和进行功能定制,浏览器会把那些公共功能抽象出来,这种东西被称为Web浏览器的引擎或者内核。

我们可以使用Windows API包装Webkit引擎, 打造一个在Windows上可以运行的Web浏览器;

我们可以使用Linux API包装Webkit引擎, 打造一个在GNU/Linux上可以运行的Web浏览器;

我们可以使用macOS API包装Webkit引擎, 打造一个在macOS上可以运行的Web浏览器。

即便是在相同的操作系统上,不同的Web浏览器厂商可以使用相同的引擎打造出完全不同的Web浏览器来。

下面是常见的Web浏览器引擎:

1.4、Web浏览器与前端开发

我们开发的网站是运行在浏览器中的,所以,我们需要对市面上常用的浏览器都比较熟悉, 知道它们对W3CJavaScript的兼容性,哪个版本兼容什么特性等。

ChromeFirefoxSafari等浏览器对W3C规范的兼容性非常高, 一般不会出现什么问题。

对于前端开发者而言,IE是个刺儿头,它对W3C规范的实现总是特别缓慢, 但是,中国市场上IE的用户又是特别的多,主要是中国的Windows盗版系统用户实在太多了,IE被预装在Windows系统中,对那些普通用户来说,IE那就是首选。

在做一个网站之前,首先应该确定,需要兼容哪些浏览器,哪些浏览器的哪些版本,对于针对特定用户的,可以放弃IE。 比如一些CMS系统只是给一些后台管理人员使用的,要求它们使用ChromeFirefox没有任何问题。 就没必要花大量的时间在IE上进行测试了。

如果我们的网站是希望任何用户都可以访问的,那么就要着重考虑IE了,因为使用IE的用户最多嘛。 对于一些大网站,现在都最低支持到IE6IE6Windows XP内置的浏览器,IE8Windows7内置的浏览器, 现在市面上流行的Ghost Windows XP系统内置的浏览器都是IE8,所以,我认为, 顶多支持到IE8即可了。Windows XP虽然已经退役,但是它的用户仍然庞大!

1.5、兼容性问题汇总
1.7.1、string.trim()

IE8和以下版本不支持该方法,可以使用jQuery$.trim(string)代替之。

1.7.2、string.startsWith(prefix)

IE8和以下版本不支持该方法,可以使用string.indexOf(prefix) == 0进行判断。

1.7.3、string.endsWith(suffix)

IE8和以下版本不支持该方法,可以使用string.indexOf(suffix, this.length - suffix.length) != -1进行判断。

1.7.4、event对象

event对象用来表示当前事件相关的一些信息。event对象的属性和方法包含了当前事件的状态。 如:引发事件的DOM元素、鼠标的状态、按下的键等等。

W3C规范中,event对象是随事件处理函数传入的,IE9及其以上版本、其他浏览器都支持这种方式; 但是对于IE8及其以下版本,event对象是作为window对象的一个属性而存在的, 并没有当作处理函数的参数传递。

W3C规范中,事件处理函数原型是function(event)

为了兼容IE8,得写成如下形式:

function(event) {
    var ev = event || window.event;
    //TODO
}

W3C规范中,event对象的target属性表示触发事件的DOM元素, 在IE8里面的window.event对象的srcElement属性表示触发事件的DOM元素, 所以,更近一步,我们,需要写成如下:

function(event) {
    var ev = event || window.event;
    var targetE = ev.target || ev.srcElement;
    //TODO
}

接下来就是标准的操作DOM了。

参考

1.7.5、IE9的水平居中

通常,我们的水平居中的CSS如下:

.text-center {
    width: auto;
    text-align: center
}

只要把该样式应用在要居中的HTML元素上即可。 但是在IE9上确不起作用,为了兼容IE9, 应该弄成如下形式:

<div style="text-align: center">
    <img src="https://fpliustorage.blob.core.chinacloudapi.cn/blog/images/user-avatar.png"
         style="margin-left: auto; margin-right: auto">
</div>

这样,在所有浏览器上都是水平居中的。

1.7.6、CSS3 Media Query

IE8及以下版本不支持CSS3 Media Query, 可以引入respond.js解决。

1.7.7、HTML5

IE8及以下版本不支持HTML5新增的元素, 可以引入html5shiv.js解决。

1.7.8、功能检测及处理

对于功能点进行检测、对不支持的功能进行hack, 可以引入modernizr.js解决。

1.7.9、div

div设置成display:inline-block,你会发现,两个div之间会出现间隙, 但是你用调试工具去看,都没有margin,那这个间隙是哪来的?原来,我们开发的时候,是一行一行写的, 浏览器看到换行符、空格等字符都会空一个格子出来,解决的办法就是不要换行!哈哈,这怎么可能,开发的时候连在一起看不清啊!!所以, 最好对html文件进行压缩处理,将/><之间的空白字符全部去掉,这样就好了! 按理说,上线进行压缩是必备的,不过,我看到大量的网站不进行压缩。这是不专业的做法。

当然,你可能用的不是html文件,可能是模板引擎,每一种模板引擎都有相应的处理程序对它进行压缩处理,找对应的工具进行压缩即可。