web性能优化的几点思考

hyman
250 阅读5分钟

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

优化思路

按需加载

  • 最基本操作，不需要的文件不要加载，不需要的组件插件不要引入

代码开启压缩，关闭map文件

  • 代码压缩可以极大减少体积，是最有效的优化方法。 生产环境的map文件也不要使用，还会有安全问题

压缩https请求

  • 比较小的请求，可以放到一个请求里面 原理同Sprites一样

开启gzip压缩

  • GZip可对多种类型的文件进行压缩，对于CSS、JS、HTML文件具有极高的压缩率，尤其对使用了较多JS特效的网站，开启GZip后压缩比高达70%。因此，开启GZip压缩可以较显著的为网站加速，不过要消耗一点服务器资源，嘿嘿，总体来说，利大于弊。

懒加载，异步加载提高首屏速度

  • 非主流程插件，组件，放到异步加载，或者使用到再加载，提高首屏速度，如果还慢，就使用loading方法，先响应操作再做处理

活用浏览器缓存和cdn资源缓存

  • 浏览器缓存跨域大大提高响应速度，cdn缓存可以增加大量的并发

域名预解析

  • 在meta中添加perfetch，可以对dns域名做预解析，都是为了减少域名查找时间。

减少dom操作

js最大的性能瓶颈就在dom操作上，所以我们要

  • css 放最上面，防止引起dom 的重绘和重排
  • js 按照需求减少dom操作，可使用虚拟dom概念

减少cookie 使用

一般开启cookie携带后，所有的cookie 会跟着请求带走，会增加每个接口的体积，我们要尽量减少这种情况

图片加载优化

如果可以使用css3代替图片

  • css3如果能代替简单的图片，提交会有效的缩小

将图片服务和应用服务分离

  • 对于服务器来说，图片始终是最消耗系统资源的，如果将图片服务和应用服务放在同一服务器的话，应用服务器很容易会因为图片的高I/O负载而崩溃，所以当网站存在大量的图片读写操作时，建议使用图片服务器。
  • 浏览器在同一时间对同一域名下的资源的并发请求数目是有限制的，一般在2-6之间,超过限制数目的请求就会被阻塞。一些主流浏览器对 HTTP1.1 和 HTTP 1.0 的最大并发连接数目。

简单粗暴的压缩方案

图片懒加载

  • 像淘宝或者京东这样的APP页面上有很多图片，当我们滑到下一屏时下一屏的图片才会加载，这就采用了图片懒加载的方式。
  • 图片懒加载，简单来说就是在页面渲染过程中，图片不会一次性全部加载，会在需要的时候加载，比如当滚动条滚动到某一个位置时触发事件加载图片。
const imgs = document.querySelectorAll('img');
let begin = 0;
function lazyload(){
    for (let index = begin; index < imgs.length; index++) {
        const img = imgs[index];
        if(img.offsetTop < document.documentElement.clientHeight + document.documentElement.scrollTop){
            console.log("scroll"+index+"到了")
            begin = index; //不去遍历已经加载了得图片
            img.src = img.getAttribute("imgPath")
        }
    }
}
lazyload() //渲染首屏，先执行一次
window.onscroll = lazyload;

css Sprites

  • 当网站或者APP有大量小icon，如果上传到图片服务器比如CDN，要加载所有这些小icon将增加大量请求，而CDN是按流量收费的，这无疑将增加很多成本。将这些小icon合并成一张图片，只需要加载一次，每次通过background-position来控制显示icon，这样就可以节约大量请求，节约成本。（缺点：在长期开发多人合作的项目中，会不好维护这些sprites，每次对icon做修改，都得相应的改动css里background-position的值，相当繁琐。）

将图片压缩成base64格式来节约请求

  • 将图片压缩成base64，随html或者css一起下载到浏览器，不需要额外的请求，这样就节约了请求。我们知道图片在传输过程中是流传输，如果将图片转换成base64，实际上是变大了，并且浏览器在decode base64编码的图片时需要耗费很多时间的，所以如果我们选择此种方案的话，最好选择一些小图片，不然得不偿失。

使用svg技术替换图片

  • 使用svg图片优势：
    a.SVG是矢量图文件，可以随意改变大小，同时不影响图标质量； b.可以用CSS样式自由定义图标颜色，尺寸等； c.所有的SVG可以全部放在一个文件中，节省HTTP请求； d.使用SML.CSS或者js可以制作有交互动画的效果； e.犹豫SVG也是一种XML文件，所以可以使用gzip的方法把文件压缩到很小； 缺点：svg不是所有浏览器都能支持。

用字体图标库代替图片

  • 使用字体图标库来替代图片，比如iconfont、font waesome。优点：占用资源少，图片小。缺点：不一定能找到符合设计稿的字体图标
    8、更好的图片格式
  • webp、bpg、sharpP等新图片格式具有更好的压缩比，可以使用这类新型的图片来代替原始图片
  • 原理：对图片格式转换，在画质可以接受的情况下达到更好的压缩比效果优势：减少图片加载流量，效果比较明显
  • 劣势：服务器和浏览器压力增大，而且服务器需要额外的服务支持，格式转换要考虑浏览器的兼容性。
avatar
文章
阅读
粉丝