分享分享菜单跳至内容首页探讨HTML5的预加载功能prefetch发表回复prefetch 即预加载，在用户需要前我们就将所需的资源加载完毕。有了浏览器缓存，为何还需要预加载？用户可能是第一次访问网站，此时还无缓存用户可能清空了缓存缓存可能已经过期，资源将重新加载用户访问的缓存文件可能不是最新的，需要重新加载Chrome 的预加载技术现在的 chrome 聪明到根据你的浏览记录，预测到你可能访问或搜索哪些网站，在你打开网站之前就加载好了一些资源了。举个栗子，当你在搜索框输入 “amaz” 时，它猜测到你可能要访问 amazon.com，可能就帮你加载了这个网站的一些资源。如果这个预测算法精准的话，就能大大地提高用户的浏览体验了。DNS prefetch我们知道，当我们访问一个网站如 www.amazon.com 时，需要将这个域名先转化为对应的 IP 地址，这是一个非常耗时的过程。DNS prefetch 分析这个页面需要的资源所在的域名，浏览器空闲时提前将这些域名转化为 IP 地址，真正请求资源时就避免了上述这个过程的时间。应用场景1：我们的资源存在在不同的 CDN 中，那提前声明好这些资源的域名，就可以节省请求发生时产生的域名解析的时间。应用场景2：如果我们知道用户接下来的操作一定会发起一起资源的请求，那就可以将这个资源进行 DNS-Prefetch，加强用户体验。Resource prefetch在 Chrome 下，我们可以用 link标签声明特定文件的预加载：不是所有的资源都可以预加载当资源为以下列表中的资源时，将阻止预渲染操作：URL 中包含下载资源页面中包含音频、视频POST、PUT 和 DELETE 操作的 ajax 请求HTTP 认证(Authentication)HTTPS 页面含恶意软件的页面弹窗页面占用资源很多的页面打开了 chrome developer tools 开发工具手动触发预渲染操作在 head 中强势插入 link[rel='prerender'] 即可：本条目发布于2014年11月3日。属于未分类分类。作者是benzun。检讨程序猿发表回复程序员变程序猿，这是个中国问题。多年前，浦东某开发区一个年轻的编程员因病去世，他母亲从四川赴沪奔丧，清理遗物时，她发现儿子床垫下都是钱，老人家痛哭失声，她说，你们看呐，我儿子忙得连花钱的时间都没有。所以说这是个中国问题。编程员是个伴随计算机进入中国的职业，在国外，它不过是个寻常职业，但不知为什么国人特别喜欢强调之。有一次听朋友谈到某某某的孩子从国外很好的大学计算机专业毕业却找不到工作，他们对比不理解。我说毕业不难，但编程能力要达到某种商业要求则比较困难，这是完全不同的概念，好比每年有很多毕业生从中文系毕业，但他们中的大多数人不可能成为好的作家一样，不是吗？作家写字至少需要一定数量的读者买账，这和编程员的作品（编程水平）必须达到某种标准一样。不过，识字的人多，懂代码的人少，不懂的人以为神秘，普罗大众类似文盲的崇拜给予了编程员族群莫名的傲娇感。觑破这一层关系的，自然会自嘲自讽，说自己是码农，可说归说，心中的委屈无处藏匿。只要识字就能读乔伊斯、普鲁斯特、马尔克斯，但能读懂代码的有几人？有几人？这就是门槛，是痛苦的根源，是编程员变成程序员然后变成程序猿的由来。我这么认为。关于程序猿，我特别喜欢一个法国人的说法[注]，他对学生说，你们不觉得写代码像在写诗吗？你丫必须分行，必须保证每个字都不能少但最好一个字不要多，目的是为了节约计算机的存储空间，不是吗？编程员其实是“诗人”呢，不这样心怀美感，岂不是自认庸常？当然，编程员的社会接受度远不如网络段子手，这些码文字的人也许连正儿八经的大学都木上过，但他们就是作，就是能作，与其说他们的文字牛逼不如说他们天生“贫嘴”，像天津卫昔日的先辈，想不嘚瑟都难，天生能喷。非要抱怨，那得说这是社会价值倒挂使然，除非人人是程序猿。怎么突然想起写程序猿呢？如果非要严丝合缝、一丝不苟的答案，西区真不知道，本文也不是为诸位友邻写，不是不愿，而是不敢”僭越“。任何事情归根到底是政治问题，这好像是亚里士多德的观点。再假装嬉戏、调侃，甚至莫衷一是，IT业技术人员我想多少应该明白，除非是人精，否则您就是司空见惯之服务业中的普通一员，写的是不同的文字，可说的是同样的语言。本条目发布于2014年11月3日。属于未分类分类。作者是benzun。写给CSS初学者——-成为高手要学会“自学”发表回复以前写的，无意中翻到，感觉对初学者还有用，就发出来吧，虽然有点老（CSS2时的产物，会CSS2后，再学CSS3，会觉得也很容易）。CSS其实很简单，只要把所有“标签”都理解为“方形框”，写CSS代码就相当于用“方形框”拼图形。什么是“块”标签，什么是“内联”标签。“块”标签，可以理解为，和div类似的标签，定义width height 有效果的标签。“内联”标签，可以理解为，和span类似的标签，定义width height 没有效果的标签。（“块”标签一般用于网页布局，“内联”标签用于修饰文本）选择器的种类和用法，以及优先顺序。style关联>id选择器>class选择器>html标签选择器对于初学者一定要做的事（一直到你真正熟练运用CSS才可省略步骤1）：1，给所有“标签”都要写“border”线，直到整段代码写完，并确认没问题才去掉“border”线（目的是让肉眼可以看到框的具体占用的位置，同时理解属性的功能。注意：此方法比较老土，在IE6时代比较适用。如今：一定要熟练使用浏览器的F12快捷键，熟练掌握审查元素功能，对你学习非常有帮助。）2，“从外到内”的思路。（目的是清晰思路，知道怎样去实现拼图）代码使用技巧（什么时候使用他们）：1，边框 border 代替网页中的线条；(IE6时代：另外主要用于调试时，帮助理解代码时使用)2，宽度 width 所有“块”标签，都要写宽度。(除非你真正理解“继承”)3，高度 height “块”标签高度是固定时才使用，其他时绝对不要写height，容易出兼容性问题。4，外边距 margin “块”标签居中时；另外“块”标签之间有间距时使用（不要动不动就乱加margin）5，内边距 padding “块”标签与内部文字之间的间距（紧记他与width和height之间的尺寸关系，非常重要）6，浮动 float “块”标签按列排版时使用（紧记2列时建议left right,3列时left left right，还有不清除浮动会造成的问题，以及解决办法，这个标记非常重要，精通css，必先掌握之）7，背景 background “块”标签中图片做为背景时使用（这个标记非常重要，精通css，必先掌握之）8，定位 position 浮动实现不了或难以实现的布局，如：某些导航（使用不多，可先掌握background后，再掌握之）9，行高 line-height 对文字排版时都要用到（注意：不是line-height height一定要一起用，这是错误的理解）10，缩进 text-indent 文本缩进时使用（只左边文字缩进时，尽量使用text-indent，而不是使用padding-