知识点整理(三）

1. 前端性能优化的方法？

（1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。
（2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
（4）当需要设置的样式很多时设置className而不是直接操作style。
（5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8）按需加载，将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量

2. CSS优化、提高性能的方法有哪些？

将样式表放到页面顶部
不使用CSS表达式
不使用@import
不使用IE的Filter

3. jsonp的原理

jsonp的实现原理就是，jquery中动态创建一个script元素，然后给script的scr属性赋值为ajax请求接口地址，在接口地址的后面添加一个callback的参数，参数的值就是jquery中动态生成的函数的函数名称，后台更具参数返回值
返回的结构是方法名（json值）成功后就相当于执行了一个js函数，就是ajax中success的成功后的回调函数

4. 请解释一下 JavaScript 的同源策略。

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。
它的精髓很简单：它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时，它们应该只被允许访问来自同一站点的资源，而不是那些来自其它站点可能怀有恶意的资源。
这里的同源指的是：同协议，同域名和同端口

5. 跨域有几种方法？

跨域的话我研究过的有两种方法，jsonp和CORS两种，

jsonp 的话以前比较常用一些，主要实现原理就是通过引用js的方法来获取跨域资源，通过执行js函数的方法调用回调成功的函数，

cors 的话这个比较简单一些，但是有一些兼容问题，只支持ie10+ 和现代浏览器适合用于移动端，实现原理就是在后端加上header头信息Access-Control-Allow-Origin: ＊，也可以指定域名访问Access-Control-Allow-Origin: <u>http://api.qiutc.me</u>

其他的方法暂时还没有研究过

6. 什么是Ajax和JSON，它们的优缺点。

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：
　可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
　避免用户不断刷新或者跳转页面，提高用户体验
缺点：
　对搜索引擎不友好（
　要实现ajax下的前后退功能成本较大
　可能造成请求数的增加
　跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

7. HTTP和HTTPS

HTTP 协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。

8. Ajax 是什么? 如何创建一个Ajax？

ajax是一种创建交互式网页的计算
ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

    var xhr= new XMLHttpRequest();
    xhr.open('GET','demo.url','true');
    xhr.send()
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 & xhr.status === 200) {
            console.log(responseText)
        }