优化网站速度

本周末连续两天向大家介绍了面向对象编程的主要特点封装和继承，如果你期待今天继续介绍多态这一特点，也许你会失望的，今天不是多态，而是教你如何优化网页加载速度，我就是这样不按规则出牌，哈哈。周末住在家里，刷了很多网页，发现很多网站都没有优化加载速度。有时候打开一个网页要等10秒才能加载完成。虽然网页内容很好，但是给我的第一印象是慢，受不了！其实有很多简单粗暴有效的优化方法。我觉得有必要和产品经理分享，让你督促开发哥哥优化，提高网页的加载体验。首先，我们来看看网页的加载过程。打开一个网页，你会先拉一个html页面，然后浏览器分析这个html页面，你会根据页面的内容拉javascript、css、图片文件，最后根据这些文件渲染页面。照片。我们可以看到，影响网页显示速度的主要因素不是网页本身，而是一些其他文件。如果优化了这些资源的加载速度，网页显示的速度就会提高。简单粗暴的方法的方法？让我一一列举:优化图片资源的格式和尺寸。在一个网页中，图片资源的大小占比最大，单个文件的大小也相当可观。所以在保证图片质量不变的情况下，尽量使用高压缩图片格式，图片格式可以根据这个优先级选择webp>jpeg>png>bmp。同时要根据图片显示的大小抽取最匹配的图片资源，不要没事就把原图拉下来使用。之前遇到过这样的情况。一张196*196大小区展示的图片，其文件达到几兆，最后发现原图1960*1960分辨率。打开网络压缩。当大多数浏览器发出请求时，它会标记Accept-Encoding:gzip,deflate，这意味着该浏览器可以通过gzip压缩传输数据，如果您的网页服务器也支持gzip压缩数据，那么当数据通过gzip传输时，流量将减少70~80%。照片。使用浏览器缓存。同一网站下的不同页面，往往会重复使用部分资源文件，如果将这些资源文件设置为可缓存的，则在刷新或跳转到另一页时，不再需要从网络中提取相关资源，从而大大加快了网页的加载速度。降低重定向要求。有些网站为不同的终端制作了不同的页面，比如在手机上访问微博，会从weibo.com重定向到weibo.cn，每次重定向都会导致浏览器重新启动请求，延长加载时间。在这种情况下，应尽可能采用响应设计，一个weibo.com网站覆盖所有终端。用CDN存储静态资源。CDN是一种静态内容分发网络。它在每个省甚至每个城市都部署了自己的服务器来分发这些静态内容，所以当一个城市的用户想要提取某个资源时，他会优先从当地的CDN服务器中提取，这样可以保证他最快的获取资源。据砖家统计，70%的网络资源是静态资源。也就是说，70%的内容产生后不会改变，所以把它们都放在CDN上，可以提高70%的资源下载速度。降低DNS查询次数。许多人喜欢将不同的图片挂在不同的域名下面，比如图片A挂在a.pm-teacher.com上，图片B挂在b.pm-teacher.com上。当一个网页同时使用图片A和图片B时，浏览器需要查询两个域名。要知道，每次分析域名都会浪费时间，所以尽量把所有的图片放在一个域名下面。照片。压缩css和js内容。此处所说的压缩和第二点并不重复，上面提到的压缩是不改变文件内容的压缩。而且css和js中有大量的空格和变量命名(例如hello="helloword"；)，如果去除这些空格，并用简单的字母替换变量名(例如a="helloword"；)，这些css和js原始文件的大小也会减小，这也有助于加快拉取速度。不知您是否看到，上面提到的优化方案的核心有三点：减少请求数量，减少资源大小，寻找最快的服务器。假如您是一家网站的产品经理，赶紧去找您的开发，确认您是否做过类似的优化。