码迷,mamicode.com
首页 > 其他好文 > 详细

前端优化方案

时间:2018-05-24 18:06:16      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:asc   dns   取域   script   link   优化方案   大网   odi   round   

网络通讯方面

  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引入

前端优化方案

标签:asc   dns   取域   script   link   优化方案   大网   odi   round   

原文地址:https://www.cnblogs.com/bais/p/9083728.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!