认识达内从这里开始

随着互联网的不断发展，越来越多的人都在学习web前端编程开发等互联网技术，而本文我们就通过案例分析来简单了解一下，web前端性能优化分类。

移动端性能优化：

保持单个文件小于25KB

移动网站页面要求下载资源，如果文件过大，会大大减慢页面加载速度。

打包内容为分段multipart文档

由于HTTP请求每一次都会执行三次握手，每次握手都会消耗较多的时间。使用multipart，实现了多文件同时上传，可用一个HTTP请求获取多个组件。

图片优化：

CSSsprites

俗称CSS精灵、雪碧图，雪花图等。即将多张小图片合并成一张图片，达到减少HTTP请求的一种解决方案。可通过CSS中的background属性访问图片内容。这种方案同时还可以减少图片总字节数，节省命名词汇量。

压缩图片

图片占据资源极大，因此尽量避免使用多余的图片，使用时选择合适的格式大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。(切记不要过分压缩可能会导致图片迷糊)

尽量避免重设图片大小

重设图片大小是指在页面、CSS、JavaScript等中多次重置图片大小，多次重设图片大小会引发图片的多次重绘，影响性能。

图片尽量避免使用DataURL

DataURL图片没有使用图片的压缩算法文件会变大，并且要解码后再渲染，加载慢耗时长。

图片懒加载

图片对页面加载速度影响非常大。比如，当一个页面内容比较多的时候，加载速度就会大大的降低，极大的影响到用户体验。更有甚者，一个页面可能会有几百个图片，但是页面上仅仅只显示前几张图片，那其他的图片是否可以晚点加载用于提高性能。具体可见>>

JavaScript相关优化

把脚本放在页面底部

放在前面js加载会造成阻塞，影响后面dom的加载

使用外部JavaScript和CSS

在现实环境中使用外部文件通常会产生较快的页面，因为JavaScript和CSS有机会被浏览器缓存起来。对于内联的情况，由于HTML文档通常不会被配置为可以进行缓存的，所以每次请求HTML文档都要下载JavaScript和CSS。所以，如果JavaScript和CSS在外部文件中，浏览器可以缓存它们，HTML文档的大小会被减少而不必增加HTTP请求数量。

压缩JavaScript和CSS

压缩文件是为了降低网络传输量，减少页面请求的响应时间。

减少DOM操作

操作dom会产生几种动作，极大的影响渲染的效率。其中layout(布局)和paint(绘制)是大的。

js开销缩短解析时间

开销：加载-》解析和编译-》执行

js的解析和编译，执行要花很长时间(谷歌开发工具中的performance中可以查看。选中main主线程中的某一段。)

解决方案：

代码拆分按需加载

treeshaking代码减重

避免长任务

requestAnimationFrame和repuestIdleCallback进行时间调度

v8编译原理(代码优化)

解析js代码成抽象语法树-》字节码-》机器码

编译过程会进行优化

运行时可能会发生反优化

v8内部优化

脚本流:边下载边解析

字节码缓存:常用的字节码会存起来(这个文件用到其他的文件也用到的参数)

函数懒解析:先解析用到的

对象优化(迎合v8进行优化)

保证对象初始化顺序一致(对象初始化时v8会生成隐藏属性以便后续复用并且是按照顺序排序的)

不要直接赋值对象新属性(追加的属性需要通过描述数组间接查找)

使用数组代替类数组(v8会对数组进行优化)比如先将类数组转化成数组

避免读取数组越界(比如for循环多查找1个下标会照成性能相差6倍)

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei456学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。