论HTML与CSS优化

说到HTML和CSS的优化,想必已经有很多相关文章在介绍这个东西,度娘一搜一大片文章,优化方法也琳琅满目,但我稍微扫了一下,大部分都是再说SEO优化的东西。确实,做前端领域的人比较重视的当然是访问量,有人访问,做的网站才是成功的,如果没有人访问,你做再好的网站也一无是处。

但我要谈论的优化就与SEO优化扯不上半毛钱关系,我从前端开发人员角度说一说我理解的前端优化。

近年来都在流行这个词:语义化。其实表面上语义化很好理解,就让人能一眼看懂嘛。。但实际实现真正的语义化实在是太困难了,而且这个概念似乎说的太神奇,就像语义化之后的网页能飞天似的。。。其实不然,语义化的确能提升整个代码的结构、可读性,对于高速发展的当今互联网行业来说是必须的,不过确实没有必要太神话这个东西,以至于为了语义化牺牲更多不必要的东西,比如兼容性.

前端工程是从Web发展到现阶段才逐渐清晰的一个概念,因为Web应用的复杂化,大型化,开发人员不得不将前端项目真正作为一个工程来看待.自然而然开人员不是一个人吧,开发完还需要修Bug吧,上线完还得迭代吧,种种不得不直面的问题都指向了一个根本问题:代码的可维护性.开发人员的价值其实不体现在如何可以实现一个功能,给点儿时间不会代码的人也能给你实现出来,而是在与培养对与维护代码的可维护性的意识.开发人员不可能一直在基层只完成上面交下来的任务,而是将每一个任务都当做一个小工程看待,虽然有可能这个任务只是一个非常简单的功能,但开发功能的过程当中就需要想的稍微多一些,比如这个功能能不能抽出一部分非业务逻辑呢,如何拆分功能点让它更加弹性呢,别人能不能一下就看懂是啥呢…

HTML标准当中定义了很多HTML元素,可能有一些元素我们一次都没有使用过,然而这不是一个坏事儿,对于浏览器来说,首先会创建DOM节点,然后再将DOM节点加入到DOM树中,最后再render(有些文献提到DOM树创建过程与render过程是异步状态,可以再查一下),每一个HTML节点都需要这些过程,因此无论是从理论上还是实际情况上来说,选用不同的HTML对象实际是并无太大的性能损失,加上用户对HTML元素是完全未知的状态,并且由于CSS reset的存在,导致标准提供的各个DOM对象之间的差异就更少了.不过这种话不能说的太绝对,HTMLSelectElement和HTMLVideoElement差异性可能就大一些,具体差是在DOM树形成的过程还是render的过程,我将在另外一篇文章中分析.前端开发人员在实际开发过程中也发现,为了应对需求,我们需要对页面上的更多部分具有更高的控制权,举例来说,Video标签虽然提供control,但我就不能使用它的control;select虽然是选择控件,但我就非得使用js做出相应功能,这不是哪家不遵守标准的问题,是因为标准只定义了接口层方面的信息,而对于UI层并没有限制,所以千奇百怪也没有办法了.

上面扯这么一大堆其实就是为了说明一个问题:选用哪个HTML标签在大多数情况下是取决于开发者而不是标准.所以在开发的美学上看来其实是没有什么标准可以阻止我在所有的页面上都使用span,而不用div或者其他.不过之前也有说过,可能这种美学是自己的,就像你画一幅画,你自己的美学并不能提升这幅画的价值,而是需要认同,价值才能有所提升.在前端中同样,所写出来的代码需要其他人认同,才可以说你这个代码写的漂亮,而不是自己觉得不错就可以.

我跟其他前端工程师一样,也纠结过这个问题:到底怎么写HTML,CSS才是别人所可以认可的,为此也查过不少资料,人们也众说纷纭,实际上搞得我更加不懂怎么写了,但所有的写法好不好其实根本就是,维护性咋样.已可维护性为出发点去想一想标准,其实相对来说还是可以提取出要点去回答上面的问问题的.

简单总结了一下以上问题的解答:
标签语义总能让别人知道里面大概是什么东西,所以使用不同的标签是有意义的,但不必太深究
class语义总需要让别人知道里面是什么东西,所以需要直接写出里面是什么,这样才能做到不看页面也能快速定位
总需要把自己可以控制的东西弄得更多,所以有些标签不太建议使用

按照上面的解答分析一下下面的代码:

<p class="select selectone"></p>
<ul class="options">
 <li value="1">options1</li>
</ul>
<select class="selectone">
 <option value="1">options1</option>
