Web前端性能优化(一)

Unsplash

####1. 静态资源的压缩与合并

我们在开发的时候会习惯缩进和写注释,方便我们在日常的维护,但将代码上传至服务端后,我们完全可以把那些空格、制表符、换行符进行压缩,以此减少请求资源的大小;同样的,我们在服务端所引用的第三方库进行合并,能减少 HTTP 的请求数量

  • 将 HTML 文件里的空格、制表符、换行符进行压缩,并剔除所有注释
  • 将 CSS 文件里的空格、制表符、换行符进行压缩,无效代码删除,CSS 语义合并
  • 将 JS 文件压缩与混乱,无效字符的删除,剔除注释,代码语义的缩减和优化(变量名过长,使用其他字符进行代替),代码保护

代码压缩可以使用 开源中国_在线工具 进行压缩,不过这种方式面对需要大量压缩的代码会显得效率低下,推荐大家使用 html-minifier 插件进行压缩,CSS 还可以使用 clean-css 进行压缩,JS 可以使用 uglifyjs2 进行压缩

在 CSS 或 JS 文件中引用第三方插件,即表明我们在引用第三方资源时需要请求大量的文件,在 keep-alive 模式下,文件与文件直接会插入上行请求,增加网络延迟,受到丢包影响会更严重,经过代理服务器时也可能会断开

在将文件进行合并前,有两个地方需要大家注意下,① 将公共库和业务库分开合并,这样的好处是,我们迭代版本的时候,只需要更新业务库即可,在 Vue, React 框架中也是作同样处理;② 若是在 Vue 或 React 项目中,还建议大家将不同页面所需要的 JS 进行合并,只有当路由到该页面的时候,才请求该页面所需要的组件

合并之后的文件要占据更多容量,所请求时间更久,若是首屏渲染依赖 JS,则会出现首次加载出现白屏的情况,这种场景一般存在于Vue,React框架使用过程中,在没有使用服务端渲染的情况下,是将整个过程通过框架进行接管的

我们在标记 JS 文件是否被更改时,通常会在该 JS 文件后加一个 MD5 戳,用来唯一标识该 JS 文件是否被更改,若是合并前的任一个文件有改动,那么合并后的整个文件缓存都会失效

文件合并的方式同样可通过在线网站或 NodeJS 进行合并,在此不再复述

####2. 图片优化

我们一般所用到的图片格式为 jpg, png, webp, svg,而不同的图片格式所对应的业务场景也不相同,jpg 格式图片为有损压缩,压缩率高,不支持透明,适用大部分不需要透明图片的业务场景;png 格式图片支持透明,浏览器兼容好,其中 png8 为 256 色,支持透明,png24 为 2^24 色,不支持透明,png32 为 2^24 色,支持透明;webp 格式图片压缩程度好,在 iOS webview 中有兼容性问题,推荐在 Android 中使用该格式图片;svg 格式图片,将图片内容内嵌到 HTML 中,通过使用 iconfont 解决 icon 问题,减少 HTTP 请求,适用于图片样式相对简单的场景

webp 为谷歌开发的图片格式,其优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 jpeg 和 png 上的转化效果都非常优秀、稳定和统一

雪碧图 CSS sprite 就是讲网站上用到的一些 icon 整合到一张单独图片中,通过 background-position 属性来显示相对应的图片,使用雪碧图的优点为,减少你的网站 HTTP 请求数量,相对而言,加载比较慢

同样推荐几个图片优化的在线网站, 图片压缩 TinyPNGPNG 转换 Webp ,CSS Sprite 制作

####3. 一个网站在浏览器端是如何进行渲染的呢?

我们在浏览器地址栏输入网址之后,浏览器会对我们输入的 url 进行解析,并对相应的 IP 地址发起请求,请求所返回的是一段 HTML 文档,浏览器对该段 HTML 文档从上到下进行词法分析,其具体过程为:遇到 HTML 标签时,会生成一个 Token,不同类型的标签会解析成不同的 Token,根据 Token 产生对应的节点 Node,最终这些节点根据其嵌套关系,添加到 DOM 树上

