前端优化技巧总结

原创 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,我就会去访问无锡的服务器,不会去优先访问北京的服务器了)

前端性能优化归纳总结篇!!!

周五,一周最后一天,应该是归纳总结、冥想思考、节奏放缓的一天。程序员的每个工作日都仿佛是在进行着战斗,看不见的硝烟弥漫在键盘和显示器之间,也有可能弥漫在手机和手指之间。作为一个前端开发工程师,性能优化...
  • grandPang
  • grandPang
  • 2016年05月11日 17:56
  • 8020

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

当今数字世界,存在着无数的网站,每天都需要处理各种不同的原因的访问。然而,这些网站中有很大一部分显得笨重,使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰,包括加载时间、不支持移动设备、浏览器...
  • VermouthDream
  • VermouthDream
  • 2017年02月11日 21:37
  • 1520

浅谈前端与SEO

SEO(Search Engine Optimization)搜索引擎优化,是为了增加页面在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为。SEO有一条不变的准则就是它永远都在变,因为...
  • u013853928
  • u013853928
  • 2016年07月19日 16:14
  • 1024

前端开发的45个经典技巧

1、首次给变量赋值是切记使用var关键字(闲谈:清楚的记得有次去面试前端,一个项目经理同时面我和另外一个人,面试官开始就是要我们俩手写一个数组去重函数,哗哗的一下写完交了,面试官看来下之后直接给了一旁...
  • u013084331
  • u013084331
  • 2016年04月01日 17:52
  • 2498

web前端性能优化总结

转自:http://www.2cto.com/kf/201604/498725.html          网站的划分一般为二:前端和后台。我们可以理解成后台是用来实现网站的功能的,比如:实现用户注...
  • ma_hoking
  • ma_hoking
  • 2016年05月21日 22:26
  • 30211

前端工程师与SEO搜索引擎优化(笔记总结)

搜索引擎优化(Search Engine Optimization,简称SEO)是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。搜索引擎工作原理当我们在搜索引擎中输入了关键字点...
  • screaming_color
  • screaming_color
  • 2016年01月11日 21:16
  • 984

web前端性能指标、测试方案、优化技巧

相对成熟的后端性能测试工具LoadRunner和开源的jmeter。前端性能一直缺乏更多的重视以及测试、优化的文档支持。这里简单介绍下前端性能的意义、关注重点、测试方案和优化技巧   1、...
  • pangzimin
  • pangzimin
  • 2015年06月29日 14:54
  • 1389

web前端页面性能优化小结

一、提倡前端开发工程师在书写xhtml的时候做到结构语义化。 结构中主要包括了head和body两个部分,但是我们经常说的是结构语义化主要是body中的标签,但是我在这里还是简单的说一下head,h...
  • melody_day
  • melody_day
  • 2016年12月09日 14:43
  • 1423

慕课网:Web前端面试题目及答案汇总

HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元...
  • dongyang0311
  • dongyang0311
  • 2016年06月29日 14:44
  • 11524

前端跳槽面试必备技巧

第1章 课程介绍 很多同学对面试不够了解,不知道如何准备,对面试环节的设置以及目的不够了解,因此成功率不高。通常情况下校招生面试的          成功率低于1%,而社招的面试成功率也低于5%,所...
  • zhangye19920611
  • zhangye19920611
  • 2017年12月12日 10:20
  • 88
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端优化技巧总结
举报原因:
原因补充:

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