网站加入站长统计,90后做网站,创业平台网,wordpress vue.js前言
上一篇我们已经围绕“网络层面”探索页面性能优化的方案#xff0c;接下来本篇围绕“浏览器渲染层面”继续开展探索。正文开始前#xff0c;我们思考如下问题#xff1a; 浏览器渲染页面会经过哪几个关键环节#xff1f;“渲染层面”的优化从哪几方面着手#xff1f…前言
上一篇我们已经围绕“网络层面”探索页面性能优化的方案接下来本篇围绕“浏览器渲染层面”继续开展探索。正文开始前我们思考如下问题 浏览器渲染页面会经过哪几个关键环节“渲染层面”的优化从哪几方面着手“渲染层面”的性能优化方案会有哪些 渲染关键环节 优化原则
我们了解“页面渲染关键环节”后便可知晓影响页面渲染性能的因素主要是静态资源HTML、CSS、JS、图片等。因此“渲染层面”的性能优化方案主要就是围绕静态资源展开探索其方案制定可围绕下面2个原则展开
尽可能减少资源个数尽可能减少资源体积大小
优化方案 HTML 优化
1.减少文件大小压缩、精简
压缩处理 HTML减小HTML体积精简 HTML 尽量减少 HMTL 嵌套、iframe/table 使用table标签比其他html标签占用更多字节导致下载时间长占用服务器更多的流量资源删除多余的空格、换行符、缩进和不必要注释删除冗余标签和属性...
2.DOM 优化
控制DOM大小 合理的业务逻辑拆分先加载可视区其他延迟加载懒加载减少DOM操作尽可能对DOM操作统一逻辑处理或是使用虚拟DOM借鉴vue/react再插入到真实DOM减少重排重绘
CSS 优化
1. 减少资源请求个数
合并多个 CSS 样式文件按需加载样式
2. 减少文件大小压缩
压缩处理 CSS 文件 在线压缩例如CSS Minifywebpack压缩插件 3. 减少文件大小编码优化
位置放在head里尽早地进行样式解析构建CSSOM 树简化 CSS 选择器选择器优先级!important 内联 id class|属性|伪类 标签 | 伪元素 尽可能减少样式层级数选择器嵌套少用标签选择器尽量选择高优先级的id/class/属性/伪类选择器代替少用通配符*只对需要修改样式的元素进行选择关注可继承属性避免重复定义和匹配 可继承属性 所有元素可继承visibility 和 cursor。内联元素可继承letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。块元素可继承text-indent和text-align。列表元素可继承list-style、list-style-type、list-style-position、list-style-image。表格元素可继承border-collapse。 总结CSS继承特性主要是指文本方面的继承而关于与盒模型相关的属性不支持继承。 优化CSS编码风格尽可能减少重排重绘 元素显隐操作频繁可设置 visibility: hidden让元素占位不变不会触发重排仅触发重绘已知图片的宽高样式可先设置width、height避免图片下载后整个页面发生重排避免使用CSS表达式避免频繁设置同一div样式可进行一次性更改动画使用绝对定位脱离文档流定位避免触发重排...精简 CSS从而减少 CSS 文件大小 使用缩写语句如margin-top/bottom直接用margin删除不必要的单位如0px直接写0删除过多分号删除空格和注释...
JS 优化
1. 减少文件请求个数
合并多个 JS 脚本文件首屏渲染暂不需要且体积大的脚本可进行按需加载通过script动态创建加载合理使用缓存 业务中 非敏感固定的数据可使用本地存储 localStorage/sessionStorage/IndexedDB等合理缓存 DOM 对象等构建打包比如webpack 第三方模块缓存hard-source-webpack-plugin、DLL 动态链接库loader 开启 cache 缓存...
2. 减少文件大小
压缩处理在线压缩/Webpack插件uglify/gzip构建打包减小bundle体积 开启 TreeShaking剔除 Dead Code剥离第三方依赖webpack配置externals提取公共模块webpack4.x 配置 optimization.splitChunks相当于webpack旧版本的CommonsChunkPlugin
3. 编码优化
加载时
位置放body底部让JS不阻塞HTML和CSS的解析合理选择加载模式减少重排重绘
// 1. 正常模式
script srcindex.js/script// 2. async 模式异步执行
script async srcindex.js/script// 3. defer 模式延迟执行
script defer srcindex.js/script一般当我们的脚本与 DOM 元素和其它脚本之间的依赖关系不强时我们会选用 async当脚本依赖于 DOM 元素时我们会选用 defer。(合理选择 script 加载模式可以有效地提升性能) 运行时
DOM 操作优化 合并多次 DOM 操作批量执行减少重排重绘大数据量渲染优化分页加载/虚拟列表 virtualList函数优化 获取 DOM 元素尽量使用id选择器尽量避免使用 eval使用事件节流/防抖函数使用事件委托JS动画优化 避免添加大量的 JS 动画简单动画尽量使用 CSS3 动画复杂动画尽量使用 Canvas 动画合理使用 requestAnimationFrame 动画代替 setTimeout、setInterval requestAnimationFrame 按照浏览器的刷新率60Hz左右来调动动画帧从而实现更加流畅和高性能的动画效果。 执行优化 合理拆分执行任务大数据计算可使用 Web Worker开启独立于主线程的并行计算...
图片优化
1.减少图片网络请求
雪碧图CSS sprite 小图标使用web font字体代替小体积图片使用base64编码 阴影、简单动画图效可用CSS3代替图片懒加载/预加载
2.减小图片大小
图片压缩可选择如下方式 在线压缩tinypng、tinyjpg插件压缩 压缩pngnode-pngquant-native可压缩50-80%左右压缩jpgjpegtran可压缩10%左右压缩gifgifsicle
3.合理使用图片格式
简介和特性是否支持透明支持颜色种数压缩方式浏览器兼容性适用场景jpg- 最常见、应用最广泛的图片格式 - 体积一般通常小于 png, gif 等格式不支持透明约1600万种颜色有损压缩几乎所有浏览器都支持呈现色彩丰富的图片比如大背景图、轮播图或Banner图等png8- 一种无损压缩的高保真的图片格式 - 8位的png体积较大支持透明256种2^8无损压缩几乎所有浏览器都支持呈现小图片比如小Logo、颜色简单对比强烈小图标png24- 一种无损压缩的高保真的图片格式 - 24位的png体积较大不支持透明约1600万种颜色无损压缩几乎所有浏览器都支持呈现颜色较多的图片比如背景图png32- 一种无损压缩的高保真的图片格式 - 32位的png体积大支持半透明8位透明通道2^32种无损压缩几乎所有浏览器都支持呈现色彩丰富高清图片比如海报svg- 矢量图任意缩放不影响清晰度 - 体积视内容而定支持设置透明度RGB/RGBA/十六进制设置颜色支持有损和无损压缩Chrome 4 2010年1月发布以上版本支持caniuse.com/svg适用任意缩放不失真的场景gif- 支持动态图片 - 压缩率较高 - 体积较小支持透明256种2^8无损压缩Chrome 582017年6月发布以上版本支持caniuse.com/gif适用于色彩较少的动图webp- 支持动态图片 - 压缩率较高 - 体积较小支持透明约1600万种颜色有损和无损压缩Chrome 322014年1月发布以上版本支持兼容性不太好caniuse.com/webp兼容性要求不高的多种图片格式场景
4.图片加载优化
懒加载
图片列表一般采用懒加载进行按需加载滚屏时当图片已将出现在可视区域的时候进行加载。有效地减轻服务器批量加载图片的压力
let imgList [...document.querySelectorAll(img)];
let len imgList.length;const lazyLoad (function(){let count 0;return function() {let deleteIndexList [];imgList.forEach((img,index) {let rec img.getBoundingClientRect();if(rec.top window.innerHeight) {// 元素出现在可视区window.innerHeight可视窗口的高度img.src img.dataset.src; // 将data-src设置成图片srcdeleteIndexList.push(index);count;if(count len) {// 当图片都加载完移除滚动监听事件document.removeEventListener(scroll, lazyLoad)}}})imgList imgList.filter((img, index) !deleteIndexList.includes(index))}
})()// 节流函数
const throttle function(fn, timing 500) {let prev 0return function() {let now new Date();if(now - prev timing) {prev now;fn.apply(this, arguments)}}
}
// 滚动监听加上节流控制
const _throttle throttle(lazyLoad)
document.addEventListener(scroll, _throttle)预加载
预加载preload在大图片加载完成前先加载小的loading用于提升用户体验。该优化思想不仅可以用于图片加载也能用于异步请求、html标签预加载
// 创建 img 图片元素
const myImage (function(){let imgNode document.createElement(img)document.body.appendChild( imgNode )return {setSrc: function(src) {imgNode.src src}}
})()/*** 预加载*/
const preLoad (function(){let img new Image();img.onload function() {myImage.setSrc( this.src )// this指向img}return {setImg: function(src) {myImage.setSrc(./img/loading.gif)img.src src}}
})()preLoad.setImg(./img/bg_gaoqing.jpeg)渐进式加载
5.响应式图片随窗口大小变化
CSS媒体查询 media 设置响应式
.bg {/* 正常未缩小屏幕加载大尺寸图片 */background-image: url(img_flowers.jpg);
}
/* 当屏幕宽度小于400 */
media screen and (max-width: 400px) {.bg {background-image: url(img_smallflower.jpg);}
}srcset属性设置响应式
picture source srcsetimg_smallflower.jpg media(max-width: 400px)img srcimg_flowers.jpg altFlowers
/picture
