【前端优化】前端常见性能优化

栏目: CSS · 发布时间: 4年前

内容简介:web前端本质上是一种GUI软件(图形用户界面—采用图形方式显示的计算机操作用戶介面)深入理解http请求的过程是前端性能优化的核心浏览器的一个请求从发送到返回都经历了什么

前言:

web前端本质上是一种GUI软件(图形用户界面—采用图形方式显示的计算机操作用戶介面)

性能time=下载资源time+服务响应time(api)+浏览器渲染time
网络静态 — 50% 首屏性能-首屏渲染时间要在 1s之内

优化点1:资源请求

深入理解http请求的过程是前端性能优化的核心

浏览器的一个请求从发送到返回都经历了什么

http://www.zyy1217.com/2017/0...

浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求;

服务器交给后台处理完成后返回数据,浏览器接收文件(HTML、JS、CSS、图象等)

浏览器对加载到的资源(HTML、JS、CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM)载入解析到的资源文件,渲染页面,完成

【前端优化】前端常见性能优化

1.dns是否可以通过缓存减少dns查询时间

— dns缓存/浏览器缓存查询/本地host查询/服务来查询

DNS查找过程------20ms

通过缓存,来减少这种查找功能

将网址转化为计算机理解的IP地址—通过IP来查找

【前端优化】前端常见性能优化

2.cdn服务(内容分发网络)网络请求的过程走最近的网络环境

什么是CDN—解决网络拥堵---需要添加服务器--靠money解决

【前端优化】前端常见性能优化

3. 相同的静态资源是否可以缓存

前端:本地 — 添加Expire/Cache-Control头

【前端优化】前端常见性能优化

使用特殊的字符串---来标识某个请求资源版本

请求资源---浏览器tag和服务器tag一样---返回304---信息没有被修改--可以直接使用本地缓存

配置etag可以减轻服务器的压力

【前端优化】前端常见性能优化

能否减少请求http请求大小? — 合并压缩

4.启用Gzip压缩 ---在服务器端配置

Gzip--思想:先把文件放在服务器上进行压缩,浏览器会自动的解压缩

这些文本文件都应被压缩:

【前端优化】前端常见性能优化

减少http请求— 合并文件

服务端渲染 — Vue

前端:

减少HTTP请求,减少HTTP请求大小

合并压缩常见:html/css/js/图片

html压缩 — goole

在HTML中不显示的字符,包括空格,制表符,换行符等,还有一些其他意义的字符,如HTML注释也可以被压缩

大厂有意义

google的流量,占到整个互联网的40%

预计2016年全球网络流量将会达到1.3ZB(1ZB = 10^9TB)

那么google在2016年的流量就是1.3ZB * 40%

如果google每1MB请求减少一个字节

每年可以节省流量近500TB

Webapack — html-webpack-plugin

【前端优化】前端常见性能优化

css压缩

无效代码删除+css语义合并(相同样式代码)

Webpack css-loader

Js压缩混乱 — 安全性

无效字符的删除

剔除注释

代码语义的缩减和优化 var a = 1, var a=2, var a=3,

代码保护

Webpack — UglifyJSPlugin

文件合并 —

文件与文件之间有插入的上行请求,增加了N-1个网络延迟

【前端优化】前端常见性能优化

文件合并弊端:

首屏渲染问题 合并文件太大,造成慢

缓存失效问题 标记 md5戳 只要有一个变动 则失效 a,b,c三个js合并

压缩规则:

公共库合并 业务代码不合并 公共库合并

不同页面的各自合并 异步加载组件,不同页面单独打包,监听路由变化,自动下载

Webpack — require.ensure([], callback)

http://www.cnblogs.com/rubylo...

Webpack — 指定entry就是一个打包的入口

entry:{

index:["./src/index.js","./src/main.js"]

}

图片压缩

主要: 降低色彩点数 + 肉眼不可见

【前端优化】前端常见性能优化

Png8/png24/png32

png8 —— 256色 + 支持透明

png24 —— 2^24色 + 不支持透明

png32 —— 2^24色 + 支持透明

不同图片使用不同的业务场景 — 手淘

jpg有损压缩,压缩率高,不支持透明大部分不需要透明图片的业务场景

Png支持透明,浏览器兼容好, 大部分需要透明图片的业务场景

webp压缩程度更好,在ios webview有兼容性问题,安卓全部/safari no/更优的图像数据压缩算法

svg矢量图代码内嵌相对较小,图片样式相对简单的场, 图片样式相对简单的业务场景

图片优化方案

Css雪碧图— backgroudPosition/图片大小很大 丢包 fb/需求页面

Image inline base64 webpack

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
    }
  ]
}

矢量图svg内嵌标签(dom渲染,无请求)/iconfont(svg/png)