</select>

select标签确实一眼就能看出这是啥,但class也一样能看出这是啥,因为实际环境中你需要指明这是selectone,而不仅仅是一个select,因为页面中可能有很多个select,你怎么去区分?
class总能告诉你这是什么东西,而select selectone这种组合总能给你更多可定制的东西,比如select一套样式,selectone可以更特殊一些,而且更重要的是,select标签的option是没法应用样式的…,我可是遇到过这种坑

当然这属于比较特殊的,可以再看看下面的

<div class="content contentone">
  <p class="paragraphone">111</p>
  <p class="paragraphtwo">222</p>
</div>
<div class="content contentone">
  <div class="paragraph paragraphone">111</div>
  <div class="paragraph paragraphtwo">222</div>
</div>

应用上面的理论,p总能告诉你这是一个段落,更有助于开发阅读,而div不具有啥语义,但也没啥问题,所以建议第一个例子而你写第二个例子也没错

W3C新标准中有对自定义标签的支持,如果用户浏览器都能与时俱进,那这个能将语义化提高一个量级

<m-content>
  <u-paragraph class="one">111</u-paragraph>
  <u-paragraph class="two">222</u-paragraph>
</m-content>

所以,关于如何写出让多人认可的HTML/CSS,不妨按照我刚才说的那两句试一试,你会觉得爽爆了这件事儿

Linux上使用Thinkpad指纹识别

用Linux的童鞋会经常使用这个东西:sudo,反正我觉得我用的还是比较多的,用的少的要不就是不爱折腾,要不就是已经使用的是root了.为了安全起见,提权建议在命令不得不提权的时候才使用,这样能保证系统最大的安全和稳定.但Linux不像Windows,厂家会开发很多相关的Drivers或者Applications来提供某些部件的使用,比如说指纹识别就是,在比如说Thinkpad的指纹识别.

难道我只能把他当成摆设了(⊙_⊙)?那不能够啊,必须得物尽其用,刚好也能解决每次sudo都得写一下密码,麻烦也就罢了,输太多了别人都知道你密码了吧…

有时候百度其实很坑,不能说百度坑,得说是中文文档太稀少,不够全面,所以百度不适合猿类使用,猿类还是比较适合原汁原味的原版文档.我虽然还没那么猿,但百度实在是找不到了,要不然我还是不会上不一定能连上而且速度慢的不行的google…

废话不多说,开始教程.

首先要确认一下你的指纹识别器是否被支持,如果不支持要不自食其力,要不联系一下作者?地址:http://www.ullrich-online.cc/fingerprint/contact.php

这是支持的指纹识别器设备ID列表(terminal运行lsusb, 看一下相应设备的ID)

lsusb样例

 

 Supported readers (run command lsusb to find out the ID of your reader)
============
045e:00bb    08ff:1683    08ff:2580    08ff:268d    147e:2020
045e:00bc    08ff:1684    08ff:2660    08ff:268e    147e:3001
045e:00bd    08ff:1685    08ff:2680    08ff:268f    1c7a:0603
045e:00ca    08ff:1686    08ff:2681    08ff:2691
0483:2015    08ff:1687    08ff:2682    08ff:2810
0483:2016    08ff:1688    08ff:2683    08ff:5501
05ba:0007    08ff:1689    08ff:2684    08ff:5731
05ba:0008    08ff:168a    08ff:2685    138a:0001
05ba:000a    08ff:168b    08ff:2686    138a:0005
061a:0110    08ff:168c    08ff:2687    138a:0008
08ff:1600    08ff:168d    08ff:2688    138a:0011
08ff:1660    08ff:168e    08ff:2689    138a:0017
08ff:1680    08ff:168f    08ff:268a    138a:0018
08ff:1681    08ff:2500    08ff:268b    147e:1000
08ff:1682    08ff:2550    08ff:268c    147e:2016
and
0483:2015    147e:1003    147e:3000
0483:2016    147e:2015    147e:3001
147e:1000    147e:2016    147e:5002
147e:1001    147e:2020   147e:5003
147e:1002

比如说我的147e:2020就在支持列表,那就确认硬件是支持了,然后需要看相应操作系统支不支持:

支持的环境:

Ubuntu 8.04, 8.10, 9.04, 9.10, 10.04, 10.10, 11.04 with GDM, Ubuntu 11.10, 12.04, 12.10, 13.04, 13.10, 14.04 with LightDm, Kubuntu 10.04, 10.10 with KDM, Lubuntu 10.04 with GDM, Fedora 10 and 12 (32bit) with GDM, Debian 7.

