未加星标

Web性能优化随笔

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

谈到web性能优化,一般我们可以把它分为两个部分来讲,页面加载(Page Speed)和页面渲染(Page Performance)。

页面加载 加快服务器脚本的计算速度 动态内容缓存 数据缓存 动态内容静态化 选择适合的web服务器软件(Apache、nginx等) 数据库优化 等等 压缩源码和图片 Js 混淆压缩 CSS 普通压缩 JPG 根据具体质量压缩到50%~70% PNG 色彩压缩、去除一些格式信息等 选择合适的图片 颜色较多,则使用JPG格式 颜色较少,则使用PNG格式 尽量使用WebP、SVG

总之就是,尽量减少每一个资源的体积

合并静态资源

合并CSS、javascript和小图片

尽量减少同一域下的HTTP请求数

开启服务器短的Gzip压缩

Gzip开启以后会将输出到用户浏览器的数据进行压缩的处理,这样就会减小通过网络传输的数据量,提高浏览的速度。所以Gzip对文本资源非常有效。

使用CDN

一些公用的静态资源(比如jquery、angular、bootstrap等)。使用这些公用的静态资源一方面可以增加页面文件并发下载量,另一方面还能和其他网站共享这些缓存。

尽可能缓存静态资源

尽可能延长静态资源的缓存时间,不但能使频繁访问网站的用户更快的访问,还能减轻服务器压力。至于静态资源的更新,则可以结合 修改文件名和+版本号 的方式来确保资源更新时,用户会加载到新的内容。

尽可能将CSS文件放在页面头部,JavaScript放在页面底部

应为javascript在加载的时候会出现阻塞,所以为避免出现阻塞页面渲染,让页面页面出现长时间空白,尽量将Javascript文件放在页面底部。

页面渲染 关键渲染路径
Web性能优化随笔

上图是浏览器渲染的关键路径,首先,让我们从浏览器解析一个页面开始吧。

转化 : 浏览器从磁盘或网络读取 HTML 的原始字节,浏览器会将这段原始文件按照相应编码规范进行解码(现在一般为 utf-8)。 符号化 : 根据 W3C 标准转化为对应的符号(一般在尖括号内)。 DOM 构建 :HTML 解析器会解析其中的 tag 标签,生成 token ,遇到 CSS 或 JS 会发送相应请求。HTML 解析时阻塞主进程的,CSS 一般也是阻塞主进程的(媒体查询时例外),也就是说它们在解析过程中是无法做出响应的。而 JS 手动添加 async 后达到异步加载,根据 token 生成相应 DOM 树。 CSSDOM 构建 :添加 CSS 样式生成 CSSDOM 树。 渲染树构建 :从 DOM 树的根节点开始,遍历每个可见的节点,给每个可见节点找到相应匹配的 CSSOM 规则,并应用这些规则,连带其内容及计算的样式。 样式计算 :浏览器会将所有的相对位置转换成绝对位置等一系列的样式计算。 布局 :浏览器将元素进行定位、布局。 绘制 :绘制元素样式,颜色、背景、大小、边框等。 合成 :将各层合成到一起、显示在屏幕上。
Web性能优化随笔

如果我们是做一个动画,一般会用 JS 更改相应样式,接着浏览器就会经历 JS 运行、样式计算、布局、绘制、合成等多个重要步骤(后面还会讲到这个步骤实际过程中可以更长或者更短)。那么要做的优化就是在这几个步骤中进行优化并且尽量去掉中间的耗时步骤。


Web性能优化随笔
优化JavaScript的执行 函数的输入事件处理 优化处理 样式计算 减小选择器的复杂性 减少样式的计算量 布局 避免触发布局 使用Flexbox布局 避免强制同步布局事件 避免快速连续的布局 绘制 提升移动或渐变元素的绘制层 仔细规划动画和简化绘制的复杂度 合成 使用transform/opacity实现动画效果 管理渲染层、避免过多数量的层

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: 页面,浏览器,CSS,样式,渲染,静态,缓存,压缩,布局,加载,绘制,资源,优化,解析
分页:12
转载请注明
本文标题:Web性能优化随笔
本站链接:https://www.codesec.net/view/604973.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(19)