前端优化技巧总结

原创 2017年01月03日 14:57:39

1.    减少HTTP请求数,减少流量

减少元素的数量,css.js.image资源压缩合并,取消空链接,预加载,懒加载,ajax尽量使用get好缓存,,合理设置缓存合理添加Expires的值ETags开启Gzip,如果有两个服务器的时候最好只开一个Gzip,不然可能会出现解不开!

2.    将外部脚本置底

先将html和CSS优先加载出来,提高用户体验,再进行js的功能加载(使用外部文件好缓存)

3.   将css放在head中

有些浏览器会在css下载完成之后才开始渲染,先加载css有时也会减少加载时间(使用外部文件好缓存)

4.   减少不必要的http跳转

如使用/最后会被补全称/index.html,进行了两次http请求

5.   代码优化

减少dom的数量,以及层级,减少dom之间的重构重绘。用JavaScript访问DOM元素是很慢的,所以应该:缓存已访问过的元素的索引

先“离线”更新节点,再把它们添到DOM树上。

6.   SEO ,Html语义化

title,Description,Keywords,h1,strong等有利于搜索引擎,h没有断层;title:只强调重点即可,重要关键词出现不要超过2次,而且要靠前,每个页面title要有所不同description:把网页内容高度概括到这里,长度要合理,不可过分堆砌关键词,每个页面description要有所不同;keywords:列举出几个重要关键词即可,也不可过分堆砌;每个页面只能出现一次H1标签,H2标签可以多次(H1权重很高,普遍认为仅次于title);图片一定要添加alt属性,title属性可选(爬虫不认识图片上的内容);图片大小声明(不声明可能会产生重构,影响加载速度,影响排名);页面内容尽量不要做成flash、图片、视频(爬虫不认识);做好404页面1、用户体验友好,可以留住用户,不至于直接关闭页面;2、蜘蛛友好,可以返回抓取其他页面;

7.    使用文件图片服务器

在相同域中http头会带的很多,特别是cookie有值的话,会全部带上,减少http流量消耗,分摊主服务器压力,最好不超过2-4个域。

8.减少DNS

     不懂,没用过,但我会抄啊(嘎嘎);

      当客户端的DNS缓存为空时,DNS查找的数量与Web页面中唯一主机名的数量相等。所以减少唯一主机名的数量就可以减少DNS查找的数量。然而减少唯一主机名的数量会潜在地减少页面中并行下载的数量,避免DNS查找降低了响应时间,但减少并行下载可能会增加响应时间。当页面的组件量比较多的时候,可以考虑将组件分别放到至少2-4个主机名,已获得最大收益。  http://www.chinaz.com/web/2015/0417/399728.shtml

9.   使用CDN(内容分发网络)

     内容分发网络(CDN)是一组分散在不同地理位置的web服务器,用来给用户更高效地发送内容,选择用来发送内容的服务器是基于网络距离的衡量标准的。例如:选跳数(hop)最少的或者响应时间最快的服务器。(举栗,我在苏州访问一个北京的服务器,恰巧隔壁的无锡有个CDN,我就会去访问无锡的服务器,不会去优先访问北京的服务器了)

相关文章推荐

前端优化:9 个技巧,提高 Web 性能

1. 清理 HTML 文档 HTML,即超文本标记语言,几乎是所有网站的支柱。HTML 为网页带来标题、子标题、列表和其它一些文档结构的格式。在最近更新的 HTML5 中,甚至可以创建图表。 ...
  • hj7jay
  • hj7jay
  • 2016年12月16日 10:03
  • 1465

前端优化之SEO技巧小谈

SEO (Search Engine Optimization) 中文大意为“搜索引擎优化”,所谓SEO是指通过对网站的结构,代码等优化以提高网站在百度,Google等搜索引擎中的排位,SEO不仅可以...

WEB前端优化技巧

对前端开发工程师来说,前端性能优化的重要性是不言而喻的,在我的理解中,性能优化不纯粹是指用户访问网站的速度,也包括减缓后台服务器的压力,这里我总结下我理解中的WEB前端性能优化的几个规则。...

seo教程:网站前端图片优化技巧。

seo教程:网站前端图片优化技巧。   网站前端图片优化是seo优化人员必须掌握的,对于图片站运营优化人员来讲更需重点掌握。seo教程自学网建议:掌握网站前端图片优化技巧,夯实基础优化技能,本文...

前端优化:九个技巧,提高Web性能

转自:http://www.smartcitychina.cn/QianYanJiShu/2017-02/8141.html?ref=myread 前端优化:九个技巧,提高Web性能 ...

前端页面优化技巧

前端页面优化;网站加载速度提升技巧;增加用户体验度的实用小技巧;

"爱说说"技术原理:前端Javascript优化技巧(四)

上一节:爱说说技术原理:前后台参数约定及逻辑代码 中,讲解了“爱说说”的后台简单的逻辑处理代码。 本节,看一下前端的逻辑及优化事项[爱说说:http://speak.cyqdata.com/ ] ...

理论:前端开发人员SEO优化技巧(未完待续)

引言:虽然有专门的SEO职位,但越来越多的公司对于前端人员要求了解甚至精通SEO优化方面的技巧,为了更好的完成工作上的任务,也为了提升自己代码的质量,进行一些SEO优化技巧总结是可行的。理解:对于SE...
  • TuboPe
  • TuboPe
  • 2016年12月26日 15:43
  • 174

webApp前端开发技巧总结

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备。 我相信各位童鞋应该和我一个样...

前端JS使用的技巧总结【持续更新】

17、避免使用eval或者Function构建器 使用eval或者function构建器是一件非常消耗资源的操作,因为每次调用script引擎都必须将源代码转换为可执行的代码 var func1 =...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端优化技巧总结
举报原因:
原因补充:

(最多只允许输入30个字)