xing-chuan

如何提升网站的访问速度
如果你的网站打开时间超过 5 秒种,那你的用户会离开你。我们站在前端的角度, 都可以做哪些优化呢?来自谷歌的 We...
扫描右侧二维码阅读全文
27
2018/06

如何提升网站的访问速度

如果你的网站打开时间超过 5 秒种,那你的用户会离开你。
我们站在前端的角度, 都可以做哪些优化呢?

来自谷歌的 Web 优化实践

  1. 避免资源 404 请求
  2. 避免CSS @import

import 依赖关系, 加载完一个再加载另一个

  1. 避免使用document.write
  2. 合并、压缩 CSS, JS文件
  3. 精灵图整合图像, 字体图标代替部分图片
  4. 延迟 JavaScript 加载
  5. 启用Keep-Alive
  6. 将小的CSS和JavaScript代码内嵌到HTML中
  7. 利用浏览器缓存不长变更的资源
  8. 尽量减少DNS查询次数
  9. 尽量减少重定向
  10. 优化样式表和脚本的顺序
  11. 避免JavaScripts阻塞渲染
  12. 缩小原始图像
  13. 指定图像尺寸

来自雅虎的 Web 优化实践

  1. 内容优化
  • 避免资源 404 请求
  • 减少 HTTP 请求
  • 减少 DNS 查找
  • 减少重定向
  • 预加载组件
  • 延迟加载脚本和内容
  • Ajax 缓存文件资源
  • 减少 DOM 元素数量
  • 根据域名划分页面内容
  • 最小化 iframe 数量
  1. 服务器优化
  • 使用 CDN 内容分发网络
  • 添加Expires或Cache-Control信息头
  • Gzip 压缩
  • 设置 Etag , 判断服务器与浏览器缓存中内容的一致性
  • 提前刷新缓冲区
  • 对Ajax请求使用GET方法
  • 避免空的 src
  1. cookie 的优化
  • 减少 cookie 的大小
  • 针对Web组件使用域名无关的Cookie ( 突破 cookie 大小的限制 )
  1. CSS 优化
  • 将CSS代码放在HTML页面的顶部
  • 避免使用CSS表达式
  • 使用<link>来代替@import
  • 避免使用Filters
  1. JavaScript 优化
  • 将JavaScript脚本放在页面的底部
  • 将JavaScript和CSS作为外部文件来引用
  • 缩小JavaScript和CSS
  • 删除重复的脚本
  • 最小化DOM的访问
  • 开发智能的事件处理程序
  1. 图像优化
  • 优化图片大小
  • 指定图片大小
  • 使用精灵图
  • favicon 尽量小, 可缓存
  1. 针对移动优化
  • 保持组件大小在 25KB 以下, iPhone 不能缓存 25KB 以上文件
  • 打包组件
最后修改:2018 年 06 月 30 日 12 : 27 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论