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

这是我参与更文挑战的第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请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持。

关注作者雾灵?

个人博客 | github-雾灵

《百道JS小知识点》系列（1）快速学习⛹?‍♂️

《百道JS小知识点》系列（2）快速学习⛹?‍♂️

简单实现vue的几个流程

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

前言?

主要内容?

页面内容考虑?

服务器?

cookies?

css?

javaScript?

图片?

移动端?

关注作者雾灵?

常见问题FAQ

掘金(雾灵) SVIP

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

前言?

主要内容?

页面内容考虑?

服务器?

cookies?

css?

javaScript?

图片?

移动端?

关注作者雾灵?

常见问题FAQ

掘金(雾灵) SVIP

相关推荐

发表评论

如需帝国cms功能定制以及二次开发请联系我们

升级SVIP会员

工作时间

请选择支付方式