网站性能优化

在此之前先谈谈为什么要对网站进行优化

我认为有两个主要的方面

一: 为了提高用户的浏览体验,我想没有一个用户在访问网站时等个几秒钟后,网站页面还为加载出来,此时对网站的优化是优化性能,优化交互,使用户喜欢上这个网站,使网站变得更加的友好.

二:为了提升网站的排名,做一个网站最大的目的是为了展示信息,那么如何更好的展示信息呢,这里就需要对网站进行搜索引擎优化(SEO),通过优化提升浏览器在搜索引擎中的排名,使自己的网站优先展示.

接下来说一下怎么对网站进行性能优化

进行性能优化无非是为了提高浏览器的加载速度和渲染速度.

性能优化主要包括两个方面:

1. 网络请求优化
   • 减少HTTP请求:在加载时可以先确定加载的顺序,这个是非常重要的,通过加载顺序可以判断出哪些请求是可以优先加载,哪些请求可以在页面渲染后加载,以此来提升用户体验,减少HTTP加载时间
   • 减小cookie的体积:cookie内有关的信息是放在HTTP请求头中在服务器和浏览器之间交流,保存的cookie越大,请求完成的时间越长,所以通过减小cookie的体积可以来减小用户的响应时间也显得很必要.
   • 使用CDN和DNS:CDN为内容分发网络,主要解决的是如何将数据快速可靠的发给用户,通过CDN的分发,用户可以从较优的服务器获取资源而无需从源站获取,从而达到快速访问,DNS为域名系统,是互联网的一项服务,减少用户的等待时间，提升用户体验(具体有关CDN和DNS的优化可以浏览前端项目性能分析之聊聊DNS和CDN缓存)
2. 静态资源加载优化
   • 将样式放在顶部,JS放在页面底部:用户在进入一个网页是首先看到是内容,浏览器在渲染时会将所有css下载完之后才对页面进行渲染,将样式放在头部可以加快浏览器渲染速度,而将脚本放在底部是为了优先渲染内容,其次再渲染交互
   • 少使用css表达式,虽然css表达式带来了很多方便,但是同时当css表达式计算次数会对性能有所损耗
   • 在html引入css时使用link不使用@import:link是html方式,@import是css方式,link最大限度支持并行下载,@import过多嵌套会导致串行下载,出现文档样式短暂失效,影响用户的体验
   • 图片的优化:图片的加载也会影响浏览器的渲染,我们可以使用精灵图来一次性加载多张图片通过减少http请求来提高渲染速度,当图片较小时可以使用base64格式来加载图片,而当图片较大时可以对图片进行压缩,也可以根据可视区的判断选择对图片进行懒加载
   • 对代码进行打包,减少代码体积

最后来说一下搜索引擎优化

做搜索引擎优化的目的主要是为了提高网站权重,增加流量,改善体验

1. 合理的title,description,keywords:通过对标题描述关键词的设置可以更好地让蜘蛛更好的抓取.
2. 语义化:代码要符合w3c规范,可以使搜索引擎更加容易的理解网页
3. 扁平化目录结构:网站的结构层次越少越容易被蜘蛛抓去,从而被收录,可以通过优化目录结构来进行搜索引擎优化
4. 少用iframe:搜索引擎不会抓取iframe里的内容
5. …

对网站优化的记录先到这里,日后随着知识的增长会不断补充…

了解更多，请移步我的个人博客 Plumli
参考链接:https://www.cnblogs.com/Strugglinggirl/p/11011473.html