首页 > 分享 > 网页性能优化与搜索引擎优化seo

网页性能优化与搜索引擎优化seo

花匠小妙招
2024-12-08 21:56

一、为什么要提升web性能？

Web性能黄金准则：只有10% ~ 20%的最终用户响应时间花在了下载html文档上，其余的80%~90%时间花在了下载页面组件上。 web性能对于用户体验有及其重要的影响，根据著名的2-5-8原则：

当用户在2秒以内得到响应，会感觉系统的响应非常快
当用户在2-5秒之内得到响应，会感觉系统的响应速度还可以
当用户在5-8秒之内得到响应，会感觉系统的响应非常慢，但还可以接受
当用户在8秒之后都没有得到响应，会感觉系统糟透了，甚至系统已经挂掉；要么打开竞争对手的网站，要么重新发起第二次请求

二、网页生成的过程

网页的生成过程，大致可以分成五步。

HTML代码转化成DOMCSS代码转化成CSSOM（CSS Object Model）结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）“生成布局”（layout），即将所有渲染树的所有节点进行平面合成将布局“绘制”（paint）在屏幕上

而前三步的都非常快，一般影响速度的是后两步。

"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。

重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。

一般的规则是：

样式表越简单，重排和重绘就越快。重排和重绘的DOM元素层级越高，成本就越高。table元素的重排和重绘成本，要高于div元素

三、优化方法:

1.减少HTTP请求在浏览器(客户端)和服务器发生通信时，就已经消耗了大量的时间，尤其是在网络情况比较糟糕的时候，这个问题尤其的突出。一个正常HTTP请求的流程简述：如在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。网速相同的条件下，下载一个100KB的图片比下载两个50KB的图片要耗费的网络资源更多。所以，请减少HTTP请求。 2.减少对DOM的操作

基本原理：对DOM操作的代价是高昂的，这在网页应用中的通常是一个性能瓶颈。

在《高性能JavaScript》中这么比喻：“把DOM看成一个岛屿，把JavaScript(ECMAScript)看成另一个岛屿，两者之间以一座收费桥连接”。所以每次访问DOM都会教一个过桥费，而访问的次数越多，交的费用也就越多。所以一般建议尽量减少过桥次数。

方法：

DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，加入一个写操作。如果某个样式是通过重排得到的，那么最好缓存结果。避免下一次用到的时候，浏览器又要重排。不要一条条地改变样式，而要通过改变class，或者csstext属性，一次性地改变样式。尽量使用离线DOM，而不是真实的网面DOM，来改变元素样式。比如，操作Document Fragment对象，完成后再把这个对象加入DOM。再比如，使用 cloneNode()
方法，在克隆的节点上进行操作，然后再用克隆的节点替换原始节点。先将元素设为display: none（需要1次重排和重绘），然后对这个节点进行100次操作，最后再恢复显示（需要1次重排和重绘）。这样一来，你就用两次重新渲染，取代了可能高达100次的重新渲染。position属性为absolute或fixed的元素，重排的开销会比较小，因为不用考虑它对其他元素的影响。只在必要的时候，才将元素的display属性为可见，因为不可见的元素不影响重排和重绘。另外，visibility : hidden的元素只对重绘有影响，不影响重排。使用虚拟DOM的脚本库，比如React等。使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染。 3.页面内部优化

关于页面内部优化主要方向：样式表放在顶部、脚本文件放在底部、避免css表达式、把脚本的样式表放在外部、移除重复脚本
　　关心性能的工程师都希望页面能否尽快的展现在用户面前，对于页面中很多内容的页面我们都希望内容能够逐步加载，为用户提供可视化回馈。而将样式表放在底部会导致浏览器阻止内容逐步呈现。为避免当页面变化时重绘页面元素，浏览器会阻塞页面呈现，直到样式表解析完毕（详细内容可以查看我的这篇博客）。所以如果将样式表放在顶部并不会减少资源的加载时间，它减少的是页面的呈现时间。
　　将样式表放在底部会阻塞页面的逐步呈现，而将script文件放在页面顶部同样会阻塞页面的逐步呈现。script元素会阻塞后续内容的解析，因为script中可以同过document.write来更改页面。解决的办法就是将script标签放在页面底部。这样既可以让内容逐步呈现，也可以提高下载的并行度。如果我们确定不需要document.write那可以为script标签加上asyn属性（Ie中要加上defer）提高并行下载度。
　　CSS表达式是ie支持的可以用来动态更改css属性的一种方式，我们不需要了解太多，她的书写方式如下，一旦在产品中发现expression关键字就要彻底消灭。

