html页面性能优化两则

Visibility快于Display

让图画时隐时现会创造很有趣的效果，有2种方法可以实现这个目的：使用CSS的visibility属性或者display属性。对于绝对位置元素，diaplay和visibility具有同样的效果。两者的区别在于：设置为display:none的元素将不再占用文档流的空间，而设置为visibility:hidden的元素仍然保留原位置。

但是如果要处理绝对位置的元素，使用visibility会更快。

保持同一URL的大小写一致性

我们都知道UNIX服务器是大小写敏感的，但是你知道吗：Internet Explorer的缓冲区也是区别对待大小写字符串的。因此，作为web开发者，一定要记住保持相同链接的URL字符串在不同位置的大小写的一致性。否则，就会在浏览器的缓冲区中存放同一位置的不同文件备份，也增加了下载同一位置内容的请求次数。这些都无疑降低了web访问效率。所以请谨记：同一位置的URL，在不同页面中请保持URL字符串的大小写一致性。

让标记有始有终

自己编写或者查看他人的HTML代码时，我们一定都遇到过标记有头无尾的情况。比如：

<P>有头无尾标记举例
     <UL>
     <LI>第一个
     <LI>第二个
     <LI>第三个
     </UL>

很明显，上面的代码中缺少三个</LI>结束标记。但是这并不妨碍它的正确执行。在HTML中，这样的标记还有一些，例如FRAME、IMG和P。

可是请不要偷懒，请将结束标记写完整，这样做不仅使HTML代码格式规范，更可以加速页面的显示速度。因为Internet Explorer将不会花费时间判断和计算段落或者列表项目在哪里结束。

<P>有头有尾标记举例</P>
     <UL>
     <LI>第一个</LI>
     <LI>第二个</LI>
     <LI>第三个</LI>
     </UL>

转载于:https://www.cnblogs.com/sutengcn/archive/2007/12/12/991747.html

html页面性能优化两则相关推荐

重度使用Flutter研发模式下的页面性能优化实践
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...
雅虎网站页面性能优化的34条黄金守则（转）
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下 ...
浏览器的加载顺序与页面性能优化
详情参考:浏览器的加载与页面性能优化例子: 一:DNS:在header中添加 <link rel="dns-prefetch" href="//HOSTNAME. ...
web页面性能优化及SEO优化
web页面性能优化前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
移动端页面性能优化方案
移动端页面性能优化方案加载优化使用首屏加载按需加载预加载压缩图片减少Cookie 异步加载第三方资源脚本执行优化 CSS优化 JavaScript执行优化渲染优化 SEO(搜索引擎优化 ...
浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
干货 | 数据思维在携程商旅页面性能优化中的一次实践
作者简介 Graviton,携程研发总监,专注数据思维驱动团队效能与技术发展. 本文旨在通过一个实际的例子,说明如何通过数据思维来解决研发工作中的一些棘手问题.通过此文,希望能够清楚地阐述我对下面几个 ...
页面性能优化，如何减少回流
在开发时,不可避免的会遇到性能优化的问题,怎么做性能才会更好. 说到页面性能优化,我们就谈谈两个概念重绘和回流. 1.什么是重绘,什么是回流? 重绘: 当渲染树中的一些元素需要更新属性,而这些属性只是 ...
前端页面性能优化 - 字体加载优化
相比于英文的字库来说,中文字库的体积非常之大,小则1M,动辄几十 M 的体积非常常见.所以在前端页面性能优化中,字体加载的优化就显得尤为重要.阅读了相关的知识和文章,在研究了市面上字体加载方案之后,我 ...

html页面性能优化两则

html页面性能优化两则相关推荐

最新文章

热门文章