高性能网站建设——前端优化

墨蓝 2022-04-18 00:10 283阅读 0赞

> 主要参考《高性能网站建设指南》这本书

**漫谈前端优化**

参考文章：[http://www.cnblogs.com/xuechenlei/p/5888060.html][http_www.cnblogs.com_xuechenlei_p_5888060.html]

**1.引用资源部分优化：**

1.  合并引用的CSS、JavaScript，并使用压缩模式；
2.  合并页面引用的小图标，也就是合成一张图片，引用背景图片定位，俗称雪碧图；
3.  使用按需加载，scroll加载的处理方式；
4.  服务器GZIP处理资源，这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来，一般对纯文本内容可压缩到原大小的40%。
5.  异步加载资源，和document构建不相冲突，defer、async的设置；
6.  减少http请求，全局使用，缓存一切可缓存的资源文件；
7.  外联式引用资源，主要式为了页面缓存考虑；
8.  资源文件放在同一个服务器，避免调用第三方资源。
9.  dns-prefetch，把这个放这里不知道合适不合适，这个应该算是http请求方面的优化，不知道什么是dns-prefetch是什么的自行谷歌之，俗名叫dns预获取，主要作用是减少请求次数和提前对dns预获取(废话)，什么意思那，[简单的说你的站点域名是x.com][x.com]，而你网站上一些的图片等资源是放在img.x.com上，每次请求会涉及到dns解析问题，对于性能要求极致的站点这个处理就必不可少，在head中加入就能达到上述的效果，需要注意，虽然dns-prefetch能够加快网页解析速度，但是也不能随便滥用，因为多页面重复DNS预解析会增加重复DNS查询的次数；

**2.CSS&JavaScript内容优化：**

1.  CSS引用写在头部，JavaScript引用写在底部、使用异步加载，避免渲染等待；
2.  避免在页面标签中写样式；
3.  不过度引用字体，字体大小的问题；
4.  值为0的时候不用单位；
5.  使用标准的浏览器前缀，或者使用类似scss中的@include的写法，定义详细再引用；
6.  不滥用页面浮动；
7.  避免复杂dom 循环操作；
8.  id的工作效率比class高，但我个人不喜欢写很多id(dom多了不爽)，看情况操作；
9.  使用事件代理代替绑定事件；

**3.DOM渲染优化：**

1.  使用简洁的html标签结构，避免复杂嵌套；
2.  使用css3书写动画，减少jsdom操作；
3.  适当使用svg、canvas；
4.  避免最下级元素书写页面class

**4.图片优化：**

插一句，web图片优化应该是优化中的重头戏，内容型、展示型的站点图片规模很大，也许1%的优化作用就可以和其他的优化方式相媲美；

1.  使用css、svg、fonticon代替图片；
2.  压缩图片，重中之重，就图片本身格式而言，png8大于gif，常用png和jpg，而压缩方面有各种工具，比如gulp(个人多次实测压缩比率达20%左右，这个也可能和图片多少、格式有关系)、TinyPNG(熊猫站，性能比较高的，不便的是国外的，上传下载太麻烦了，使用它们给的开发者接口，个人实测跟gulp差不多，比不上网站上的压缩，所以意义不大，而且限制次数），其实一般站点的图片处理会有服务器上专门的配置服务做这些事情的，比如用户上传一张1MB的用户头像，服务器会处理成两张，一张小图供头像图标引用，一张原尺寸的，但体积都会小很多，供站点引用。
3.  使用webp图片，不知道webp是啥的自行google之，是未来天网前身的美帝google公司，开创的一种图片格式，性能我只能说我服，不便的是不是所有浏览器都支持这种高科技…
4.  避免使用DataUrl，也即俗称的base64引用，这种方式没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。

**高性能网站建设指南**

1.减少HTTP请求

2.使用内容发布网络（CDN）

3.添加Expires头

4.压缩组件

5.将样式表放在顶部

6.将脚本放在底部

7.避免CSS表达式

8.使用外部JavaScript和CSS

9.减少DNS查找

10.精简JavaScript

11.避免重定向

12.删除重复脚本

13.配置ETag

14.使用Ajax可缓存

详情可以参考书籍《高性能网站建设指南》。

下面两个链接是这本书的笔记：

[https://blog.csdn.net/an1090239782/article/details/78166983\#图片地图][https_blog.csdn.net_an1090239782_article_details_78166983]

[http://www.cnblogs.com/MarcoHan/p/5295398.html][http_www.cnblogs.com_MarcoHan_p_5295398.html]

《高性能网站建设指南》官方实例demo：[http://stevesouders.com/examples/rules.php][http_stevesouders.com_examples_rules.php]

[http_www.cnblogs.com_xuechenlei_p_5888060.html]: http://www.cnblogs.com/xuechenlei/p/5888060.html
[x.com]: http://xn--x-376ao0kcvay3lf2zs1q6skba402imxbg88g.com
[https_blog.csdn.net_an1090239782_article_details_78166983]: https://blog.csdn.net/an1090239782/article/details/78166983#%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9B%BE
[http_www.cnblogs.com_MarcoHan_p_5295398.html]: http://www.cnblogs.com/MarcoHan/p/5295398.html
[http_stevesouders.com_examples_rules.php]: http://stevesouders.com/examples/rules.php