4.优化网络连接

网络连接的优化主要有三个规则：使用CDN加速、减少DNS查找、避免重定向

CDN：CDN是地理上分布的web server的集合，用于更高效地发布内容。通常基于网络远近来选择给具体用户服务的webserver。这缩短了资源的传输响应时间，有效提高web性能。

DNS用于映射主机名和IP地址，一般一次解析需要20～120毫秒。浏览器会首先根据页面的主机名进行域名解析，在有ISP返回结果之前页面不会加载任何内容，所以减少DNS查找可以有效降低等待时间。为达到更高的性能，DNS解析通常被多级别地缓存，如由ISP或局域网维护的caching
dns优化：

一个网络请求的生命周期，需要经过这么几个步骤：DNS查询，建立TCP连接，数据传输，断开连接。

DNS查询就是将域名转换成IP的过程，这个过程短的话2ms几乎无感，长则可能达到几秒钟.DNS

我们能做的是尽量减少一个页面的主机名，但要在浏览器最大并行下载数跟dns查找之间做权衡。根据雅虎的研究，最好将主机名控制在2-4个内。

重定向：将一个URL重新路由到另一个URL。重定向功能是通过301和302这两个HTTP状态码完成的，如：

HTTP/1.1 301 Moved Permanently 　　　 Location:http://example.com/newuri 　　　 Content-Type: text/html 123

- 浏览器自动重定向请求到Location指定的URL上，重定向的主要问题是降低了用户体验。

这种最耗费资源、经常发生而很容易被忽视的重定向是URL的最后缺少/，导致自动产生结尾斜线的原因是，浏览器在进行get请求是必须指定一些路径；如果没有路径它就会简单的使用文档根。缺少结尾斜线发生重定向是很多web服务器的默认行为。需要在服务器端设置方可消除。 5. 使用缓存和客户端本地存储

对于很少变化的静态资源，我们可以考虑使用缓存，并且设置一定的过期时间，可以有效的提升页面的加载速度和带宽的节约

6. 在前端框架中使用异步加载以及服务端渲染

异步加载

现在流行的使用webpack的工具构建的前端工程，可以合并我们的js和css以及image等资源，合并为一个文件，那么是不是我们减少了http请求的数量那我们网站的性能优化就更好了呢？no，可能我们网站静态资源很多，全部揉进一个js文件，那这个文件会是非常巨大的，首页资源加载的速度会非常慢，那么有什么办法可以优化呢？答案是异步加载，我们不打包所有的组件文件，将文件拆分开来，当我们使用到这个组件的时候，我们才去加载，通常我们配合webpack以及异步加载方法import(‘a.js’)

服务端渲染

客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接，如果是在服务器端完成的，然后返回给客户端，就是服务器端渲染，而如果是前端做了更多的工作完成了html的拼接，则就是客户端渲染,例如我们在react中我们可以使用renderToString将组件渲染为html.]。 7.代码优化

1. 编写代码的时候，更多的使用异步编程

同步编程会导致上面东西玩不成，下面任务也做不了我们开发的时候可以把某一个区域的模块设置为异步编程，这样只要模块之间没有必然的先后顺序，都可以独立进行加载，不会受到上面模块的堵塞影响尤其是Ajax的请求数据，我们一般都使用异步编程，最好是基于promise设计模式进行管理

2.在真实项目中，我们尽可能避免一次性循环过多数据，尤其是避免while导致的死循环

3. CSS选择器优化

尽量减少标签选择器的使用尽可能少用ID标签，多使用样式类选择器（通用性强）减少选择器前面的前缀尽量使用CSS3动画，CSS动画都开启了硬件加速

4. 避免使用CSS表达式
5. 减少页面中的冗余代码，尽可能提高方法的重复使用率：‘低耦合高内聚’
6. 尽量减少闭包的使用
7. 编写代码尽可能使用设计模式来构建体系
8. CSS中减少对滤镜的使用
9. 善于使用事件委托

8.资源合并与压缩 html,css,js文件的压缩文件合并图片格式选择及压缩

先看一下四种常用图片格式的各自特点:

jpg:有损压缩，压缩率高，靠损失图片本身的质量来减小图片体积，不支持透明png：支持透明，靠损失图片的色彩数量来减少图片的体积，浏览器兼容好webp：压缩程度更好，在ioswe bview有兼容性问题svg：矢量图，代码内嵌，相对较小，图片样式相对简单的场景gif：有损压缩，靠损失图片的色彩数量来减少图片的体积，支持透明，支持动画，适用于颜色较少的图像。

使用图片整合的方式将多张图片合成一张，来减少网站的HTTP请求数量；
缺点：若图片过大，一次加载比较慢。

9.懒加载与预加载

懒加载

图片进入可视区域之后请求资源对于电商等图片很多，页面很长的业务场景适用减少无效资源的加载并发加载的资源过多会阻塞js的加载，影响网站的正常使用

预加载

图片等静态资源在使用之前的提前请求资源使用到时能从缓存中加载，提升用户体验页面展示的依赖关系维护四、SEO seo的概念：搜索引擎优化（Search Engine Optimization）；存在的意义：为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

搜索引擎工作原理

百度蜘蛛，爬行网页链接，搜索引擎数据库。若页面由JS或者flash生成，则检索不到内容。搜索引擎的基本工作原理包括如下三个过程：抓取网页。每个独立的搜索引擎都有自己的网页抓取程序（spider）。Spider顺着网页中的超链接，连续地抓取网页。被抓取的网页被称之为网页快照。由于互联网中超链接的应用很普遍，理论上，从一定范围的网页出发，就能搜集到绝大多数的网页。处理网页。搜索引擎抓到网页后，还要做大量的预处理工作，才能提供检索服务。其中，最重要的就是提取关键词，建立索引库和索引。其他还包括去除重复网页、分词（中文）、判断网页类型、分析超链接、计算网页的重要度/丰富度等。提供检索服务。用户输入关键词进行检索，搜索引擎从索引数据库中找到匹配该关键词的网页；为了用户便于判断，除了网页标题和URL外，还会提供一段来自网页的摘要以及其他信息。优化方法

1. 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构。

通过网站的结构布局设计和网页代码优化，使前端页面既能让浏览器用户能够看懂，也能让“蜘蛛”看懂。
一般而言，建立的网站结构层次越少，越容易被“蜘蛛”抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛”便不愿意往下爬，“万一天黑迷路了怎么办”。并且根据相关调查：访客如果经过跳转3次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。

为此我们需要做到:
1.控制首页链接数量
a,网站首页是权重最高的地方，如果首页链接太少，没有“桥”，“蜘蛛”不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。
b,因此对于中小型企业网站，建议首页链接在100个以内，链接的性质可以包含页面导航、底部导航、锚文字链接等等，注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

2.扁平化的目录层次

尽量让“蜘蛛”只要跳转3次，就能到达网站内的任何一个内页。扁平化的目录结构，比如：“植物”–> “水果” -->
“苹果”、“桔子”、“香蕉”，通过3级就能找到香蕉了。

3. 导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，标签必须添加“alt”和“title”属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。其次，在每一个网页上应该加上面包屑导航，好处：从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站组织形式，从而形成更好的位置感，同时提供了返回各个页面的接口，方便用户操作；对“蜘蛛”而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

4.网站的结构布局–不可忽略的细节

页面头部：logo及主导航，以及用户的信息。页面主体：左边正文，包括面包屑导航及正文；右边放热门文章及相关文章，好处：留住访客，让访客多停留，对“蜘蛛”而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。页面底部：版权信息和友情链接。 d,特别注意：分页导航写法，推荐写法：“首页 1 2 3 4 5 6 7 8 9
下拉框”，这样“蜘蛛”能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的，“首页下一页尾页”，特别是当分页数量特别多时，“蜘蛛”需要经过很多次往下爬，才能抓取，会很累、会容易放弃。

5.控制页面的大小，减少http请求，提高网站的加载速度

一个页面最好不要超过100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛”也会离开。

参考链接：
https://www.cnblogs.com/dojo-lzz/p/4591446.html
https://juejin.im/post/5b400726f265da0f46269297
https://segmentfault.com/a/1190000016553662
https://juejin.im/post/5a9bb43c51882555894942f0
https://www.jianshu.com/p/c3b681a09d71
http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html