Web性能优化白皮书

109次阅读
没有评论

共计 613 个字符,预计需要花费 2 分钟才能阅读完成。

最近在准备面试,就看了许多关于 web 性能优化方面的内容,现在先把它们大概记下来,以后还会补充:

  • 压缩源码和图片:选择合适图片格式:图片颜色较多就用 jpg 格式,颜色数较少就用 png 格式,能通过服务器端判断浏览器支持 webP,就用 WebP 格式和 svg 格式; 开启服务器端 Gzip 压缩,尽量减少每一个资源的体积
  • 合并静态资源:包括 css、javascript 和小图片,如雪碧图,减少 http 请求
  • 使用 CDN:使用第三方提供的静态资源地址。一方面增加并发下载量,另一方面能够和其他网站共享缓存
    延长静态缓存时间,设置 expires、cache-control 时间、etag 标签,尽量使用强缓存。
  • css 放在页面头部,js 放在页面底部
  • 能使用原生 css 实现的样式就尽量使用原生 css,避免使用雪碧图增加请求。
  • 异步加载 js,提高首屏加载速度,其他静态资源等到用户需要时再加载。js 异步加载可以设置 script 标签 async。
  • 因为事件冒泡机制,最好使用事件代理,减少注册监听事件的 dom 数量,提高性能。
  • 第一次加载 dom 元素后将其用变量缓存,避免下次使用时再重新获取 dom 元素。
  • 使用 localStorage 缓存一些静态数据,避免去服务器查询。
  • 静态资源缓存更新,在更新的文件名后面加上 hash 值使其 url 不同而发起新的连接使其缓存更新。
  • 减少 dom 元素,可用到虚拟 dom 思想,用对象缓存 dom 树,通过 diff 算法得到一个 patch,然后最后再渲染真正的 dom。
正文完
 
西蒙
版权声明:本站原创文章,由 西蒙 2017-04-12发表,共计613字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码