web页面性能优化以及seo

web页面性能优化

前端优化的目的是什么?

• 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
• 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的源。
  优化的方式有以下几种：

一、编辑html的时候注意语义结构化

结构语义化：根据内容的结构，选择合适的标签，以便于开发者阅读和写出更优雅的代码，同时让浏览器的爬虫和机器很好地解析。
结构语义化的优点包括：

• 在页面没有css或者css还未加载出来的时候，页面也能呈现出很好的结构。
• 有利于SEO，易于被搜索引擎抓取，有利于推广。
• 方便盲人阅读器、屏幕阅读器等等设备来解析。
• 用户体验更好，例如图片的alt属性，在图片没有加载出来时给予合理的解释。
• 便于团队开发和维护。
• 遵循分离结构和表现原则。

二、 对网站的文件和资源进行优化

• 书写css和js的时候要注意代码优化，尽量重复利用
• 可以用一个大的css文件来合并多个小的css文件，浏览器在请求每一个css文件时都会发送一个http请求，在http请求带来的延迟没有结束的时候，用户都将在等待中度过。
• 如果网页中使用了大量背景图片，那么这些图片每一张都会发送一个http请求，可以使用css sprite来合并网页中的需要频繁加载的多个图片。对于合并之后的图片，我们需要注意对它图片质量和大小的优化，图片越小加载速度越快。
• css文件放置在head，js放置在文档尾部。

三、利用多个域名来存储网站资源

• 可以节约cookie带宽。
• 节约主域名的连接数，优化页面响应速度。

四、减少http请求，合理设置 HTTP缓存

http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。
缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。怎样才算合理设置 ?原则很简单，能缓存越多越好，能缓存越久越好。

• 合并css，js文件，减少css，js重复代码，合并图片等都是为了减少http请求，应为每次http请求的代价都是非常昂过的，所以减少http请求能有效优化访问性能。
• 缓存能缓存得更多，缓存得更久，也是可以大大减少http请求，就优化了访问性能。

五、使用浏览器缓存

对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。

在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。
使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。

六、启用压缩

在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。

七、图片懒加载（lazyout images）

图片懒加载一般运用到图片较多的页面，电商类的页面一般都有图片懒加载处理。
步骤：

• 将要懒加载的网页中的图片都设为同一张loading图片；
• 给图片设置data-src的属性，保存图片的真实地址；
• 当图片滚动到可视区域时，将图片src替换为真实地址。

八、CSS放在页面最上部，javascript放在页面最下面

浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。

Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了。

Lazy Load Javascript（只有在需要加载的时候加载，在一般情况下并不加载信息内容。）随着 Javascript框架的流行，越来越多的站点也使用起了框架。不过，一个框架往往包括了很多的功能实现，这些功能并不是每一个页面都需要的，如果下载了不需要的脚本则算得上是一种资源浪费 -既浪费了带宽又浪费了执行花费的时间。目前的做法大概有两种，一种是为那些流量特别大的页面专门定制一个专用的 mini版框架，另一种则是 Lazy Load。

九、减少cookie传输

一方面，cookie包含在每次请求和响应中，太大的cookie会严重影响数据传输，因此哪些数据需要写入cookie需要慎重考虑，尽量减少cookie中传输的数据量。另一方面，对于某些静态资源的访问，如CSS、script等，发送cookie没有意义，可以考虑静态资源使用独立域名访问，避免请求静态资源时发送cookie，减少cookie传输次数。

十、Javascript代码优化

js中减少DOM操作，避免使用eval和 Function，减少作用域链查找（尽量把变量设为局部变量）。

十一、CDN加速

CDN（contentdistribute network，内容分发网络）的本质仍然是一个缓存，而且将数据缓存在离用户最近的地方，使用户以最快速度获取数据。

十二、反向代理

1.传统代理服务器位于浏览器一侧，代理浏览器将http请求发送到互联网上，而反向代理服务器位于网站机房一侧，代理网站web服务器接收http请求。
2.反向代理也可以实现负载均衡的功能，而通过负载均衡构建的应用集群可以提高系统总体处理能力，进而改善网站高并发情况下的性能。

SEO（Search Engine Optimization）

SEO（Search Engine Optimization）：搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销。解决方案，让其在行业内占据领先地位，获得品牌收益；SEO包含站外SEO和站内SEO两方面；为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、用户互动传播、页面等角度进行合理规划，还会使搜索引擎中显示的网站相关信息对用户来说更具有吸引力。
通过了解各类搜索引擎抓取互联网页面、进行索引以及确定其对特定关键词搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售或宣传的效果。
搜索引擎优化

• 内部优化
  　　（1）META标签优化：例如：TITLE，KEYWORDS，DESCRIPTION等的优化；
  　　（2）内部链接的优化，包括相关性链接（Tag标签），锚文本链接，各导航链接，及图片链接；
  　　（3）网站内容更新：每天保持站内的更新(主要是文章的更新等)。
• 外部优化
  　　（1）外部链接类别：友情链接、博客、论坛、B2B、新闻、分类信、贴吧、知道、百科、站群、相关信息网等尽量保持链接的多样性；
  　　（2）外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升；
  　　（3）外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名。
  搜索引擎优化技术
  可分为两大类：白帽技术与黑帽技术。
• 白帽技术（Whitehat）：在搜索引擎优化行业中，使用正规符合搜索引擎网站质量规范的手段和方式，使网站在搜索引擎中关键词获得良好的自然排名称为白帽技术。白帽技术是较为流行的网络营销方式，主要目的是增加特定关键字的曝光率以增加网站的能见度，进而增加销售的机会。分为站外SEO和站内SEO两种。SEO的主要工作是通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页进行相关的优化，使其提高搜索引擎排名，从而提高网站访问量，最终提升网站的销售能力或宣传能力的技术。
• 黑帽技术（Blackhat）：黑帽技术是指在seo就是通过一些类似作弊的方法或技术手段，以不符合主流搜索引擎优化发行方针规定的手法来获得短时间内较好的搜索引擎优化的一种技术。黑帽SEO获利主要的特点就是短平快为了短期内的利益而采用的作弊方法，同时随时会因为搜索引擎算法的改变而面临惩罚。

• 参考：https://www.cnblogs.com/shuixiaohao/p/7873398.html
• 百度百科