阅读 1873

前端页面性能优化的建议汇总结

这是我参与更文挑战的第9天,活动详情查看: 更文挑战

前言🎇

学习这些知识,方便自己在优化方面扩展更多的方法。

主要内容🎨

  • 页面内容
  • 服务器
  • cookies
  • css
  • javaScript
  • 图片
  • 移动端

页面内容考虑🎏

1.减少http的请求次数

1.获取相同的资源时可以将资源合并

// 使用cssScript将背景图片合并成一个文件
//使用雪碧图,利用css选择显示图片的位置,如果图片比较小,可以采用base64编码,例如在webpack中有配置,将本地图片转换成编码
复制代码

2.减少DNS请求次数

// 维网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。通过域名,最终得到该域名对应的IP地址的过程叫做域名解析
// dns缓存 操作系统,浏览器,应用程序,ISP运营商
// DNS缓存Chrome的过期时间是1分钟
// ie 30min Firebox 1min
// 减少主机名,可以减少dns查找,但也减少并发下载,增加了响应时间
复制代码

3.减少重定向

//一般http重定向一般通过http状态码301/302,location是重定向的地址
复制代码

4.缓存Ajax请求

// 使用expires和cache-Control Http
Cache-Control
//public:所有内容都将被缓存(客户端和代理服务器都可缓存)
//private:所有内容只有客户端可以缓存,Cache-Control的默认取值
//no-cache:客户端缓存内容,但是是否使用缓存则需要经过协商缓存来验证决定
//no-store:所有内容都不会被缓存,即不使用强制缓存,也不使用协商缓存
//max-age=xxx (xxx is numeric):缓存内容将在xxx秒后失效
//from memory cache代表使用内存中的缓存,from disk cache则代表使用的是硬盘中的缓存,浏览器读取缓存的顺序为memory –> disk。
//在浏览器中,浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中,所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。
协商缓存:
//Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高,Etag是服务器响应请求时,返回当前资源文件的一个唯一标识(由服务器生成)
//If-None-Match是客户端再次发起该请求时,携带上次请求返回的唯一标识Etag值,通过此字段值告诉服务器该资源上次请求返回的唯一标识值。服务器收到该请求后,发现该请求头中含有If-None-Match,则会根据If-None-Match的字段值与该资源在服务器的Etag值做对比,一致则返回304,代表资源无更新,继续使用缓存文件;不一致则重新返回资源文件,状态码为200
//Last-Modified是服务器响应请求时,返回该资源文件在服务器最后被修改的时间
//if-Modified-Since则是客户端再次发起该请求时,携带上次请求返回的Last-Modified值,通过此字段值告诉服务器该资源上次请求返回的最后被修改时间。服务器收到该请求,发现请求头含有If-Modified-Since字段,则会根据If-Modified-Since的字段值与该资源在服务器的最后被修改时间做对比,若服务器的资源最后被修改时间大于If-Modified-Since的字段值,则重新返回资源,状态码为200;否则则返回304,代表资源无更新,可继续使用缓存文件
//强制缓存:当浏览器向服务器发起请求时,服务器会将缓存规则放入HTTP响应报文的HTTP头中和请求结果一起返回给浏览器,控制强制缓存的字段分别是Expires和Cache-Control,其中Cache-Control优先级比Expires高。
//强制缓存失效,则直接向服务器发起请求
//存在该缓存结果和缓存标识,且该结果尚未失效,强制缓存生效,直接返回该结果
//存在该缓存结果和缓存标识,但该结果已失效,强制缓存失效,则使用协商缓存
复制代码

5.延迟加载

//非页面初始加载必须的资源
//用户交互才会显示的页面
//非首屏渲染所需的数据,组件,样本,图片
//懒加载
复制代码

6.预加载

// 在浏览器空闲时提前加载将要用到的文件资源
// 无条件预先加载
// 有条件预先加载
复制代码

7.减少DOM元素数量

//document.getElementsByTagName('*').length(计算当前页面节点)
//web语义化代替更多的div
//尽量少用表格布局
//产生更多的重绘
复制代码

