页面优化的一些建议

文章本来是给公司内部分享用的&＃xff0c;现在发表出来&＃xff0c;欢迎大家提出宝贵建议。

背景目的

让官网首页加载速度更快&＃xff0c;对用户的操作响应得更及时&＃xff0c;给用户提供更为友好的体验。
减少页面请求数&＃xff0c;减小请求所占带宽&＃xff0c;节省资源。

优化手段

按粒度分为两类&＃xff1a;

页面级别优化&＃xff08;HTTP请求数&＃xff0c;资源合并压缩&＃xff0c;资源加载时机等&＃xff09;
代码级别优化&＃xff08;DOM操作优化、CSS选择符优化、HTML结构优化&＃xff09;

具体措施

页面级别优化

页面级别的优化目标基本就是如何减少HTTP请求数&＃xff0c;减少请求资源的体积。每个请求都是有成本的&＃xff0c;既包含时间成本也包含资源成本&＃xff08;一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而又复杂的过程&＃xff09;

1. 静态资源的合并和压缩

根据静态文件的类型&＃xff0c;可以借助gulp工具将js文件和css文件进行合并和压缩。例如官网项目里css文件有七个&＃xff0c;js文件有十几二十多个,合并压缩静态资源后可以减少http的开销。

我们将不经常改变的资源(例如jquery、各种lib库、插件等)全部合并压缩成一个文件&＃xff0c;命名为vender.css、vender.js。经常改变上线的文件合并压缩成一个文件&＃xff0c;命名为index.css&＃xff0c;index.js,并且加上hash戳&＃xff0c;index等文件每次上线内容基本都是会改变的&＃xff0c;那么gulp自动构建后加上的hash戳也是不一样的&＃xff0c;而vender类型不变&＃xff0c;这样我们就能合理利用浏览器的缓存机制了。

2. 图片的处理

使用jq的lazyload插件实现图片懒加载。等滚动条滚动到对应的地方再加载所需要的图片资源。
不直接使用设计给的两倍图&＃xff0c;用css的devicePixelRatio检查设备的像素比&＃xff0c;辅助区分视网膜设备还是非视网膜设备来决定加载两倍图还是原始大小的图片。
图片上传到cdn之前在保证不失真的情况下&＃xff0c;用gulp-imagemin工具压缩下大小。
将下图这样的小图片全部做成雪碧图&＃xff0c;单色可以考虑用icon-font来实现。或者直接在页面写svg代码和转成base64写到页面也行&＃xff0c;总之是要减少http的请求数。

3. 首屏加载

将首屏第一时间呈现给用户。具体的做法是除了首屏dom元素之外,将所有的dom元素用一个template元素进行包裹&＃xff0c;等window监听到load事件后&＃xff0c;将剩余的dom部分全部插到页面中。&＃xff08;tips&＃xff1a;为避免用户可能还没等到window的load事件就开始滚动页面&＃xff0c;可以将首屏的范围扩大。&＃xff09;

4. DNS预读取

DNS预读取是一项使浏览器主动去执行域名解析的功能。DNS请求需要的带宽非常小&＃xff0c;但是延迟却有点高。下面是引用MDN的一句话&＃xff1a;

在某些浏览器中这个预读取的行为将会与页面实际内容并行发生&＃xff08;而不是串行&＃xff09;。正因如此&＃xff0c;某些高延迟的域名的解析过程才不会卡住资源的加载。这样可以极大的加速&＃xff08;尤其是移动网络环境下&＃xff09;页面的加载。在某些图片较多的页面中&＃xff0c;在发起图片加载请求之前预先把域名解析好将会有至少 5% 的图片加载速度提升。

具体做法&＃xff1a; head标签里加上

"dns-prefetch" href&＃61;"https://data.dadaabc.com/">

data.dadaabc.com为静态资源的域名&＃xff0c;如还有其他链接的域名&＃xff0c;都一起加进去。

5. 多域名分发静态资源

同域下浏览器能并发的请求有限&＃xff0c;为了增加并发&＃xff0c;尤其是一些静态资源上&＃xff0c;可以使用多个域名。但由于域名DNS解析本身也是耗时的&＃xff0c;所以也不是越多越好&＃xff0c;chrome最大支持6路并发&＃xff0c;所以一般设置2-4个域名较为合适。具体的做法是&＃xff1a;再增加cdn域名来下载静态资源。比如图片全部用img.dadaabc.com/域名,css资源全部用css.dadaabc.com/域名&＃xff0c;这些域名最终全部指向同样的cdn服务器。静态资源域名加前缀可以用gulp-rev-replace来实现。

