不能错过的web前端性能优化总结

wangbinke 发布于2019-08-05 18:29 / 1032人阅读

摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。

web前端性能优化主要分为以下几个板块:

加载优化

DNS预解析

合并img、css、javascript文件，减少http请求

缓存一切可缓存资源

使用长Cache

使用外联式引用css、javascript文件

压缩HTML、css、javascript文件

启用GZip

使用首屏加载(比如同构)

使用按需加载资源文件

使用滚屏记载资源文件

资源懒加载

通过Media Query加载css文件

增加Loading进度条

减少Cookie

避免重点向

图片优化

在保证图片质量的情况下，压缩图片，减少图片大小

使用Css3、svg、iconfont代替图片

首次加载不大于1024KB的图片

图片宽不大于640px(移动端)

脚本优化

减少重回和回流操作

缓存DOM元素、DOM列表长度length、属性值

使用事件委托，避免批量绑定事件

尽量使用ID选择器

使用touch事件代替click事件

使用节流函数减少性能消耗

HTML优化

css文件写在头部，javascript放在尾部

避免层级深嵌套

避免img、iframe、a等元素的空src

避免行内样式和事件绑定

大图片避免使用base64

css优化

移除空的css规则

正确使用display的属性

不滥用float

不声明过多的font-size

值为0时不要使用单位

标准化各种浏览器前缀

渲染优化

HTML使用viewport(移动端)

减少DOM节点

尽量使用CSS3 3d动画来触发GPU渲染

使用requestAnimationFrame代替setTimeInter和setTimeout

适当使用canvas动画

对于resize、mousemove事件使用节流处理，较少DOM回流和重绘次数

重点提示:

首屏加载

首屏的快速显示，可以大大提升用户对页面速度的感知，因此应尽量针对首屏的快速显示做优化，比如使用Loading等待动画、服务器渲染首屏(同构)...

DNS预解析

DNS 作为互联网的基础协议，其解析的速度似乎容易被网站优化人员忽视。现在大多数新浏览器已经针对DNS解析进行了优化，典型的一次DNS解析耗费20-120 毫秒，减少DNS解析时间和次数是个很好的优化方式。DNS Prefetching是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。

浏览器对网站第一次的域名DNS解析查找流程依次为：

浏览器缓存-系统缓存-路由器缓存-ISP DNS缓存-递归搜索

DNS预解析的实现：

用meta信息来告知浏览器, 当前页面要做DNS预解析:

在页面header中使用link标签来强制对DNS预解析:

示例

注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

PS：DNS预解析主要是用于网站前端页面优化，在SEO中的作用湛蓝还未作验证，但作为增强用户体验的一部分rel="dns-prefetch"或许值得大家慢慢发现。

云服务器 idc机房托管前端性能优化前端开发性能优化不能错过不能错过你

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60892.html

不能错过的web前端性能优化总结

摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析合并img、css、javascript文件，减少http请求缓存一切可缓存资源使用长Cache 使用外联式引用css、javascript文件压缩HTML、css、jav...

wums 2019-08-22 16:35 评论0 收藏0
不能错过的web前端性能优化总结

摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析合并img、css、javascript文件，减少http请求缓存一切可缓存资源使用长Cache 使用外联式引用css、javascript文件压缩HTML、css、jav...

宋华 2019-08-29 15:06 评论0 收藏0
zanePerfor 一款完整，高性能，高可用的前端性能监控系统，不要错过

摘要：，你好，我是，是一款最近我开发的一个前端性能监控平台，现在支持浏览器端和微信小程序段。我定义为一款完整，高性能，高可用的前端性能监控系统，这是未来会达到的目的，现今的架构也基本支持了高可用，高性能的部署。 HI!，你好，我是zane，zanePerfor是一款最近我开发的一个前端性能监控平台，现在支持web浏览器端和微信小程序段。我定义为一款完整，高性能，高可用的前端性能监控系统，这...

thursday 2019-07-24 15:56 评论0 收藏0
【回顾九月份第二周】前端你该知道的事儿

摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

sixgo 2019-08-21 16:50 评论0 收藏0
【回顾九月份第二周】前端你该知道的事儿

摘要：顺便一说，这首歌的原唱是秋田，中岛当年嗓子坏了，才有这歌。中文是直接翻译来的，作曲是秋田。一部电影春夏秋冬又一春春夏秋冬又一春是由金基德执导，金英民吴英秀金基德主演的一部韩国电影。年月日于韩国上映。原链接： http://bluezhan.me/weekly/#/9-2 1、web前端 Angular vs. React vs. Vue: A 2017 comparison 9 S...

BWrong 2019-08-05 12:09 评论0 收藏0