web网页性能优化总结

  1. 对HTML、CSS、JS文件压缩,减少请求时流量传输。(如html-minifier、clean-css、ugligyjs)
  2. 文件合并,减少http请求次数,但会存在首屏渲染时间变长的问题。
  3. 对图片进行优化。
    3.1 png8/png24/png32 区别

png8 -- (2^8)256色 + 支持透明
png24 -- 2^24色 + 不支持透明
png32 -- 2^24色 + 支持透明

      3.2 不同的图片格式对应的使用场景

jpg 有损压缩,压缩率高,不支持透明
png 支持透明,凌岚气兼容好。
webp 压缩程度最好 但在ios webview有兼容性问题。
svg矢量图,代码内嵌先对较小,但是图片样式简单。

总结:图片为透明背景时时使用png格式的图片,对图片品质要去不高时考虑压缩成png8格式的图片。当图片为不透明时考虑使用webp或jpg优先使用webp。能找到svg图片就使用svg图片(在iconfont中找);

      3.3 图片的使用方式

  • 雪碧图:优:减少http请求数量,劣:雪碧图没有加载出来时所有引用的子图片全部无法显示,因此,合成> 雪碧图时需要注意雪碧图的大小。
  • image inline:以base64为编码的形式内嵌到html中:优:减少请求数量,劣:无法复用。因此使用此方式 仅限小图标使用次数少的情况下。
  1. css与js加载机制
  • css阻塞
    css head中阻塞页面的渲染。
    css阻塞js的执行
    css不阻塞外部脚本的加载
  • js阻塞
    直接引入的js阻塞页面的渲染
    js不阻塞资源的加载
    js顺序执行,阻塞后续js逻辑的执行

补充:延迟加载js,<script src="test1.js" defer="defer"( async="async")></script>
defer:告诉浏览器立即下载,但延迟执行,包含的脚本将延迟浏览器遇到</html>标签后再执行
async:不让页面等待脚本下载和执行,从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行,不能保证脚本会按顺序执行。

5.1 当网页图片过多时使用图片懒加载。
5.2 能预见使用的图片使用图片预加载机制。

方式1: 写img标签,设置style为display:none
方式2: js中new image()对象
方式3: 使用XMLHttpRequest()请求此图片。注意存在跨域的可能性
方式4: preload库

6 重绘与回流
6.1 只触发重绘的属性:color、border-style、boder-radius、visibility、text-decoration、background...、outlint...、box-shadow
6.2 出发回流的属性:width、height、pading、margin、display、border、border-width、min-height、top、bottom、left、right、position、float、clear、text-align、font-weight、overflow、font-weight、overflow、font-family、line-height、vertival-align、white-space、font-size
6.3 利用图层分隔合理绘画回流的大小。

注意:图层的最终合成也需要渲染时间 Composite Layers time

6.4 图层的建立:

        1. 使用 3D或透视变换的css的属性。
        2. video标签会生成新图层。
        3. 用于3D(WebGL)上下文或加速2D上下文的<canvas>节点,
        4. 混合节点(如flash)
        5. 对自己的opacity做css动画或使用一个动画webkit变换的元素 6.拥有加速CSS过滤的元素

6.5 常用的创建图层的方法:transform:translateZ(0)will-change:transform
6.6 优化点:

       1. 使用translate替代top改变
       2. 用opacity替代visibility
       3. 不要一条一条的修改样式使用class预定样式然后修改dom的classname。
       4. 把dom离线后再修改样式。比如:把dom给display:none(有一次Reflow)然后修改100次再把它显示出来。
       5. 不要把DOM节点的属性值放在循环里当场循环变量。(offesetHeight这类属性的读取会触发回流。)
       6. 不要使用table布局,一次小改动会出发整个table的重布局。
       7. 动画的速度选择始终
       8. 对动画新建图层
       9. 启用GPU加速(使用transform:translate3d(x,y,z))

7 使用浏览器存储进行性能优化。

         cookie:主要用于存储用户状态,存储大小4k、需要设置expire、httponly属性可设置禁止js读写。
         LocalStorage:用于浏览器存储,大小5m。
         SessionStorage:会话级别的浏览器存储,大小5m。
         IndexedDB:用于存储大量结构话数据。
         CacheStorage:使用Service Worker将将文件存储到CacheStorage中,适用于离线应用。
  1. 缓存
  response-header: 中关于缓存的属性:
  cache-control:  
          max-age = 35600000 (浏览器(private)文件个过期时间), 
          s-maxage=35600000(代理服务器(public)的缓存时间),
          no-cache(总是会向服务器端询问是否过期),
          no-store(完全不缓存)
  ETage/if-None-Match: 对比文件的hash值来判断是否需要更新。        
  last-modified/if-modified-since: 对比询问服务器文件的最后更新时间;
  expires: Date (过期时间 http 1.0中的属性优先级很低)

状态码说明:

状态 类型 说明
200 form memory cache 不请求网络资源,资源在内存当中,一般脚本、字体、图片会存在内存当中
200 form disk ceche 不请求网络资源,在磁盘当中,一般非脚本会存在内存当中,如css等
200 资源大小数值 从服务器下载最新资源
304 报文大小 请求服务端发现资源没有更新,使用本地资源
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 资源的合并与压缩 核心:减少http请求数量(合并)减少资源请求大小(压缩) html压缩:压缩这些在文本文件中有...
    _小海绵阅读 417评论 0 0
  • 相关概念 阻塞渲染 JS下载、执行时肯定会阻塞渲染例如下图中代码,对于浏览器,接收到html文档后,解析到a.js...
    LouisJ阅读 1,096评论 0 32
  • 速记笔记markdown工具: https://pandao.github.io/editor.md/实验服务器:...
    桃花島主阅读 2,242评论 0 34
  • 观电影《狄仁杰之四大天王》后感 这部电影看了有一段了,没有我看前想象得好,但也有不少可取之处,也是可看的一部较好的...
    文H阅读 497评论 10 10
  • 第五章,公共政策规划程序。 政策规划主要包括政策目标的确定、政策方案的设计、政策方案的评估、政策方案的选择四个重要...
    不如与桑阅读 221评论 1 1