前端性能优化
帕尼尼0_0
这个作者很懒,什么都没留下…
展开
-
前端性能优化 --- 资源合并与压缩
前端性能优化学习笔记一资源压缩前端代码中,结构清晰,有一些空格换行符在开发时很有必要。但是浏览器是不需要结构清晰,而除去不必要的空格和注释可以减小代码量,减小资源请求。资源合并每个浏览器请求的过程都是非常耗时的,请求一个100KB的文件要远比请求两个50KB的文件来的快。 同时,浏览器每次的请求数是有限的,chrome是5个。 如果有6个请求,第一次请求队列的第二个请求...原创 2018-08-29 11:39:37 · 427 阅读 · 0 评论 -
前端性能优化 --- 图片优化
前端性能优化学习笔记二图片的区别jpg:有损压缩,压缩率高,不支持透明 png:支持透明,浏览器兼容好png8 —— 256色 + 支持透明png24 —— 2^24色 + 不支持透明png32 —— 2^24色 + 支持透明 webp:压缩程度更好,在ios webview有兼容性问题 svg:矢量图,代码内嵌,相对较小,图片样式相对简单的场景CSS雪碧...原创 2018-08-29 13:38:55 · 318 阅读 · 0 评论 -
前端性能优化 --- css和js的装载与执行
前端性能优化学习笔记三一个网站在浏览器端是如何进行渲染的呢?HTML渲染过程的一些特点顺序执行、并发加载用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件,浏览器根据词法分析从上往下解析html 发现<head>标签内有一个<link>标签引用外部CSS文件,浏览器又发出CSS文件的请求,服务...原创 2018-08-29 16:20:09 · 411 阅读 · 0 评论 -
前端性能优化 --- 懒加载&预加载
前端性能优化学习笔记四懒加载有些资源文件不需要在页面渲染时就缓存下来 在电商网站中,一个页面可能很长,需要加载很多张图片,这时候可以利用懒加载的策略来处理:只缓存可视区域的图片,当页面下拉时,再加载新的图片。预加载有些资源文件页面渲染时并没有引用到但是需要预先缓存下来 有这样一个情景:当某个图片hover时会变成另一张图片。而那张图片并没有被预先缓存下来,hover的一...原创 2018-08-29 18:56:36 · 534 阅读 · 0 评论