页面性能优化的五种办法
前言
大部分用户希望网页能在 2 秒之内就完成加载。事实上,加载时间每多 1 秒,你就会流失 7% 的用户。如果加载需要太长时间,他们就会放弃访问。
以下是我总结性能优化常见的办法:
一、资源压缩与合并
主要包括这些方面:html 压缩、css 压缩、js 的压缩和混乱和文件合并。 资源压缩可以从文件中去掉多余的字符,比如回车、空格。
1.html 压缩
html代码压缩就是压缩这些在文本文件中有意义,但是在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩。
如何进行html压缩:
使用在线网站进行压缩(开发过程中一般不用)
nodejs 提供了 html-minifier 工具
后端模板引擎渲染压缩
2.css 代码压缩:
css 代码压缩简单来说就是无效代码删除和 css 语义合并
如何进行 css 压缩:
使用在线网站进行压缩(开发过程中一般不用)
使用 html-minifier 工具
使用 clean-css 对 css 压缩
3.js 的压缩和混乱
js的压缩和混乱主要包括以下这几部分:
无效字符的删除
剔除注释
代码语义的缩减和优化
代码保护(代码逻辑变得混乱,降低代码的可读性,这点很重要)
如何进行 js 的压缩和混乱
使用在线网站进行压缩(开发过程中一般不用)
使用 html-minifier 工具
使用 uglifyjs2 对 js 进行压缩
其实 css 压缩与 js 的压缩和混乱比 html 压缩收益要大得多,通过 css 压缩和js 压缩带来流量的减少,会非常明显。所以 css 压缩与 js 的压缩和混乱必须要有!
4.文件合并
从上图可以看出不合并请求有以下缺点:
文件与文件之间有插入的上行请求,增加了 N-1 个网络延迟
受丢包问题影响更严重
keep-alive 方式可能会出现状况,经过代理服务器时可能会被断开,也就是说不能一直保持 keep-alive 的状态
压缩合并 css 和 js 可以减少网站 http 请求的次数,但合并文件可能会带来问题: 首屏渲染和缓存失效问题。
那该如何处理这问题呢?—— 公共库合并和不同页面的合并。
如何进行文件合并
使用在线网站进行文件合并
使用 nodejs 实现文件合并( gulp、fis3 )
二、非核心代码异步加载异步加载的方式
1、异步加载的方式
异步加载的三种方式—— async 和 defer、动态脚本创建
① async 方式
async 属性是 HTML5 新增属性,需要 Chrome、FireFox、IE9+ 浏览器支持
async 属性规定一旦脚本可用,则会异步执行
async 属性仅适用于外部脚本
如果是多个脚本,该方法不能保证脚本按顺序执行
<script type="text/javascript" src="xxx.js" async="async"></script>
② defer 方式
兼容所有浏览器
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止
如果是多个脚本,该方法可以确保所有设置了 defer 属性的脚本按顺序执行
如果脚本不会改变文档的内容,可将 defer 属性加入到 script 标签中,以便加快处理文档的速度
③ 动态创建 script 标签 在还没定义 defer 和 async 前,异步加载的方式是动态创建 script,通过 window.onload 方法确保页面加载完毕再将 script 标签插入到 DOM 中,具体代码如下:
function addScriptTag(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
addScriptTag("js/index.js");
}
2、异步加载的区别
① defer 是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
② async 是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关
其中蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
三、利用浏览器缓存
对于 web 应用来说,缓存是提升页面性能同时减少服务器压力的利器。
浏览器缓存类型
1.强缓存:不会向服务器发送请求,直接从缓存中读取资源,在 chrome 控制台的 network 选项中可以看到该请求返回 200 的状态码,并且 size 显示from disk cache 或 from memory cache;
相关的 header:
Expires :response header 里的过期时间,浏览器再次加载资源时,如果在这个过期时间内,则命中强缓存。它的值为一个绝对时间的 GMT 格式的时间字符串, 比如Expires:Thu,21 Jan 2018 23:39:02 GMT
Cache-Control :这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示。当值设为 max-age=300 时,则代表在这个请求正确返回时间(浏览器也会记录下来)的 5 分钟内再次加载资源,就会命中强缓存。比如 Cache-Control:max-age=300,
简单概括:其实这两者差别不大,区别就在于 Expires 是 http1.0 的产物,Cache-Control是http1.1的产物,两者同时存在的话,Cache-Control优先级高于Expires。
2.协商缓存:向服务器发送请求,服务器会根据这个请求的 request header的一些参数来判断是否命中协商缓存,如果命中,则返回 304 状态码并带上新的 response header 通知浏览器从缓存中读取资源;另外协商缓存需要与cache-control 共同使用。
相关的 header:
①Last-Modified 和 If-Modified-Since:当第一次请求资源时,服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified: GMT”的形式加在实体首部上一起返回给客户端。
但 last-modified 存在一些缺点:
Ⅰ.某些服务端不能获取精确的修改时间
Ⅱ.文件修改时间改了,但文件内容却没有变
所以就有了 ETag 和 If-None-Match
②ETag 和 If-None-Match:Etag是上一次加载资源时,服务器返回的response header,是对该资源的一种唯一标识,只要资源有变化,Etag 就会重新生成。浏览器在下一次加载资源向服务器发送请求时,会将上一次返回的Etag值放到request header里的If-None-Match里,服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致,就能很好地判断资源相对客户端而言是否被修改过了。如果服务器发现ETag匹配不上,那么直接以常规GET 200回包形式将新的资源(当然也包括了新的ETag)发给客户端;如果ETag是一致的,则直接返回304知会客户端直接使用本地缓存即可。
两者之间对比:首先在精确度上,Etag 要优于 Last-Modified。Last-Modified的时间单位是秒,如果某个文件在1秒内改变了多次,那么他们的Last-Modified其实并没有体现出来修改,但是Etag每次都会改变确保了精度;如果是负载均衡的服务器,各个服务器生成的Last-Modified也有可能不一致。第二在性能上,Etag 要逊于 Last-Modified,毕竟 Last-Modified 只需要记录时间,而 Etag 需要服务器通过算法来计算出一个 hash 值。第三在优先级上,服务器校验优先考虑 Etag
缓存的机制
四、使用 CDN
大型 Web 应用对速度的追求并没有止步于仅仅利用浏览器缓存,因为浏览器缓存始终只是为了提升二次访问的速度,对于首次访问的加速,我们需要从网络层面进行优化,最常见的手段就是CDN(Content Delivery Network,内容分发网络)加速。
通过将静态资源(例如 javascript,css,图片等等)缓存到离用户很近的相同网络运营商的CDN节点上,不但能提升用户的访问速度,还能节省服务器的带宽消耗,降低负载。
CDN是怎么做到加速的呢?
CDN 网站的内容缓存在网络边缘。不同地区的用户就会访问到离自己最近的相同网络线路上的CDN节点。当请求达到CDN节点后,节点会判断自己的内容缓存是否有效,如果有效,则立即响应缓存内容给用户,从而加快响应速度。
因此,一个地区内只要有一个用户先加载资源,在CDN中建立了缓存,该地区的其他后续用户都能因此而受益。
五、预解析 DNS
资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如,我们将来可从 example.com 获取图片或音频资源,那么可以在文档顶部的 标签中加入以下内容:
<link rel="dns-prefetch" href="//example.com">
当我们从该 URL 请求一个资源时,就不再需要等待 DNS 的解析过程。该技术对使用第三方资源特别有用。
另外需要注意的是,浏览器会对 a 标签的 href 自动启用 DNS Prefetching,所以 a 标签里包含的域名不需要在 head 中手动设置 link。但是在 HTTPS 下不起作用,需要 meta 来强制开启功能。这个限制的原因是防止窃听者根据 DNS Prefetching 推断显示在 HTTPS 页面中超链接的主机名。下面这句话作用是强制打开 a 标签域名解析
<meta http-equiv="x-dns-prefetch-control" content="on">
页面性能优化的五种办法相关推荐
- 前端页面性能优化的几种方式
前端页面性能优化的几种方式 提升页面性能优化的常见方式: 资源压缩合并,减少http请求 非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别 利用浏览器缓存 --> ...
- web页面性能优化及SEO优化
web页面性能优化 前言: 在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网 ...
- 干货 | 数据思维在携程商旅页面性能优化中的一次实践
作者简介 Graviton,携程研发总监,专注数据思维驱动团队效能与技术发展. 本文旨在通过一个实际的例子,说明如何通过数据思维来解决研发工作中的一些棘手问题.通过此文,希望能够清楚地阐述我对下面几个 ...
- 《C++应用程序性能优化::第五章动态内存管理》学习和理解
<C++应用程序性能优化::第五章动态内存管理>学习和理解 说明:<C++应用程序性能优化> 作者:冯宏华等 2007年版. 2010.8.29 cs_wuyg@126.com ...
- 如何踢掉 sql 语句中的尾巴,我用 C# 苦思了五种办法
一:背景 1. 讲故事 这几天都在修复bug真的太忙了,期间也遇到了一个挺有趣bug,和大家分享一下,这是一块sql挺复杂的报表相关业务,不知道哪一位大佬在错综复杂的 嵌套 + 平行 if判断中sql ...
- 重度使用Flutter研发模式下的页面性能优化实践
简介: 淘宝特价版是集团内应用Flutter技术场景比较多,且用户量一亿人以上的应用了.目前我们首页.详情.店铺.我的,看看短视频,及评价,设置等二级页面都在用Flutter技术搭建.一旦Flutte ...
- 雅虎网站页面性能优化的34条黄金守则(转)
2019独角兽企业重金招聘Python工程师标准>>> 雅虎团队经验:网站页面性能优化的34条黄金守则 1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下 ...
- 移动端页面性能优化方案
移动端页面性能优化方案 加载优化 使用首屏加载 按需加载 预加载 压缩图片 减少Cookie 异步加载第三方资源 脚本执行优化 CSS优化 JavaScript执行优化 渲染优化 SEO(搜索引擎优化 ...
- 浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
最新文章
- 用户在购买机器之后不知如何正确保养笔记本电脑
- (转载)java list排序
- python logging详解及自动添加上下文信息
- dubbo 负载均衡中策略决策
- Advanced Installer 历史版本下载
- 详解样条曲线(上)(包含贝塞尔曲线)
- id门禁卡复制到手机_手机NFC也可以刷ID卡门禁?无聊测试居然成功了!
- 苹果电脑Chrome浏览器截网页长图
- 麦当劳和肯德鸡的笑话
- 计算机30首音乐怎么开,qq每日精选_qq音乐每日精选30首在哪找
- BUUCTF:[SWPU2019]Network
- Deepin Linux系统安装及显示器配置教程(可竖屏)
- dmidecode查看内存信息,服务器序列号,内存插槽信息
- .NET Framework的作用是什么
- 国内哪家的香港云服务器哪家好?
- R语言如何为dataframe的每一个数据列都做Q-Q图?
- 第23期恒安商学院总裁训练营圆满结束
- Java程序员开发编程常用的工具
- WAS的SystemOut.log中报错“ADMS0015E”
- C语言如何输入输出字符串