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. Prometheus 企业微信报警/inhibit抑制 /静默(二)

    创建企业微信应用 注册企业微信:访问https://work.weixin.qq.com/,注册企业,随便填,不需要认证 创建应用 创建告警配置 vim /usr/local/prometheus-2 ...

  2. vue命名视图实现经典布局

    vue命名视图实现经典布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. win10 vscode使用 智能提示

    1.没有第三方库的智能提示 参考:https://code.visualstudio.com/docs/python/editing 1.点开Settings 2.搜索加添加 3.添加后的内容 然后就 ...

  4. [Swift]LeetCode246.对称数 $ Strobogrammatic Number

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  5. 调用链Cat介绍

    1. 调用链Cat 1.1. 调用链演进 1.2. 开源产品比较 1.3. 监控场景 1.4. cat的增值作用 1.5. cat典型报表 1.5.1. 应用报错大盘 1.5.2. 业务大盘 1.5. ...

  6. 我们为什么要搞长沙.NET技术社区?

    我们为什么要搞长沙.NET技术社区? 感谢大家的关注,请允许我冒昧的向大家汇报长沙.NET技术社区第一次交流会的会议进展情况. 活动过程汇报 2019年2月17日,继深圳,广州,西安,成都,苏州相继成 ...

  7. Jmeter-阶梯场景设置

    接上一篇[Jmeter-常用线程组设置及场景运行时间计算] Jmeter复杂场景设计,依赖插件jp@gc - Stepping Thread Group (deprecated)和jp@gc - Ul ...

  8. VSCode与Deepin资源管理器冲突

    解决方式: xdg-mime default dde-file-manager.desktop inode/directory 此外,网上有较多推荐(在deepin 15.8版本上测试无效): gvf ...

  9. spring统一错误响应设置

    在类入口增加 @RestControllerAdvice注解.可以用于定义@ExceptionHandler.@InitBinder.@ModelAttribute,并应用到所有@RequestMap ...

  10. Linux下python2和python3共存

    python下载地址: https://www.python.org/ftp/python/3.4.4/Python-3.4.4.tar.xz 下载命令: wget https://www.pytho ...