svg标签 内置属性方法 只能花颜色单一,曲线不复杂

https://developer.mozilla.org...

tinypng.com

优化点2:浏览器渲染

http://taligarsiel.com/Projec... how bowser work

浏览器拿到资源后怎么工作?

拿到是一个html文件— 里面内嵌了很多css.js.静态资源链接

Html渲染特点:顺序执行、并发加载(同一域名加载限制)

并发加载: result: 10 in IE 8, 6 in Firefox 3+ and Chrome 5+

【前端优化】前端常见性能优化

浏览器会解析三个东西:

(1) HTML/SVG/XHTML,解析这三种文件会产生一个 DOM Tree。

(2) CSS,解析 CSS 会产生 CSS 规则树。

(3) Javascript脚本,v8引擎,主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree.

载入后马上执行,执行时会阻塞页面后续的内容(包括页面的渲染、其它资源的下载 — 视浏览器内核为定)

Dom解析:

最先请求 字节 字符 词法分析 dom树

自上而下 边下载边渲染 不断重绘回流

DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点

css解析 #nav li 去找所有的li,然后再去确定它的父元素是不是#nav

【前端优化】前端常见性能优化

Render tree结构不等同于dom树

display:none 的东西就没必要放在渲染树中/<head>标签

网页中有哪些节点、各个节点的CSS定义以及他们的从属关系

Layout计算出每个节点在屏幕中的位置

绘制 遍历render树,并使用UI后端层绘制每个节点

【前端优化】前端常见性能优化

解析完一部分内容就显示一部分内容,解析、渲染、http请求并行

名词解释:

com.atlassian.confluence.content.render.xhtml.XhtmlException: Missing required attribute: { http://atlassian.com/resource... }value

回流必将引起重绘而重绘不一定会引起回流

Css/js的位置 为什么这么重要,链接放在那里无所谓吗?

【前端优化】前端常见性能优化

css阻塞

Css — head — 阻塞页面渲染(首屏 — 合并文件)— 白屏,闪屏

Css — 阻塞js执行/不阻塞js加载 Html-preload-scanner — 查查 边下边渲染

原因:浏览器线程 — GUI渲染线程与javascript线程互斥

javascript执行依赖dom和css 动态修改

【前端优化】前端常见性能优化

结论:css一般放在头部

Js阻塞

直接引入js阻塞页面渲染 script

js不阻塞资源加载, — 顺序执行 阻塞后续js执行 按文档结构

Webkit Html-preload-scanner 预加载

执行前先暂停,去扫描有没有其他资源需要加载

解决方法

defer — IE独有

IE并行下载js文件、整个DOM装载完毕执行、多个defer的<script>在执行时也会按照其出现的顺序

【前端优化】前端常见性能优化

js一般放在页面最尾部

浏览器内核常驻线程:

【前端优化】前端常见性能优化

Q;

1.多个js的加载顺序

顺序执行

加载后立即执行并阻塞渲染

2.cache-control的参数

缓存请求指令:

Cache-Control: max-age=<seconds>

Cache-Control: max-stale[=<seconds>]

Cache-Control: min-fresh=<seconds>

Cache-control: no-cache

Cache-control: no-store

Cache-control: no-transform

Cache-control: only-if-cached

缓存响应指令

Cache-control: must-revalidate

Cache-control: no-cache

Cache-control: no-store

Cache-control: no-transform

Cache-control: public

Cache-control: private

Cache-control: proxy-revalidate

Cache-Control: max-age=<seconds>

Cache-control: s-maxage=<seconds>

3.chrome独有 Html-preload-scanner 预加载

在WebKit中,预加载扫描器指的是一个副解析器,当HTML主解析器被一个同步的script标签阻塞时,预加载扫描器就会启动.然后,它会马上找出接下来即将需要获取的资源(比如样式表,脚本,图片等资源)的URL,然后尽可能早的发起网络请求,而不用等到主解析器恢复运行,从而提高了整体的加载时间


以上所述就是小编给大家介绍的《【前端优化】前端常见性能优化》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

密码朋克

密码朋克

[澳] 朱利安·阿桑奇 / Gavroche / 中信出版社 / 2017-10 / 42.00元

互联网已经在世界各地掀起了革命,然而全面的打击也正在展开。随着整个社会向互联网迁移,大规模监控计划也正在向全球部署。我们的文明已经来到一个十字路口。道路的一边通往一个承诺“弱者要隐私,强 者要透明”的未来,而另一边则通往一个极权的互联网,在那里,全人类的权力被转移给不受问责的间谍机构综合体及其跨国公司盟友。 密码朋克是一群倡导大规模使用强密码术以保护我们的基本自由免遭攻击的活动家。维基解密的......一起来看看 《密码朋克》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具