6. 统计代码

统计代码全部放到window的load事件之后执行。为了便于管理统计代码&＃xff0c;例如页面加上一些埋点&＃xff0c;增加删除统计产品&＃xff0c;我们可以借助Google Tag Manager工具来统一管理。具体做法是&＃xff1a;页面只拉取Google Tag Manager提供的gtm代码&＃xff0c;该js代码含有全部的统计产品&＃xff0c;例如百度、Inspelect等&＃xff0c; 这些统计产品也都是通过创建script标签来动态插入到页面中的。另外需要注意的是&＃xff0c;google提供的gtm代码是在google服务器上的&＃xff0c;为了让获取该代码的速度更快&＃xff0c;我们可以在自己的服务器上执行crontab定时任务&＃xff0c;每分钟获取一次&＃xff0c;然后gtm代码直接从自己服务器上获取。

代码级别优化

1. 合理的dom结构

css文件全部放到head里&＃xff0c;script文件全部放到body的最底部。原因&＃xff1a; 把样式表移到head里允许页面逐步渲染。浏览器负责渲染的GUI渲染线程与JS引擎线程是互斥的&＃xff0c;当JS引擎执行时GUI线程会被挂起&＃xff08;相当于被冻结了&＃xff09;&＃xff0c;GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

参考资料&＃xff1a;从浏览器多进程到JS单线程&＃xff0c;JS运行机制最全面的一次梳理

2. 最小化重排和重绘

#####多个属性改变一次性写&＃xff1a; 举个例子&＃xff1a;

var ele &＃61; document.getElementById(&＃39;myDiv&＃39;); ele.style.borderLeft &＃61; &＃39;1px&＃39;; ele.style.borderRight &＃61; &＃39;2px&＃39;; ele.style.padding &＃61; &＃39;5px&＃39;;

三个样式属性被改变&＃xff0c;每一个都会影响元素的几何结构&＃xff0c;虽然大部分现代浏览器都做了优化&＃xff0c;只会引起一次重排&＃xff0c;但是像上文一样&＃xff0c;如果一个及时的属性被请求&＃xff0c;那么就会强制刷新队列&＃xff0c;而且这段代码四次访问DOM&＃xff0c;一个很显然的优化策略就是把它们的操作合成一次&＃xff0c;这样只会修改DOM一次&＃xff1a;

var ele &＃61; document.getElementById(&＃39;myDiv&＃39;); ele.style.cssText &＃61; &＃39;border-left: 1px; border-right: 2px; padding: 5px;&＃39;;

总结&＃xff1a;同一个DOM的多个属性改变可以写在一起&＃xff08;减少DOM访问&＃xff0c;同时把强制渲染队列刷新的风险降为0&＃xff09;

fragment元素的应用&＃xff1a;

fragment是个轻量级的document对象&＃xff0c;它的设计初衷就是为了完成更新和移动节点这样的任务。fragment的一个便利的语法特性是当你附加一个片断到节点时&＃xff0c;实际上被添加的是该片断的子节点&＃xff0c;而不是片断本身。只触发了一次重排&＃xff0c;而且只访问了一次实时的DOM。例如&＃xff1a;

var fragment &＃61; document.createDocumentFragment();var li &＃61; document.createElement(&＃39;li&＃39;); li.innerHTML &＃61; &＃39;apple&＃39;; fragment.appendChild(li);var li &＃61; document.createElement(&＃39;li&＃39;); li.innerHTML &＃61; &＃39;watermelon&＃39;; fragment.appendChild(li);document.getElementById(&＃39;fruit&＃39;).appendChild(fragment);

3. 函数防抖和函数节流

触发大量回调函数的事件&＃xff0c;例如拖拽时的mousemove事件&＃xff0c;window对象的resize、scroll事件&＃xff0c;文字输入、自动完成的keyup事件等&＃xff0c;需要合理使用函数防抖和函数节流机制。具体可以参考我的另外一篇文章函数防抖和函数节流