1. css 尽可能的放到head里面,且避免css表达式 【@media 类似】

2. js 尽可能的放到</body>之前 <script>do something</script></body></html>

3. 尽可能的减少图片的使用,并在实际需要使用图片的地方在css定义好img的尺寸。或者加上width , height属性

4. 减少http请求数

5.利用好浏览器缓存机制(移动端优先考虑,pc端考虑下兼容性)

6.利用gzip, 对js ,css , 页面源代码等文本类文件进行压缩处理 7. 如果可以,尽可能的多使用AJax:局部刷新

8. 减少DNS查找 119.188.97.23/images/xxx.jpg

9. 避免重定向 【比如 http://www.cxy666.com 解析的时候 需要重定向到 / 然后根据服务器配置默认页是 index.php index.html 等。所以相当于要重定向两次才能到达 http://www.cxy666.com/index.php 所以尽可能的把url写全】;还有就是301定向

10. 尽可能的使用cdn(内容分发技术)

11. 每个页面的链接最好不要超过100个

12. 页面深度最好不要超过3级, 设置好每个页面的面包屑

13. 尽量使用扁平化风格减少图片的使用

14. 分页 1 2 3 4 .... 8 9 10 [下拉框(就是一个可以到达所有分页的html元素)]

16. 栏目级别控制在3级以内,最长url示例:http://www.cxy666.com/dir1/dir2/xxxxx.html ;也就是说。分类最好控制在两级以内

17. h1-h6 > strong > em

  1.div 和 span 是最没有意义的标签,仅用来排版使用。

  2. 文章主标题用h1,副标题用h2. 其他次要标题用h3-h6,主观上h4,h5,h6不要用,使用strong替代 3. strong 和 em 起到文字强调作用,所以如果只是为了突出文字,但是文字又不重要的话,那么就用b 和 i 来替代,虽然这两个已经建议不要使用了。

html前端优化建议的更多相关文章

  1. YAHOO 34 条前端优化建议

    雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数       终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通 ...

  2. YAHOO 35条前端优化建议(转)

    Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.总结出了一系列 ...

  3. 前端优化建议:合理利用JavaScript的条件运算符

    在最近的项目中要使用到一个格式化文件大小的算法,于是不假思索写了如下代码: function formatSize(size){ if(size<1024){ return size+" ...

  4. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  5. 【webapp的优化整理】要做移动前端优化的朋友进来看看吧

    单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...

  6. 转:浅谈CSS在前端优化中一些值得注意的关键点

    前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...

  7. [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇

    原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...

  8. [转] Web前端优化之 Javascript篇

    原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...

  9. web前端优化-温故知新系列(1)

    有关web前端优化的博文,博客园中有许多网友的博客中都有介绍,而且详细.精准.楼主打算写这个博客,算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的,但是都审查过. 引言: 1. 慢的页 ...

随机推荐

  1. linux虚机配置开发/Server环境全集

    linux虚机配置开发/Server环境全集 9. centos 升级githttp://www.cnblogs.com/grimm/p/5368777.htmla. 下载git2.2.1并将git添 ...

  2. Centos7 编译安装 Nginx Mariadb Asp.net Core2 (实测 笔记 Centos 7.3 + Openssl 1.1.0h + Mariadb 10.3.7 + Nginx 1.14.0 + Asp.net. Core 2 )

    环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡) 系统版本:CentOS-7-x86_64-Minimal-1611.iso 安装步骤: 1.准备 1.0 查看硬 ...

  3. 【ASP】response和sever对象实现用户登录

    1.问题提出 设计两个登录界面:一个register.asp页面用于输入账号,密码等信息进行登录.另一个页面welcome.asp用于显示登录成功的信息.利用request的两个对象response和 ...

  4. CF F. Shovels Shop(前缀和预处理+贪心+dp)

    F. Shovels Shop time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  5. DataRow[]

    datarow[]是datatable 的行数组集合,但是呢好像是不能直接初始化,只能是datarow[] rows = dt.select(condition);这样子.(也可能我才疏学浅没找到吧) ...

  6. hibernate框架搭建

    hibernate框架的搭建步骤: 1.导包 2.创建数据库准备表 3.书写orm元数据(对象与表的映射配置文件) 4.书写配置文件 5.书写代码测试 一.导包: 创建web-maven工程添加hib ...

  7. Senparc之OAuth原理

    今天学习了网易云课堂的 盛派的微信开发课程之OAuth微信网页授权:OAuth原理,边听边来波笔记: 1.什么是OAuth? OAuth 你的接口提供给别人使用,你需要提供Oauth,可以让被人使用, ...

  8. C++ pair方法/vector方法

    一,pair方法 类模板:template <class T1, class T2> struct pair 参数:T1是第一个值的数据类型,T2是第二个值的数据类型. 功能:pair将一 ...

  9. 算法与数据结构(十二) 散列(哈希)表的创建与查找(Swift版)

    散列表又称为哈希表(Hash Table), 是为了方便查找而生的数据结构.关于散列的表的解释,我想引用维基百科上的解释,如下所示: 散列表(Hash table,也叫哈希表),是根据键(Key)而直 ...

  10. NumPy库实现矩阵计算

    随着机器学习技术越来越向着整个社会进行推广,因此学好线性代数和Python当中的numpy库就相当重要了.我们应该知道numpy库的使用是sklearn库和opencv库的基础.主要用于矩阵的计算.当 ...