一, 为什么 web 性能如此重要?
真的非常重要!
响应更快的网站会带给用户更好的体验, 理论上讲, 好的体验等于好的用户满意度. 更快, 也意味着用户在放弃之前, 有希望更快的访问到你的网站.
放弃的原因有很多: 页面加载时间太长, 用户失去了兴趣, 浏览器崩溃等等. 提高性能可以降低放弃率, 会给网站了带来显著的效益.
二, Web 性能影响因素
image
运行时的性能是指 Web 应用程序运行时对于用户输入的响应速度, 比如点击删除图片等.
运行时的性能受很多因素影响:
从完成特定功能所采用的算法效率到优化方法;
从解释器和浏览器渲染引擎的优化或不足到有效内存管理和 CPU 使用率;
再到设计时间同步和异步操作之间的选择, 都会对性能产生影响.
image
三, 性能优化小技巧
运行时的性能是一个比较主观的感觉. 今天就从三个角度分享一下小编的性能优化小技巧.
角度一: 当我们在浏览器的地址栏输入一个 URL, 就开启了一个新的网络线程, DNS 解析, TCP 连接和 HTTP 请求和响应, 不可避免地依赖网络环境, 受到网络延迟, 网络不稳定等因素影响. 我们能做的只有尽可能减少网络请求, 以减少网络线程产生的网络消耗.
角度二: 浏览器也有部分原因, 主流浏览器有 IE,Chrome,Safari,Firefox,Opera 等, 不同的浏览器的 JS 引擎性能不同, 带给用户的体验也不同, 比如 IE8 及以下的内核表现不好是众所周知的.
角度三: 除去网络, 浏览器等外围因素, 影响 Web 性能的主要还是页面本身. 作为开发人员, 性能优化可以控制的部分就是页面, 包括页面大小, 页面结构, JS,CSS 等等.
针对以上 3 点页面加载过程所涉及到的因素, 下面做简单讨论和优化的办法介绍~
image
1. 减少 HTTP 请求数:
1) 资源大小很重要, 不仅仅关系到下载时间, 还因为 IPv4 和 IPv6 协议规定一个 IP 包的最大值为 65535 字节. 一个 IP 包是一次请求, 于是可以得到一个等式:
[图片上传中...(image-49da38-1555081524319-4)]
根据这个公式, 我们可以控制资源尽可能小. 可以采取使用 gulp 等自动化构建工具进行自动合并 JS 文件, 压缩文件和图片等手段.
避免重定向: 重定向说明需要客户端采取进一步操作才能完成请求, 请求时间就会延长. 所以输入 URL 时应使用最完整的, 最直接的地址, 比如输入 www.baidu.com 而不是 baidu.com.
使用缓存机制: 主要有数据库缓存, 服务端缓存 (反向代理和 CDN 缓存), 浏览器缓存.
image
2. 图片懒加载
页面图片很多的, 可以使用懒加载. 只加载第一屏的图片, 当用户滚动访问后面的内容时再加载相应图片. 方法是先用一张极小的占位图代替图片, 占位图只下载一次, 将原本图片的 src 存储在另一个属性中, 判断当图片快进入可视区域就将路径赋值给 src 并下载图片进行展示. 下面是简单的例子:
image
3. 代码优化
1) 页面结构: CSS 放在 html 内容上部, JavaScript 放在 HTML 内容下部. 可以使用 preload 提前解析资源的 DNS.
由于浏览器是自上而下读取内容的, 因此放置资源的位置会影响网站的访问速度. 比如, 如果将 script 标签放在 HTML 内容的前边, 浏览器就会先调用 JavaScript 解释器对 JS 进行解析, 完成之后才会渲染其余的 HTML 内容, 对用户来说, 能看到的是 HTML 的内容, 所以这么做会导致页面可用性的延迟.
另外, CSS 是对页面节点进行修饰的, 如果 CSSOM 未构建之前就进行了布局, 等到 CSSOM 构建出来, 如果 CSS 修改了节点的布局, 就会发生重排, 需要重新计算布局并绘制.
image
JavaScript 优化: 比如减少对 DOM 的操作, 减少重排和重绘, 减少作用域链查找, 慎用 eval 函数等等. JS 代码和 (下面的)CSS 的优化主要要求前端开发人员对页面渲染原理有清晰的了解, 对基础知识的掌握和良好的编程习惯.
CSS 优化: 比如减少使用通配符'*', 提取公用样式增强可复用性, 选择器准确可减少匹配时间, 适度使用内联样式.
image
如果您对这个文章有任何异议, 那么请在文章评论处写上你的评论.
如果您觉得这个文章有意思, 那么请分享并转发, 或者也可以关注一下表示您对我们文章的认可与鼓励.
来源: http://www.jianshu.com/p/2b2d8097e1c9