浅谈前端性能优化(PC版)
前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多了写不过来+主要是懒得写)。这里PC端和移动端分开说了,业务场景不同,需要考虑各自的优化手段
目前来看,前端优化的策略有很多,主要包括网络加载,页面渲染,CSS优化,JS执行优化,缓存,图片,协议几大类。这一篇先讲PC端的优化策略
网络加载
1. 减少HTTP请求次数
建议尽可能的根据需要去合并静态资源图片、JavaScript代码和CSS文件,减少页面请求数,这样可以缩短页面首次访问的等待时间,另外也要尽量的避免重复资源,防止增加多余的请求
2. 减少HTTP请求大小
除了减少请求资源数,也要减少每个http请求的大小。比如减少没必要的图片,JS,CSS以及HTML等,对文件进行压缩优化,开启GZIP压缩传输内容,缩短网络传输等待延迟
3. 将CSS和JS放到外部文件中,避免使用style和script标签引入
在HTML文件中引入外部的资源可以有效利用浏览器的静态资源缓存。有时候在移动端对请求数比较在意的会为了减少请求把CSS和JS文件直接写到HTML里边,具体根据CSS和JS文件大小和业务场景来分析。如果CSS和JS文件内容较多,逻辑比较复杂,建议放到外部引入
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
4. 避免页面中空的href和src
当link标签的href属性为空,或者script、img、iframe标签的src属性为空的时候,浏览器在渲染的过程中还是会把href和src的空内容进行加载,直到加载失败。这样就阻塞了页面中其他资源的下载进程,并且最后加载的内容是无效的,因此要尽量避免。
<!-- 不推荐 -->
<img src="" alt="占位图"/>
5. 为HTML指定Cache-Control或者Expires
为HTML指定Cache-Control或者Expires可以将HTML内容缓存起来,避免频繁向服务器发送请求。在页面Cache-Control或Expires头部又消失,浏览器会直接从缓存读取内容,不向服务器发送请求
<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="expires" content="Wed, 20 Jun 2017 22:33:00 GMT">
6. 合理设置Etag和Last-Modified
对于未修改的文件,静态资源服务器会向浏览器端返回304,让浏览器从缓存中读取文件,减少下载的带宽消耗并能减少服务器的负载
<meta http-equiv="last-modified" content="Mon, 03 Jan 2017 17:45:57 GMT">
7. 减少页面重定向
一次重定向大概600毫秒的时间开销,为了保证用户能尽快看到页面内容,尽量避免页面的重定向
8. 静态资源不同域名存放
浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的,因此可以理由多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数。
9. 使用静态资源CDN来存储文件
详情搜索CDN空间
10. 使用CDN Combo下载传输内容
CDN的combo技术能把多个资源文件合并引用,减少请求次数。这样可以减少浏览器HTTP请求数,加快资源下载速度。比如淘宝的写法:
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/??sm.min.css,sm-extend.min.css">
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/??sm.min.js,sm-extend.min.js' charset='utf-8'></script>
参考: http://www.cnblogs.com/zhengyun_ustc/archive/2012/07/18/combo.html
11. 使用可缓存的AJAX
对于内容相同的请求,有时候没必要每次都从服务器拉取,合理的使用ajax缓存能加快ajax响应速度并减少服务器的压力
$.ajax({
url : url,
dataType : "json",
cache: true,
success: function(data){ // to do something... }
});
12. 使用get请求
POST请求会首先发送文件头,然后发送HTTP正文的数据。而使用GET只发送头部,所以在拉取数据时使用GET请求效率更高
13. 减少Cookie的大小并进行Cookie隔离
HTTP请求默认是会带上浏览器端的Cookie一起发送给服务器端的,所以在非必要的情况下要尽量减少Cookie。对于静态的资源,尽量使用不同的域名存放,因为Cookie默认也是不能跨域的,这就做到了不同域名下静态资源请求的Cookie隔离
14. 减少favicon.ico 并缓存
一般一个web应用的favicon.ico是很少改变的,。有利于favicon.ico的重复加载
15. 异步的加载JavaScript资源
异步的JavaScript资源不会阻塞文档解析,所以浏览器会优先渲染页面,延迟加载脚本执行。
<script src="main.js" defer></script>
<script src="main.js" async></script>
16. 消除阻塞页面的CSS和JS
对于页面中加载时间过长的CSS或JS文件,需要进行合理的拆分或者延后加载,保证关键的资源能快速加载完成
17. 避免使用CSS import 引用加载CSS
18. 使用prefetch来完成网站预加载
让浏览器预先加载用户访问当前页后极有可能访问的其他资源(页面,图片,视频等),从而让用户有更好的体验
19. 按需加载
这个跟第二条差不多,特别做单页应用的时候要注意(移动端部分会着重说明)
页面渲染类
1. 把CSS资源引用放到HTML文件顶部
这样浏览器可以优先下载CSS并尽快完成页面渲染
2. JavaScript文件引用放到HTML文件底部
可以防止JavaScript的加载和解析执行对页面渲染造成阻塞。由于JavaScript资源默认是解析阻塞的,除非被标记为异步或者通过其他的方式异步加载,否则会阻塞HTML DOM解析和CSS渲染过程
3. 不要在HTML中直接缩放图片
在HTML中直接缩放图片会导致页面内容的重排重绘,此时可能会使页面中的其他操作产生卡顿,因此要尽量减少在页面中直接进行图片缩放
4. 减少DOM元素数量和深度
HTML中标签元素约的,标签的层级越深,浏览器解析DOM并绘制到浏览器中说花的时间就越长。
5. 尽量避免使用table、iframe等慢元素
<table>内容的渲染是讲table的DOM渲染树全部生成完并一次性绘制到页面上,所以在长表格渲染时很耗性能,应该尽量避免使用,可以考虑用ul代替。尽量使用异步的方式动态的加载iframe,因为iframe内资源的下载进程会阻塞父页面静态资源的下载以及HTML DOM的解析
6. 避免运行耗时的JavaScript
长时间运行的JavaScript会阻塞浏览器构建DOM树、DOM渲染树、渲染页面。所以任何与页面初次渲染无关的逻辑功能都应该延迟加载执行,这和JavaScript资源的异步加载思路一致
7. 避免使用CSS表达式和CSS滤镜
CSS表达式和滤镜的解析渲染速度是很慢的,再有其他解决方案的情况下应该尽量避免使用
// 不推荐
.opacity{
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false)
}
至此,PC部分的性能优化点介绍完了。有一些没有讲到的诸如DNS预解析,离线缓存,HTTP2协议,GPU加速等,想着移动端的优化更细,这些内容放到移动端再讲会好一点。因为PC端由于兼容性的问题,很多的优化策略也不能很好的向下降级。尽管列举了很多,但还有少部分遗漏的,欢迎大家补充。前端优化不是一件简简单单的事情,其涉及的内容很多,大家可以根据实际情况将这些方法应用到自己的项目当中去。
作者:_CatBone
链接:http://www.jianshu.com/p/ead7dab72cd6
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
浅谈前端性能优化(PC版)的更多相关文章
- 浅谈前端性能优化(二)——对HTTP传输进行压缩
1.前端性能优化的一点: 对js.css.图片等进行压缩,尽可能减小文件的大小,减少文件下载的时间,从而减少网页响应的时间. 2.前端性能优化的另一点: 对HTTP传输进行压缩,即在js,css.图片 ...
- 浅谈Oracle 性能优化
基于大型Oracle数据库应用开发已有6个年头了,经历了从最初零数据演变到目前上亿级的数据存储.在这个经历中,遇到各种各样的性能问题及各种性能优化. 在这里主要给大家分享一下数据库性能优化的一些方法和 ...
- 开发高性能的MongoDB应用—浅谈MongoDB性能优化(转)
出处:http://www.cnblogs.com/mokafamily/p/4102829.html 性能与用户量 “如何能让软件拥有更高的性能?”,我想这是一个大部分开发者都思考过的问题.性能往往 ...
- 开发高性能的MongoDB应用—浅谈MongoDB性能优化
关联文章索引: 大数据时代的数据存储,非关系型数据库MongoDB 性能与用户量 “如何能让软件拥有更高的性能?”,我想这是一个大部分开发者都思考过的问题.性能往往决定了一个软件的质量,如果你开发的是 ...
- AJPFX浅谈Java性能优化之finalize 函数
★finalize 函数的调用机制 俺经常啰嗦:“了解本质机制的重要性”.所以今天也得先谈谈 finalize 函数的调用机制.在聊之前,先声明一下:Java虚拟机规范,并没有硬性规定垃圾回收该不该搞 ...
- 浅谈vue性能优化
基础优化 所谓的基础优化是任何 web 项目都要做的,并且是问题的根源.HTML,CSS,JS 是第一步要优化的点 分别对应到 .vue 文件内的,<template>,<style ...
- AJPFX浅谈Java 性能优化之字符串过滤实战
★一个简单的需求 首先描述一下需求:给定一个 String 对象,过滤掉除了数字(字符'0'到'9')以外的其它字符.要求时间开销尽可能小.过滤函数的原型如下: String filter(Strin ...
- AJPFX浅谈Java 性能优化之垃圾回收(GC)
★JVM 的内存空间 在 Java 虚拟机规范中,提及了如下几种类型的内存空间: ◇栈内存(Stack):每个线程私有的.◇堆内存(Heap):所有线程公用的.◇方法区(Method Area):有点 ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
随机推荐
- batch-normalization为什么效果好
batch-normalization为什么效果好 深度学习中 Batch Normalization为什么效果好? - 龙鹏-言有三的回答 - 知乎 https://www.zhihu.com/qu ...
- python3.7 装饰器
#!/usr/bin/env python __author__ = "lrtao2010" #python3.7 装饰器 #装饰器 ''' 定义:本质就是一个函数,作用是为其他函 ...
- (原创)task和function语法的使用讨论(Verilog,CPLD/FPGA)
1. Abstract function和task语句的功能有很多的相似之处,在需要有多个相同的电路生成时,可以考虑使用它们来实现.因为个人使用它们比较少,所以对它们没有进行更深的了解,现在时间比较充 ...
- Diycode开源项目 磁盘图片缓存+自定义webViewClient+图片点击js方法
1.磁盘图片缓存器DiskImageCache 1.1.这个类很多情况都可能用的到,耦合性很低,所以分开讲. 源代码: /* * Copyright 2017 GcsSloop * * License ...
- SQL 语句执行后同步返回结果条数
PgSQL SELECT COUNT(*) OVER() AS res_count FROM table WHERE ... MySQL mysql> SELECT SQL_CALC_FOUND ...
- Java实现对cookie的增删改查
原文地址:http://blog.csdn.net/k21325/article/details/54377830 @RequestMapping(value="meeting/addGua ...
- 小谈Bing桌面、Bing助手的现状与发展
Teamwork中我的工作,既然写了就直接放上来吧. 一.Bing搜索的相关背景 第一,必应搜索前几年的发展重点在于欧美市场,并且取得了一定的成效:根据 Hitwise 的统计数据,Bing 在 20 ...
- 谈谈Python中元类Metaclass(二):ORM实践
什么是ORM? ORM的英文全称是“Object Relational Mapping”,即对象-关系映射,从字面上直接理解,就是把“关系”给“对象”化. 对应到数据库,我们知道关系数据库(例如Mys ...
- 使用CoreLocation进行定位(Swift版)
在应用开发中,很多情况需要我们获取到当前的位置和高度信息,方便搜索周边,查看周边相同应用等,一切与定位有关的都得使用CoreLocation库,而且,系统是不允许第三发定位的,当然可以使用第三方对其封 ...
- Unity3D 绘制扇形/环形
using UnityEngine; using System.Collections; using System.Collections.Generic; public class Cone : M ...