网站打开速度慢,如何提升网站前端性能

作者:admin 发布时间:2019-11-03 01:47:06 浏览:1156次
一说到页面的性能优化,大家可能都会想起雅虎军规、2-5-8原则、3秒钟首屏指标等规则,这些规则在开发过程中不是强制要求的,但是有时候为了追求页面性能的完美和体验,就不得不对原有的代码进行修改和优化。

为了方便记忆和阅读,文章使用部分简写名词,解释如下

D端:桌面端页面Desktop End Page M端:移动端页面Mobile End Page

概述指南

D端优化手段在M端同样适用 在M端提出3秒钟渲染完成首屏指标 基于第二点,首屏加载3秒内完成或使用Loading进行占位 基于联通3G网络平均338kb/s(2.71mb/s),首屏资源不应超过1014kb M端因配置原因,除加载外渲染速度也是优化重点 基于第五点,要合理处理代码减少渲染损耗 基于第二点和第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置 加载完成后,用户交互使用时也需注意性能

加载优化

减少HTTP请求:尽量减少页面的请求数(首次加载同时请求数不能超过4个),移动设备浏览器同时响应请求为4个请求(Android支持4个,iOS5+支持6个) 合并CSS和JS 使用CSS精灵图 缓存资源:使用缓存可减少向服务器的请求数,节省加载时间,所有静态资源都要在服务器端设置缓存,并且尽量使用长缓存(使用时间戳更新缓存) 缓存一切可缓存的资源 使用长缓存 使用外联的样式和脚本 压缩代码:减少资源大小可加快网页显示速度,对代码进行压缩,并在服务器端设置GZip 压缩代码(多余的缩进、空格和换行符) 启用Gzip 无阻塞:头部内联的样式和脚本会阻塞页面的渲染,样式放在头部并使用link方式引入,脚本放在尾部并使用异步方式加载 首屏加载:首屏快速显示可大大提升用户对页面速度的感知,应尽量针对首屏的快速显示做优化 按需加载:将不影响首屏的资源和当前屏幕不用的资源放到用户需要时才加载,可大大提升显示速度和降低总体流量(按需加载会导致大量重绘,影响渲染性能) 懒加载 滚屏加载 Media Query加载 预加载:大型资源页面可使用Loading,资源加载完成后再显示页面,但加载时间过长,会造成用户流失 可感知Loading:进入页面时Loading 不可感知Loading:提前加载下一页 压缩图像:使用图像时选择最合适的格式和大小,然后使用工具压缩,同时在代码中用srcset来按需显示(过度压缩图像大小影响图像显示效果) 使用TinyJpg和TinyPng压缩图像 使用CSS3、SVG、IconFont代替图像 使用img的srcset按需加载图像 选择合适的图像:webp优于jpg,png8优于gif 选择合适的大小:首次加载不大于1014kb、不宽于640px PS切图时D端图像保存质量为80,M端图像保存质量为60 减少Cookie:Cookie会影响加载速度,静态资源域名不使用Cookie 避免重定向:重定向会影响加载速度,在服务器正确设置避免重定向 异步加载第三方资源:第三方资源不可控会影响页面的加载和显示,要异步加载第三方资源 加载过程是最为耗时的过程,可能会占到总耗时的`80%时间(**优化重点**)

执行优化

CSS写在头部,JS写在尾部并异步 避免img、iframe等的src为空:空src会重新加载当前页面,影响速度和效率 尽量避免重置图像大小:多次重置图像大小会引发图像的多次重绘,影响性能 图像尽量避免使用DataURL:DataURL图像没有使用图像的压缩算法,文件会变大,并且要解码后再渲染,加载慢耗时长 执行处理不当会阻塞页面加载和渲染

渲染优化

设置viewport:HTML的viewport可加速页面的渲染 减少DOM节点:DOM节点太多影响页面的渲染,尽量减少DOM节点 优化动画 尽量使用CSS3动画 合理使用requestAnimationFrame动画代替setTimeout 适当使用Canvas动画:5个元素以内使用CSS动画,5个元素以上使用Canvas动画,iOS8+可使用WebGL动画 优化高频事件:scroll、touchmove等事件可导致多次渲染 函数节流 函数防抖 使用requestAnimationFrame监听帧变化:使得在正确的时间进行渲染 增加响应变化的时间间隔:减少重绘次数 GPU加速:使用某些HTML5标签和CSS3属性会触发GPU渲染,请合理使用(过渡使用会引发手机耗电量增加) HTML标签:video、canvas、webgl CSS属性:opacity、transform、transition

样式优化

避免在HTML中书写style 避免CSS表达式:CSS表达式的执行需跳出CSS树的渲染 移除CSS空规则:CSS空规则增加了css文件的大小,影响CSS树的执行 正确使用display:display会影响页面的渲染 display:inline后不应该再使用float、margin、padding、width和height display:inline-block后不应该再使用float display:block后不应该再使用vertical-align display:table-*后不应该再使用float和margin 不滥用float:float在渲染时计算量比较大,尽量减少使用 不滥用Web字体:Web字体需要下载、解析、重绘当前页面,尽量减少使用 不声明过多的font-size:过多的font-size影响CSS树的效率 值为0时不需要任何单位:为了浏览器的兼容性和性能,值为0时不要带单位 标准化各种浏览器前缀 无前缀属性应放在最后 CSS动画属性只用-webkit-、无前缀两种 其它前缀为-webkit-、-moz-、-ms-、无前缀四种:Opera改用blink内核,-o-已淘汰 避免让选择符看起来像正则表达式:高级选择符执行耗时长且不易读懂,避免使用

脚本优化

减少重绘和回流 避免不必要的DOM操作 避免使用document.write 减少drawImage 尽量改变class而不是style,使用classList代替className 缓存DOM选择与计算:每次DOM选择都要计算和缓存 缓存.length的值:每次.length计算用一个变量保存值 尽量使用事件代理:避免批量绑定事件 尽量使用id选择器:id选择器选择元素是最快的 touch事件优化:使用tap(touchstart和touchend)代替click(注意touch响应过快,易引发误操作)

常用规则

雅虎军规 雅虎团队通过大量实践总结出以下7类35条前端优化规则,规则详情请参考这位兄弟的《雅虎前端优化35条规则翻译》。 内容 Make Fewer HTTP Requests:减少HTTP请求数 Reduce DNS Lookups:减少DNS查询 Avoid Redirects:避免重定向 Make Ajax Cacheable:缓存AJAX请求 Postload Components:延迟加载资源 Preload Components:预加载资源 Reduce The Number Of DOM Elements:减少DOM元素数量 Split Components Across Domains:跨域拆分资源 Minimize The Number Of Iframes:减少iframe数量 No 404s:消除404错误 样式 Put Stylesheets At The Top:置顶样式 Avoid CSS Expressions:避免CSS表达式 Choose Over @import:选择代替@import Avoid Filters:避免滤镜 脚本 Put Scripts At The Bottom:置底脚本 Make JavaScript And CSS External:使用外部JS和CSS Minify JavaScript And CSS:压缩JS和CSS Remove Duplicate Scripts:删除重复脚本 Minimize DOM Access:减少DOM操作 Develop Smart Event Handlers:开发高效的事件处理 图像 Optimize Images:优化图片 Optimize CSS Sprites:优化CSS精灵图 Don't Scale Images In HTML:不在HTML中缩放图片 Make Favicon.ico Small And Cacheable:使用小体积可缓存的favicon 缓存 Reduce Cookie Size:减少Cookie大小 Use Cookie-Free Domains For Components:使用无Cookie域名的资源 移动端 Keep Components Under 25kb:保持资源小于25kb Pack Components Into A Multipart Document:打包资源到多部分文档中 服务器 Use A Content Delivery Network:使用CDN Add An Expires Or A Cache-Control Header:响应头添加Expires或Cache-Control Gzip Components:Gzip资源 Configure ETags:配置ETags Flush The Buffer Early:尽早输出缓冲 Use Get For AJAX Requests:AJAX请求时使用get Avoid Empty Image Src:避免图片空链接 2-5-8原则 在前端开发中,此规则作为一种开发指导思路,针对浏览器页面的性能优化。 用户在2秒内得到响应,会感觉页面的响应速度很快 Fast 用户在2~5秒间得到响应,会感觉页面的响应速度还行 Medium 用户在5~8秒间得到响应,会感觉页面的响应速度很慢,但还可以接受 Slow 用户在8秒后仍然无法得到响应,会感觉页面的响应速度垃圾死了(此时会有以下四种可能) 难道是网速不好,发起第二次请求 => 刷新页面 什么垃圾页面呀,怎么还不打开 => 离开页面,有可能转投竞争对手的网站 垃圾程序猿,做的是什么页面啊 => 咒骂开发此页面的程序猿 断网了 => 网线断了?Wi-Fi断了?信号不好?话费用完了? 知道这个规则的数字顺序怎样来的吗,看下键盘右方的数字键盘由下往上排序:2-5-8 3秒钟首屏指标 此规则适用于M端,顾名思义就是打开页面后3秒钟内完成渲染并展示内容。

如需转载请保留本文出处: https://www.zhe94.com/566.html

上一篇:快速建站之前言:如何建立一个自己的网站
下一篇:前端如何利用H5调用公司app的微信分享功能