欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html前端优化建议

程序员文章站 2022-11-21 20:17:25
1. css 尽可能的放到head里面,且避免css表达式 【@media 类似】 2. js 尽可能的放到之前 3. 尽可能的减少图片的使用,并在实际需要使用图片的地方在css定义好img的尺寸。 ......

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 来替代,虽然这两个已经建议不要使用了。