8.划分内容到不同域名

//极客的每一个板块用的是不同的域名,基于端口数量和线程切换开销的考虑,浏览器不可能无限量的并发请求,因此衍生出来了并发限制和HTTP/1.1的Keep alive。 所以,IE6/7在HTTP/1.1下的并发才2,但HTTP/1.0却是4。 而随着技术的发展,负载均衡和各类NoSQL的大量应用,基本已经足以应对C10K的问题。 但却并不是每个网站都懂得利用domain hash也就是多域名来加速访问。因此,新的浏览器加大了并发数的限制,但却仍控制在8以内
复制代码

9.尽量减少iframe的使用

//优点:
//可以并行下载脚本
//可加载速度较慢的的第三方资源
//缺点:
//没有语义化,不利于seo
//阻碍页面的load
//加载代价昂贵
复制代码

10.避免404错误

服务器🎏

11.使用CDN

//把一些静态资源部署到地理位置不同的服务器上,使用户快速拿到资源
//选择用来发送内容的服务器是基于网络距离衡量得到。例如:选跳数最少或者响应时间最短的服务器
复制代码

12.添加expire或Cache-control

//静态内容可以设置将来很远的时间
//动态内容选择合适的时间
复制代码

13.使用Gzip

//终端用户的带宽速度,网络服务商,对等交换点的距离
//Gzip压缩通常可以减少70%的响应大小,对某些文件更可能高达90%,比Deflate更高效。主流 Web 服务器都有相应模块,而且绝大多数浏览器支持gzip解码。所以,应该对HTML、CSS、JS、XML、JSON等文本类型的内容启用压缩。
//注意!!! 图片和 PDF 文件不要使用 gzip。它们本身已经压缩过,再使用 gzip 压缩不仅浪费 CPU 资源,而且还可能增加文件体积。
复制代码

14.配置Etag

15.Ajax请求使用GET方法

//浏览器执行XMLHttpRequest POST请求时分成两步,先发送Http Header,再发送data。而GET只使用一个TCP数据包(Http Header与data)发送数据,所以首选GET方法。
//根据HTTP规范,GET用于获取数据,POST则用于向服务器发送数据,所以Ajax请求数据时使用GET更符合规范
复制代码

16.避免图片src为空

//虽然src属性为空字符串,但浏览器仍然会向服务器发起一个HTTP请求:
//IE 向页面所在的目录发送请求;
//Safari、Chrome、Firefox向页面本身发送请求;
//Opera不执行任何操作。
//空的href属性也存在类似问题。用户点击空链接时,浏览器也会向服务器发送HTTP请求,可以通过JavaScript阻止空链接的默认的行为。
复制代码

cookies🎏

17.减少 Cookie 大小

//Cookie被用于身份认证、个性化设置等诸多用途。Cookie通过HTTP头在服务器和浏览器间来回传送,减少Cookie大小可以降低其对响应速度的影响。
//去除不必要的 Cookie;
//尽量压缩 Cookie 大小;
//注意设置 Cookie 的 domain 级别,如无必要,不要影响到 sub-domain;
//设置合适的过期时间。
复制代码

18.静态资源使用无Cookie域名

//静态资源一般无需使用Cookie,可以把它们放在使用二级域名或者专门域名的无Cookie服务器上,降低Cookie传送的造成的流量浪费,提高响应速度。
复制代码

css🎏

19.把样式表放在中

//把样式表放在<head>中可以让页面渐进渲染,尽早呈现视觉反馈,给用户加载速度很快的感觉。
//这对内容比较多的页面尤为重要,用户可以先查看已经下载渲染的内容,而不是盯着白屏等待。
//如果把样式表放在页面底部,一些浏览器为减少重绘,会在 CSS 加载完成以后才渲染页面,用户只能对着白屏干瞪眼,用户体验极差。把样式表放到文档的HEAD部分能让页面看起来加载地更快。
复制代码

20.不要使用CSS表达式

//CSS表达式可以在CSS里执行JavaScript,仅IE5-IE7支持,IE8标准模式已经废弃。 CSS表达式超出预期的频繁执行,页面滚动、鼠标移动时都会不断执行,带来很大的性能损耗。
复制代码

