乐趣区

关于javascript:前端优化总结

根本规定

  • css 放到 <head> 中
  • js 放到底部 </body> 后面
  • 内联加载快
  • 外置能够被复用,能够被缓存

浏览器并发数

Browser HTTP1.0 HTTP1.1
IE6,7 2 4
IE8 6 6
Firebox 6 6
Safari 4 4
Chrome 6 6
Opera 4 4

图片

  1. css 雪碧图

    长处

    • 缩小加载网页图片时对服务器的申请次数
    • 能缩小图片的字节, 比多张图片字节更小。
  毛病
  - 保护比拟麻烦
  - 自适应屏幕下,容易呈现背景断裂
  - 元素的地位,须要计算
  1. 图片品质优化

    • 如果是色彩丰盛的图片,个别抉择 jpg
    • 如果是动画图片,个别抉择 gif
    • 如果须要清晰图片或通明图片,个别抉择 png 并尽量应用 png 8
  2. 图片压缩(tinypng)
  3. 应用更小更快更强,新一代图片格式 WebP

     WebP 是谷歌在 10 年推出一种新型图片格式,最早也是利用在谷歌产品中,谷歌公布的 Android Studio 2.3 正式版中就包含对 WebP 反对的更新,在实测中,webp 格局比 jpg 格局减小约 20%。这对优化用户体验,缩小 CDN 带宽耗费有很好的成果,但并不是所有浏览器都反对 webp,所以为了应用 webp,须要做一点兼容性的工作。
  4. base64:

缩小 http 申请,字节小图可应用。

  1. iconfont:

长处太多,实用小图标,大小色彩可变。罕用 icon 无需设计。iconfont 库资源丰盛

  1. 图片提早加载(懒加载)

CSS

  1. css 选择器:从右到左匹配
  2. 尽量少应用计算属性,如 calc()、expression 等
  3. 不要应用 @import
  4. 重绘和重排
    重绘(repaint)、重排(reflow)

repaint:屏幕的一部分进行了重画,比方某个 css 中扭转背景色,元素尺寸没有变。
reflow:任何一个元素的尺寸产生了变动,须要从新验证并计算 render tree,就会造成重排。

常见引起重排的操作:

  • js 增加或删除元素
  • 元素大小产生扭转(border、padding、width)
  • 浏览器窗口大小扭转
  • 元素地位扭转
  • 设置 style 属性
  • 页面首次渲染

常见引起重绘的操作:

color、background、background-position、box-shadow、border-radius 等。

优化重排和重绘

  • 缩小 DOM 操作
  • 利用增加 class 批改款式
  • 动画应用 CSS 动画,开启 GPU 减速
  • 不要应用 table
  • 能够让其脱离文档流,position:absolute,fixed

JavaScript

  1. 压缩、合并、混同
  2. 应用 async 或 defer
  3. 缩小全局变量应用,慎用闭包
  4. 应用事件委托
  5. 防止应用 for in 循环
  6. 服务器端渲染
  7. 缩小 DOM 操作

能够参考 —- 雅虎 35 条军规

浏览器缓存

  1. 浏览器缓存机制

浏览器缓存机制是指通过 HTTP 协定头里的 Cache-Control(或 Expires)和 Last-Modified(或 Etag)等字段来管制文件缓存的机制。
Cache-Control 用于管制文件在本地缓存无效时长
Last-Modified 是标识文件在服务器上的最新更新工夫。

  1. Web Storage

分为 sessionStorage 和 localStorage
通过存储字符串的 Key/Value,存储大小为 5MB(Cookies 4KB)

  1. Web SQL Database

又名 html5 本地数据库,用户能够像拜访本地文件那样轻松地对本地数据库进行间接拜访
目前根本曾经被放弃, 新一代的前端存储计划 –indexedDB

  1. Application Cache

离线缓存,可在没有因特网连贯时进行拜访
HTML5 的离线存储是基于一个 manifest 文件 (缓存清单文件,后缀为.appcache) 的缓存机制(不是存储技术),通过这个文件上的清单解析离线存储资源,这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态时,浏览器会通过被离线存储的数据进行页面展现。

其它

  1. 动态文件存储到 CDN 上
  2. 防止重写向
  3. 少用 iframe,阻塞 onload,占用并发
  4. 降级 http 为 http2.0

下次面试官问你时,不要只说外表的那几个了~

  • 浏览器缓存机制
退出移动版