读《 高性能html5 》有感

说起html5的高性能首先想到的基本都是浏览器的性能,很少想到服务器端和网络性能,开发效率就更想不到了,

浏览器的性能给我们最直观的感觉就是页面加载的时间,影响页面加载的时间因素包括(html元素多少,http请求次数)

现在网页结构越来越复杂,也就是html元素越来越多,元素越多,页面加载越慢,所以不要滥用HTMl,页要用最少的元素解决最多的问题。比如清除浮动,一般的做法是引入一个元素(div或p),加上样式clear:both。其实万全可以用:after伪元素解决。

合并资源文件和使用图片精灵是减少http请求最显著的方法

合理的布局html元素不但可能加快浏览器渲染效率,最主要的是能够减少浏览器重绘次数。重绘就是我们在改变一个元素的样式的时候是否会影响别的元素的渲染效果,如果影响的元素越多,重绘的工作量就越大,最明显的感觉就是页面卡顿。在DOM树中越深层的元素越独立,对其他的元素影响越小,重绘的工作量越小。

渐进式增强是一种开发方法,是指首先我们要有一个基本的设计框架,特殊的问题我们再对其加强功能模块。

各司其职就如字面意义,HTML、CSS、Javascript这三者都有各自擅长的方面,比如一个动画效果CSS和Javascript都可能实现,但html5中我们就尽量用CSS来实现,效率明显会比Javascript来实现的简单,页且代码量又少。

资源文件位置问题

Javascript要放在文件尾部,因为执行脚本会阻塞页面的渲染,也就是说执行脚本任务和渲染任务是一个单进程,只能同时做一件事,所以一旦把Javascript文件头部,浏览页面时用户只会看到一个空白的页面。只有当脚本全部执行完成才会显示出页面内容。

符合当代浏览器性能的代码用css来布局使用渐进式增强的方法各司其职这几项是高性能的基础。

相关推荐