在词法分析的过程中,HTML 文档中会通过 <link> 标签进行 CSS 资源引入,此时浏览器就会 **并发** 的向互联网或 CDN 请求相关的静态资源,请求回来之后的 CSS 资源同样会被浏览器解析,根据选择器进行匹配并生成相应的 CSSOM 规则树,跟 DOM 树相结合生成渲染树 **Render Tree**,从而进行布局 **Layout** 和绘制 **Paint**,利用渲染树的信息,计算渲染树中所有节点在页面上的位置和大小,填充 Layout 中的具体内容和样式

我们在 HTML 中所引入的外部资源,虽然是并发去请求的,但对于单个域名是存在并发上限的,即并发请求数是有一个上限的,这就导致很多资源没有全部做到并发请求,所以我们在生产环境中,常常会设置 3 到 4 个 CDN 域名

####4. 阻塞关系

CSS 和 JS 的加载都会引起阻塞,其中,CSS 通过 <link> 方式在 <head> 中进行引用,会阻塞页面的渲染;CSS 不阻塞 JS 的加载,但会阻塞 JS 的执行,其原因在于 JS 有可能进行 DOM 操作,涉及到 CSS 样式的修改,该操作基于所引入的 CSS 样式基础上进行的

直接引入的 JS 会阻塞页面的渲染,JS 在执行过程中运行 document.write,修改相关的文档结构,阻塞后面节点的创建,影响后续的文档结构渲染和分析,可以通过 defer属性 和 async 方式引入,避免这种情况出现,如果 JS 还操作了 CSSOM,而正好相关的 CSS 资源还没有引入,浏览器甚至会延迟 JS 的执行和 DOM 树的构建,直到完成其 CSSOM 的下载和构建,因此我们在引入 JS 资源时需要遵循两个原则:1. CSS 资源优先引入;2. JS 资源于页面底部引入,并尽量少影响 DOM 树的构建

Webkit 具有预先扫描器和预资源加载器的能力,执行当前 JS 代码的时候,会通过预先扫描器去扫描后面的词是否有引用到其他 JS 资源,就可以使用预先加载器并发的去请求后续资源,所以 JS 的执行不阻塞资源的加载

JS 执行在浏览器中是单线程的,所以 JS 是顺序执行并且会阻塞后续 JS 逻辑的执行,会保持我们引用的依赖关系进行执行

######End of File


行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下**喜欢**和**关注**,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美丽应用

易剪:小巧高效的文字剪藏工具

8710
来自专栏web开发

HTML5中的Web Notification桌面通知

大家在做一些浏览器端的聊天功能的时候,或者在一些网站跟在线客服咨询的时候,会看到一些消息通知的提示,常见的有浏览器标签页的闪烁和屏幕右侧的消息通知。本篇博客就在...

45960
来自专栏破晓之歌

完全媲美sublime的编辑器-Atom 原

前端可视化插件神器,配合谷歌浏览器一起使用。本质是监控文件修改,实时刷新浏览器,需要安装livereload插件和node.js插件,全局刷新

87430
来自专栏阮一峰的网络日志

窗口管理器 xmonad 教程

开发者最需要的,就是一个顺手的开发环境。 ? 每个人的偏好不一样,我的开发环境是 Fish Shell + Xfce + xmonad + Vim,已经用了好多...

409110
来自专栏数据结构笔记

python爬虫系列之 xpath实战:批量下载壁纸

我们要爬取的目标网站是:http://www.netbian.com/,这个网站长这样:

42040
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(一)

通过本文,你可以创建你的第一个Mac Application,编译并指定版本号,而且经过练习,你应该掌握:

31240
来自专栏葡萄城控件技术团队

WebStorm 常用功能的使用技巧分享

WebStorm 是 JetBrain 公司开发的一款 JavaScript IDE,使用非常方便,可以使编写代码过程更加流畅。 本文在这里分享一些常用功能的使...

29780
来自专栏散尽浮华

linux系统终端命令提示符设置(PS1)记录

PS(Prompt Sign)指的是命令提示符,在日常运维工作中为了方面操作管理,有时会设定PS1环境变量。 废话不多说,下面开始记录下Linux中PS1设置 ...

38380
来自专栏石奈子的Java之路

原 Intellij idea2017编辑

35560
来自专栏腾讯NEXT学位

小程序初学者必读——小程序的简单入门

23930

扫码关注云+社区

领取腾讯云代金券