html前端优化建议
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前端优化建议的更多相关文章
- YAHOO 34 条前端优化建议
雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容.这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通 ...
- YAHOO 35条前端优化建议(转)
Yahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践.他们为此进行了一系列的实验.开发了各种工具.写了大量的文章和博客并在各种会议上参与探讨.总结出了一系列 ...
- 前端优化建议:合理利用JavaScript的条件运算符
在最近的项目中要使用到一个格式化文件大小的算法,于是不假思索写了如下代码: function formatSize(size){ if(size<1024){ return size+" ...
- Web前端优化最佳实践及工具集锦
Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...
- 【webapp的优化整理】要做移动前端优化的朋友进来看看吧
单页or多页 本文仅代表个人观点,不足请见谅,欢迎赐教. webapp 小钗从事单页相关的开发一年有余,期间无比的推崇webapp的网站模式,也整理了很多移动开发的知识点,但是现在回过头来看,weba ...
- 转:浅谈CSS在前端优化中一些值得注意的关键点
前端优化工作中要考虑的元素多种多样,而合理地使用CSS脚本可以在很大程度上优化页面的加载性能,以下我们就来浅谈CSS在前端优化中一些值得注意的关键点: 当谈到Web的“高性能”时,很多人想到的是页面加 ...
- [转] Web 前端优化最佳实践之 Mobile(iPhone) 篇
原文链接:http://dbanotes.net/web/best_practices_for_speeding_up_your_web_site_server_mobile.html Web 前端优 ...
- [转] Web前端优化之 Javascript篇
原文链接: http://lunax.info/archives/3099.html Web 前端优化最佳实践之 JavaScript 篇,这部分有 6 条规则,和 CSS 篇 重复的有几条.前端优化 ...
- web前端优化-温故知新系列(1)
有关web前端优化的博文,博客园中有许多网友的博客中都有介绍,而且详细.精准.楼主打算写这个博客,算是对自己一年工作来的一个总结和积累有些知识从别的地方拷贝过来的,但是都审查过. 引言: 1. 慢的页 ...
随机推荐
- docker images
docker images 介绍 镜像是动态的容器的静态表示,包括容器所要运行的应用代码以及运行时的配置.Docker镜像包括一个或者多个只读层(read-only layers),因此,镜像一旦被创 ...
- C# 对串口的操作
初始化 串口 SerialPort sp = new SerialPort(); sp.PortName = BasicParameters.IniReadValue(strPath, "C ...
- c++编译错误C2971:"std::array":array_size:包含非静态存储不能用作废类型参数;参见“std::array”的声明
在Qt5中这段代码编写有两种方式:一个编译成功,一个失败 成功版本: static constexpr size_t block_size = 0x2000;//8KB static constexp ...
- C++实验一
实验结论 2-28 if...else #include <iostream> #include <stdlib.h> using namespace std; int mai ...
- npm修改淘宝原
//修改之前查看一下npm config get registry https://registry.npmjs.org/ //设置源npm config set registry https://r ...
- [蓝牙前沿应用] 照明即平台 —— 通过蓝牙增强服务提高照明投资回报率(蓝牙MESH、定位AoA、AoD)
1.照明即平台(LAAP) 随着照明设施向LED转型,他们也在利用类似于蓝牙MESH的技术,创建一个可连接的照明平台,作为他们建筑的中枢神经系统.这些系统除了提供先进的照明控制,还建立了一个增强版 ...
- 【盛派周三分享-2019.2.20】开放分享内容,本期主题:《SCF、DDD及相关架构思想讨论》
“周三分享”是盛派网络约定的每周三晚上定时举办的内部分享活动,活动主要由技术人员分享各方面的技术主题,并由所有参与者围绕主题进行讨论.除技术话题外,也可能涉及到相关的设计.财税.金融.政策等方面的延伸 ...
- 使用BurpSuite进行双文件上传拿Webshell
首先进入网站后台:(后台界面应该是良精CMS) <ignore_js_op> 在 添加产品 这一栏有个上传文件: <ignore_js_op> 选择一个*.jpg格式的图片进行 ...
- FFmpeg 学习(四):FFmpeg API 介绍与通用 API 分析
一.FFmpeg 相关术语 1. 容器/文件(Container/File):即特定格式的多媒体文件,比如MP4,flv,mov等. 2. 媒体流(Stream):表示在时间轴上的一段连续的数据,比如 ...
- FFmpeg 结构体学习(二): AVStream 分析
在上文FFmpeg 结构体学习(一): AVFormatContext 分析我们学习了AVFormatContext结构体的相关内容.本文,我们将讲述一下AVStream. AVStream是存储每一 ...