摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。
浅谈网站性能之前端性能优化最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下内容仅为个人理解，如果本内容大家觉得哪里写的不对，望大家指出，供一起讨论。
性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。
前端性能优化
减少 HTTP 请求数量
基本原理：在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。
CSS Sprites：国内俗称 CSS 精灵，这是将多张图片合并成一张图片达到减少 HTTP 请求的一种解决方案，可以通过 CSS background 属性来访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量（由命名多张图片文件变成一张，哈哈哈）。
合并 CSS 和 JS 文件：现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个 CSS 或者 多个 JS 合并成一个文件。
采用 lazyLoad：俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。
控制资源文件加载优先级
基本原理：说到这里就需要知道浏览器加载 HTML 内容的原理，浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。
遵循原则：主要文件放在 head 内部，次要文件放在 body 底部。一般情况下都是 CSS 在头部，JS 在底部。
利用浏览器缓存
基本原理：浏览器缓存分强缓存和协商缓存，他们是将网络资源存储在本地，等待下次请求该资源时，如果命中就不需要到服务器重新请求该资源，直接在本地读取该资源。
强缓存：在 web 服务器返回的响应中添加 Expires 和 Cache-Control Header。
协商缓存：通过【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】这两对 Header 分别管理。
使用 CDN
基本原理：CDN的全称是Content Delivery Network，即内容分发网络。
减少重排（Reflow）
基本原理：重排是 DOM 的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的 visibility 属性，这也是 Reflow 低效的原因。如果 Reflow 的过于频繁，CPU 使用率就会急剧上升。
减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。
减少 DOM 操作
图标使用 IconFont 替换
花絮在开始提笔写这篇博客前就遇到了一个很棘手的问题，这篇博客标题叫什么，思考了一会，我心里冒出了三个答案：
浅谈网站性能优化
第一个标题网站性能优化，一看标题可以理解为是讲网站性能，而且是对网站进行优化，描述的是一种解决方案，然而网站性能包括的太多了，超出了我的知识范畴，所以放弃。
浅谈网站性能之前端性能优化
第二个标题正适我怀，答题概括了我本期博客内容，既有性能介绍，又有前端性能优化解决方案。
浅谈前端性能优化
第三个标题前端性能优化，心想这不就是我要写的内容嘛，等我写完内容发现，不对，我写的内容不仅仅是解决方案，好包括的其他内容，所以放弃。
以上内容仅为个人理解，如果本内容大家觉得哪里写的不对，望大家指出，供一起讨论，点击此处更多文章。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50082.html
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：毫无疑问，作为近两年前端三大流行框架之一，正成为程序员们最喜爱的框架。自年月开源至今，已有千万网站使用来进行前端构架，使之成为最受欢迎的项目之一。经过这几年的沉淀，越来越强大，暂不提这几年在国内与之间的矛盾，这其中还有很大谈判空间。 showImg(https://segmentfault.com/img/bV0dY9?w=469&h=240); React在国外已被各个公司的各种产品...
摘要：就鹿晗宣布恋情导致微博宕机事件浅谈大型网站高可用性架构中午吃饭刷着刷着微博发现微博突然挂了。用户在使用浏览器访问一个网站时需要先通过协议向服务器发送请求，之后服务器返回文件与响应信息。 webpack：从入门到真实项目配置 自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主...
摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注 一、背景 书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...
阅读 3076·2021-10-13 09:40
阅读 3902·2021-09-22 15:51
阅读 1470·2021-09-22 15:48
阅读 1035·2021-09-06 15:00
阅读 1777·2019-08-30 15:43
阅读 2339·2019-08-29 18:35
阅读 1636·2019-08-29 16:18
阅读 3579·2019-08-29 12:49
