web性能优化

时间 2019-12-10

标签 web 性能优化栏目 HTML 繁體版

原文原文链接

几乎全部的开发者都会面临着开发的网站存在加载问题，想要加快网页的加载速度。前端的页面更须要在性能优化上下功夫，只有这样才能实现更好的用户体验。本文从构建、浏览器渲染、缓存、PWA、服务端优化等多方面，梳理前端性能优化的技术点、综合分析技术的原理，根据不一样的业务场景选择合适的性能优化点进行应用，最终为你的网站带来显著的速度提高和总体性能提高。css

先看一下早期CS架构的开发与部署过程html

再看一下如今BS架构的开发与部署过程前端

从地址栏输入url到页面渲染出来，整个过程经历了什么（一道经典的面试题。。）让咱们用一张图来了解整个过程：node

从上图这个请求过程，咱们能够思考一下其中一些潜在的性能优化点：ios

dns是否能够经过缓存减小dns查询时间？
网络请求的过程走最近的网络环境？
相同的静态资源是否能够缓存？
可否减小请求http的请求大小？
减小http请求数量？
服务端渲染？

综上，咱们得出深刻理解http请求过程是前端性能优化的核心web

资源合并与压缩

html压缩

HTML代码压缩就是压缩这些在文本文件中有意义，可是在HTML中不显示的字符，包括空格、制表符、换行符等，还有一些其余意义的字符，如HTML注释也能够被压缩。面试

HTML代码压缩的意义：
以google为例，google的流量，占到整个互联网的40%，2016年全球网络流量达到1.3ZB（1ZB=10^9TB），那么google在2016年的流量就是1.3ZB*40%，若是google每1MB请求减小一个字节，每一年能够节省流量近500TB。算法

那么如何进行HTML的压缩呢？后端

使用在线网站进行压缩
nodejs提供了html-minifier工具
后端模版引擎渲染压缩

css及js压缩

如何进行css压缩：浏览器

使用在线网站进行压缩
使用html-minifier对html中的css进行压缩
使用clean-css对css进行压缩

如何进行js压缩和混乱：

使用在线网站进行压缩
使用html-minifier对html中对js进行压缩
使用uglify2对js进行压缩

文件合并

可是文件合并也存在它本身的问题：

首屏渲染问题
缓存失效问题

解决方案：

公共库合并
不一样页面的合并
随机应变，根据业务场景做出抉择，选出最优方案

如何进行文件合并：

使用在线网站进行文件合并
使用nodejs实现文件合并

图片相关的优化

一张JPG图片的解析过程

png八、png2四、png32之间的区别

区别主要仍是文件大小和色彩的丰富程度

png8:256色 + 支持透明
png24:2^24色 + 不支持透明
png32:2^24色 + 支持透明

每种图片格式都有本身的特色，针对不一样的业务场景选择不一样的图片格式很重要。

不一样格式图片经常使用的业务场景

先看一下四种经常使用图片格式的各自特色吧：

jpg有损压缩，压缩率高，不支持透明
png支持透明，浏览器兼容好
webp压缩程度更好，在ios webview有兼容性问题
svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景

根据各自不一样的特色获得适用的业务场景分别为：

jpg:大部分不须要透明图片的业务场景
png:大部分须要透明图片的业务场景
webp:安卓所有
svg:图片样式相对简单的业务场景，如icon

图片压缩几种方法-雪碧图、Image inline

css雪碧图

image inline

矢量图

使用svg进行矢量图的绘制
使用iconfont解决icon问题

在安卓下使用webp

webp的优点体如今它具备更优的图像数据压缩算法，能带来更小的图片体积，并且拥有肉眼识别无差别的图像质量；同时具有了无损和有损的压缩模式、Alpha透明以及动画的特性，在JPEG和PNG上的转化效果都很是优秀、稳定和统一。

css 和 js 的装载与执行

先用一张图来理解html页面加载渲染的过程：

html渲染过程当中有如下特色：

顺序执行、并发加载

（1）词法分析 （2）并发加载 （3）并发上限

是否阻塞

css阻塞：（1）css head中阻塞页面的渲染（2）css阻塞js的执行（3）css不阻塞外部脚本的加载
js阻塞：（1）直接引入的js阻塞页面的渲染（2）js不阻塞资源的加载（3）js顺序执行，阻塞后续js逻辑的执行