前端优化方案

网络通讯方面

  1. 减少HTTP请求数
    1. 合并资源,如合并 JavaScript 文件、CSS 文件,利用 CSS Sprite 合并图片等
    2. 内联图片,data url节省了HTTP请求,但是如果这个图像在网页多个地方显示会加大网页的内容,延长下载时间。
  2. 域名提前解析,在页面中不同域名的链接需指定预取域名:<link rel="dns-prefetch" href="http://this-is-a.com">,IE9+支持
  3. 避免重定向(重定向会增加http请求的次数)
  4. cookie优化,cookie越多会导致请求头越大
  5. 启用GZIP压缩(Accept-Encoding:g-zip)
  6. 使用 CDN加速,减小服务器压力
  7. 合理利用HTTP缓存,通过设置Expires

页面渲染方面

  • 建议将 CSS 文件放在页首,以便构建 DOM 树;而将 JavaScript 文件尽量放在页面下方,防止阻塞构建 DOM 树;而 JavaScript 的 onload 事件里,不要写太多影响首屏渲染的、操作 DOM 树的 JavaScript 代码。
  • 精简 JavaScript 和 CSS 代码,并进行代码压缩,使得css和js资源更快的下载
  • 编写高效的CSS代码
  • 重要的图片或者想让用户优先看到的图片使用img标签,次要的图片使用background引入

猜你喜欢

转载自www.cnblogs.com/bais/p/9083728.html