| 今日份的学习

今日份的学习(2)

Ajax

什么是ajax

ajax = 异步JavaScript 和 XML

简介：ajax是一种用于创建动态页面的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对页面的某部分进行更新。而传统的网页(不使用ajax)如果需要更新内容，必需重载整个页面。

ajax工作原理

创建ajax的过程

XMLHttpRequest是ajax的基础，用于在后台与服务器交换数据。

  • 创建XMLHttpRequst对象
1
2
var xmlhttp = new XMLHttpRequest()  //IE7及以上
var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')  //IE5 和 IE6

  • 打开连接

    1
    xmlhttp.open(method,url,async)
    • method：请求的类型，如：GET、POST
    • url：文件在服务器上的位置
    • async：true(异步)或false(同步)

  • 向服务器发送请求

    1
    xmlhttp.send(string)
    • GET请求：
    1
    xmlhttp.send()
    • POST请求
    1
    2
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    xmlhttp.sent("fname=Bill&lname=Gates")

    补充：使用GET还是POST？与post相比，get更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，推荐使用post。1.无法使用缓存文件(更新服务器上的文件或数据库)2.向服务器发送大量数据(post没有数据量限制)3.发送包含未知字符的用户输入时，post比get更稳定也更可靠。

  • 接收服务器响应

    当请求被发送到服务器时，我们需要执行一些基于响应的任务。

    XMLHttpRequest对象有三个重要的属性：

    • Onreadystatechange: 存储函数(或函数名)，每当readyState属性改变时，就会调用该函数

    • readyState: 存有XMLHttpRequest的状态信息，从0到4发生变化

      • 0：请求未初始化
      • 1：服务器连接已建立
      • 2：请求已接收
      • 3：请求处理中
      • 4：请求已完成，且响应已就绪

    • StatusHttp状态码

      • 1xx：消息类
      • 2xx：成功
      • 3xx：重定向
      • 4xx：请求错误
      • 5xx：服务器错误

    每当readyState改变时，就会触发onreadystatechange事件，在该事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

    当readyState等于4且status为2字头或304时，表示响应已就绪：

    1
    2
    3
    4
    5
    xmlhttp.onreadystatechange = function(){
      if(xmlhhtp.readyState === 4 && xmlhttp.status < 300 || xmlhttp.status === 304){
          document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
      }
    }

  • 封装ajax函数

    GET方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function ajax(url,success,error){
        var oAjax;
        if(window.XMLHttpRequest){
            oAjax = new XMLHttpRequest();
        }else{
            oAjax = new ActiveXObject("Microsoft.XMLHTTP");
        }

        oAjax.open('GET',url,true);
        oAjax.send();
        oAjax.onreadystatechange = function(){
            if(oAjax.readyState === 4){
                if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status === 304){
                    success&&success(oAjax.responseText);
                }else{
                    error&&error(oAjax.status);
                }
            }
        }
    }

    POST方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    function ajax(url,success,error){
      var oAjax;
      if(window.XMLHttpRequest){
          oAjax = new XMLHttpRequest();
      }else{
          oAjax = new ActiveXObject("Microsoft.XMLHTTP");
      }

      oAjax.open('POST',url,true);
      oAjax.setRequestHeader('Content-type','Application/x-www-form-urlencoded');
      oAjax.send('fname=Bill&lname=Gates');

      oAjax.onreadystatechange = function(){
          if(oAjax.readyState === 4){
              if(oAjax.status >= 200 && oAjax.status < 300 || oAjax.status === 304){
                  success&&success(oAjax.responseText);
              }else{
                  error&&error(oAjax.status);
              }
          }
      }
    }

首屏加载

什么是首屏

以800*600像素的屏幕为例，当浏览器加载页面后看到第一眼的显示内容为首屏。

为什么要做首屏优化

一个页面的总加载时间要比首屏加载时间长。首屏加载时间的快慢，直接影响了用户对网站的认知度，所以首屏加载时间的长短对于用户的滞留时间的长短、用户转化率都尤为重要

首屏优化的方式

  • 尽可能的缩小webpack或者其他打包工具生成的包的大小

    • 推荐使用webpack-bundle-analyzer的分析工具
    • 安装npm install –save-dev webpack-bundle-analyzer
    • 配置在webpack.prod.conf.js中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
    plugins: [
    new BundleAnalyzerPlugin(
        {
          analyzerMode: 'server',
          analyzerHost: '127.0.0.1',
          analyzerPort: 8888, // 运行后的端口号
          reportFilename: 'report.html',
          defaultSizes: 'parsed',
          openAnalyzer: true,
          generateStatsFile: false,
          statsFilename: 'stats.json',
          statsOptions: null,
          logLevel: 'info'
        }
      ),
    ]

  • 使用服务端渲染的方式

  • 使用预渲染的方式

  • 使用gzip减小网络传输的流量大小

  • 按照页面或者组件分块懒加载

cookie、session storage、local storage

  • 简要：

    • 相同点：他们都是在浏览器端存储的数据

    • 不同点：cookie会发送到服务器端，但其余两个不会

  • 详情：

    • cookie：内存比较小，并且有条数限制，会被发往服务器端，用于验证用户身份等操作，被http协议携带
    • session storage：内存比较大，只存储当前窗口的内容，当窗口被关闭时就会被删除
    • local storage：内存较大，用于持久化的本地储存，除非主动删除，否则永不过期

在css中link和@import的区别

  • 相同点：link和@import都是外部引入css的方法

  • 不同点：

    • link是在加载HTML的时候同时加载，但是@import引入css是在页面完全载入之后加载
    • link是处理引入css文件之外还可以引入RSS等其他事务，@import只能引入css
    • link是XHTML，不存在兼容的问题，@import是css2.0版本提出的，不兼容低版本的浏览器
    • link支持JavaScript控制DOM修改样式，而@import不支持

关于SVG的理解

SVG(可缩放矢量图形)是基于可扩展标记语言xml，用于描述二维矢量图形的一种图形格式。特点如下：

  • 任意缩放：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等
  • 文本独立：svg图像中的文字完全独立于图像，文字保留可编辑和可搜索的状态。也不会有字体限制，即使用户系统没有安装某一字体，也会看见和他们制作时完全相同的画面
  • 较小文件：总的来讲SVG文件比GIF和JPEG格式的文件要小很多，因而下载也很快
  • 超强显示效果：svg图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率
ESC