21.使用替代@import

对于IE某些版本,@import的行为和放在页面底部一样。所以,不要用它。
拓展 defer 与async,defer不阻止docoment渲染
复制代码

22.不要使用 filter

//AlphaImageLoader为IE5.5-IE8专有的技术,和CSS表达式一样,放进博物馆吧。IE专有的AlphaImageLoader滤镜可以用来修复IE7之前的版本中半透明PNG图片的问题。在图片加载过程中,这个滤镜会阻塞渲染,卡住浏览器,还会增加内存消耗而且是被应用到每个元素的,而不是每个图片,所以会存在一大堆问题。
复制代码

javaScript🎏

23.把脚本放在页面底部

//浏览器下载脚本时,会阻塞其他资源并行下载,即使是来自不同域名的资源。因此,最好将脚本放在底部,以提高页面加载速度。
//一些特殊场景无法将脚本放到页面底部的,可以考虑<script>的以下属性:defer 属性;HTML5 新增的async属性。
复制代码

24.使用外部JavaScript和CSS

//外部JavaScript和CSS文件可以被浏览器缓存,在不同页面间重用,也能降低页面大小。
//当然,实际中也需要考虑代码的重用程度。如果仅仅是某个页面使用到的代码,可以考虑内嵌在页面中,减少HTTP请求数。另外,可以在首页加载完成以后,预先加载子页面的资源。
复制代码

25.压缩JavaScript和CSS

//压缩代码可以移除非功能性的字符(注释、空格、空行等),减少文件大小,提高载入速度。
复制代码

26.移除重复脚本

//重复的脚本不仅产生不必要的HTTP请求,而且重复解析执行浪费时间和计算资源
复制代码

27.减少DOM操作

//缓存已经访问过的元素;
//使用DocumentFragment暂存DOM,整理好以后再插入DOM树;
//操作className,而不是多次读写style;
//避免使用JavaScript修复布局
复制代码

28.使用高效的事件处理

//减少绑定事件监听的节点,如通过事件委托;
拓展:https://www.cnblogs.com/keliguicang/p/10994548.html
//尽早处理事件,在DOMContentLoaded即可进行,不用等到load以后
复制代码

图片🎏

29.优化图片

//尝试把GIF格式转换成PNG格式,看看是否节省空间。在所有的PNG图片上运行pngcrush(或者其它PNG优化工具)
复制代码

30.优化CSS Sprite

//水平排列Sprite中的图片,垂直排列会增加图片大小;
//Spirite中把颜色较近的组合在一起可以降低颜色数,理想状况是低于256色以适用PNG8格式;
//不要在Spirite的图像中间留有较大空隙。减少空隙虽然不太影响文件大小,但可以降低用户代理把图片解压为像素图的内存消耗,对移动设备更友好。
复制代码

31.不要在HTML中缩放图片

//那么图片本身(mycat.jpg)应该是100x100px的,而不是去缩小500x500px的图片
//设置图片的宽和高,以免浏览器按照「猜」的宽高给图片保留的区域和实际宽高差异,产生重绘。
复制代码

32.使用体积小、可缓存的favicon.ico

移动端🎏

33.保证所有组件都小于25K

//这个限制是因为iPhone不能缓存大于25K的组件,注意这里指的是未压缩的大小。这就是为什么缩减内容本身也很重要,因为单纯的gzip可能不够。
复制代码

34.打包内容为分段(multipart)文档

//把各个组件打包成一个像有附件的电子邮件一样的复合文档里,可以用一个HTTP请求获取多个组件(记住一点:HTTP请求是代价高昂的)。用这种方式的时候,要先检查用户代理是否支持。
复制代码

关注作者雾灵👕

好看的css提高网页样式 🐱‍🚀 简析https协议传输的几个特点💰

《百道JS小知识点》系列(1)快速学习⛹🏻‍♂️

《百道JS小知识点》系列(2)快速学习⛹🏻‍♂️

简单实现vue的几个流程

文章分类
前端
文章标签