一般desktop操作系统都没有问题,如果有问题,contact author,作者可是说了Your help is needed!

确认都没问题之后就可以进行安装了.

0.*如果你之前有安装过Fingerprint GUI,需要恢复你所有做过的事情,特别是 /etc/pam.d/

1.添加源,执行如下命令

    sudo add-apt-repository ppa:fingerprint/fingerprint-gui
sudo apt-get update

2.安装相应安装包和依赖包,执行如下命令

sudo apt-get install libbsapi policykit-1-fingerprint-gui fingerprint-gui

3.注销,重新登录系统

4.运行fingerprint-gui,可以命令行也可以ubuntu search and run it

5.运行之后可以看见如下窗口:

Fingerprint GUI界面

如果之前确认设备被支持,Fingerprint devices应该已经默认选中相应设备.直接点next

6.写入指纹数据,点相应红点儿然后next

7.扫描你的指纹,一共四次,然后会问你是否再录入其他指纹,可以按照自己的需求录入或者next

8.Settings标签中需要Test PAM service是否正常,依次选择并点击test,如果测试没有问题,那点击next

9.保存密码副本到可移动介质,Save to directory选择u盘,写入你的密码,点击保存.然后finish就可以点击了.

10.enjoy,可以在terminal输入sudo测试一下,刷指纹直接就能sudo上,屡试不爽,登陆系统也不用输入密码,刷一刷更健康.

 

 

合并页面小图片的神器-SpriteMe

我相信很多做前端开发的朋友们总会遇到这个问题:就算是再简单的页面也有需要很多小图片来进行点缀,就好像一堆字和一堆线组成的页面并不好看似的.那么问题来了,设计师啪一下把设计稿砸你脸上了,你需要切图再合并再无数次background-potision:-xpx -ypx;终于搞定了,结果这种活还真多 = =.这时候神器就派上用场了

今天介绍的这个叫SpriteMe的东西非常碉.可以帮我们省去合并小图片的时间和定位的时间,只要网站小图片都加载完成了,点一下SpriteMe,再点一下Make sprite,再来一下export css.就搞定了,哪有那么麻烦的定位过程?

说起来这东西我觉得一般都找不到,隐藏的太深了,以至于官网也相当简单.spriteme.org

移动端仿真线上调试方法

一般在做移动端页面相关开发的时候,可能会出现以下几种情况:

a)我需要携带域名下的cookie信息

b)我需要确认移动端上的效果与目标效果一致

c)我需要用到线上的部分功能

对于上述三种问题的常规解决方案是

answer a)使用hosts做解析

answer b)在同一可访问网络下直接通过IP地址访问

answer c)同answer a

不过以我的实践来看,这种方式去做开发调试是相当麻烦的= =,所以我在此推荐一种新的比较完美的移动端调试的方案。

首先来准备一下相关工具:

1.Fiddler

2.手机一部

3.电脑一台

*4.Vpn

*为可能需要的

我再啰嗦几句,说一说上面的工具:

Fiddler可是神器,自行脑补。

手机和电脑这个是99%必须的,肯定有例外不用这些,欢迎补充。

下面我来讲一下大概的步骤。

1.打开Fiddler,Tools菜单下的Fiddler Options,点击Connections选项卡,勾上Monitor all connections,重新启动Fiddler。

2.打开Fiddler Tools菜单下的HOSTS,勾选Enable remapping,启用Host Remapping功能。在下面的输入框中按照#Example输入

ex. 10.18.24.66 test.douhan.li

保存一下。

3.设置手机的相关代理,指向该计算机的8888端口

4.enjoy

虽然步骤比较简单,不过实际调试会遇到各式各样的问题,其实个人开发一般都不会遇到问题,自己有自己的路由器,自己的域名,本文不适合个人开发者阅读,比较适合具有多种网络限制的人们参考。以下将列几个比较常见的限制情况:

1.有内外网限制,手机无法直接访问电脑

2.微信浏览器相关接口开发

3.其他阻止直接连接的各种问题

按照各种遇到的问题可以按照上述思路想一想解决方案,例如可以通过建立VPN+代理的方式解决问题1等等。

 

关于此博客

我并非文艺范的青年,也不懂怎么写出更文艺的文章来,我仅仅是想分享我在工作生活过程当中遇到的问题和我认为比较不错的解决方案,这不仅仅包括我从事的工作,还包括我在生活过程当中遇到的方方面面的事情。因此,该博客并非·猿人·专属浏览,也随时欢迎到访的各位客人随时交流更多的问题,更优的解决方案。