zoukankan      html  css  js  c++  java
  • 前端优化方案

    网络通讯方面

    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引入
    人是在一天天内提高的,只有不断努力才不会被淘汰!
  • 相关阅读:
    js 实现页面局部(或图片)放大功能(vue)
    momentjs 使用总结
    VUX的使用方法(以弹出框为例)
    vue alert插件(标题为图片)(自写)
    vue 五星评价插件
    ES6 学习笔记(基础)
    SVG
    纯 CSS 实现实心三角形和空心三角形
    selectedIndex和onchange事件
    DOM文档获取和简介
  • 原文地址:https://www.cnblogs.com/bais/p/9083728.html
Copyright © 2011-2022 走看看