前端笔记-201808

1、图片懒加载（jQuery实现）

参考：https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000

在网页中，常常需要用到图片，而图片需要消耗较大的流量。正常情况下，浏览器会解析整个HTML代码，然后从上到下依次加载<img src="xxx">的图片标签。如果页面很长，隐藏在页面下方的图片其实已经被浏览器加载了。如果用户不向下滚动页面，就没有看到这些图片，相当于白白浪费了图片的流量。所以，淘宝、京东这些流量非常巨大的电商，商品介绍页又必须有大量的图片，因此，这些页面的图片都是“按需加载”，即用户滚动页面时显示出来的时候才加载图片。当网速非常快的时候，用户并不能感知懒加载的动作，既省流量又不影响用户浏览。

<img src="/static/loading.gif" data-src="http://真正的图片地址/xxx.jpg">

var globalFn = {
    // 懒加载图片(data-src属性存放真正图片路径)
    lazyLoadImgs: function() {
        var lazyImgs = $('img[data-src]');
        if (lazyImgs.length > 0) {
            var wtop = $(window).scrollTop();
            var wheight =$(window).height();
            for (var i = 0; i < lazyImgs.length; i++) {
                var $img = $(lazyImgs[i]);
                if ($img.offset().top - wtop < wheight) {
                    $img.attr('src', $img.attr('data-src'));
                    $img.removeAttr('data-src');
                }
            }
        }
    }
};
globalFn.lazyLoadImgs();
$(window).scroll(globalFn.lazyLoadImgs);

页面显示的图片是一个gif加载动画。当页面滚动时，如果图片出现在屏幕中，就利用jQuery把<img>的src属性替换为data-src的内容，浏览器就会实时加载。lazyLoadImgs函数最后要手动触发一次，因为页面显示时，并未触发scroll事件。如果图片已经在可视区域内，这些图片仍然是loading状态，需要手动触发一次，就可以正常显示。

2、ie8兼容

location.origin不兼容IE8，替换成location.protocol + ‘//‘ + location.host

如https://www.baidu.com/和http://localhost:8000/users：

     

3、图片处理

<img class="banner-img" src="xxx" alt="xxx" onerror="this.src='default-img.jpg'">

当图片路径不对时，onerror 事件会触发，图像加载发生错误，使用默认图片代替显示不了的图片。该方式存在一个问题：如果默认图片也不存在，会循环触发 onerror。因此需要控制onerror事件不会循环触发。

<img class="banner-img" src="xxx" alt="xxx" onerror="this.onerror='';this.src='default-img.jpg'">

4、cookie

 Cookie 是一些数据, 存储于你电脑上的文本文件中。Cookie可以达到真正全局变量的要求（跨页面全局变量），网站不同页面跳转时cookie值不会因为页面刷新而丢失。 cookie是浏览器 提供的一种机制，它将document 对象的cookie属性提供给JavaScript。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。 

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。 
（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。 
（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。 
（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。 
（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。 

当然，上述应用仅仅是cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种： 
（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能； 
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的； 
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除； 
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。 

Cookie 以名/值对形式存储，如username=John Doe。JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

• 设置cookie

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：document.cookie="userId=828"; 如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：document.cookie="userId=828; userName=hulk";

设置了新的 cookie，旧的 cookie 不会被覆盖。

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。不同的路径下可以存在同名的cookie。

•  修改cookie（ 类似于创建 cookie）

document.cookie="userId=828"; document.cookie="userId=800"; （先设置cookie里userId为828,，再将userId修改为800）。注意：cookie的覆盖只存在于相同的域名和路径。

if (cid != '') {
    document.cookie = 'cid=' + cid + '; path=/';
}

• 获取指定名称的cookie值

getCookie: function(name) {
    var cookie = document.cookie;
    var arr = cookie.split('; ');
    for(var i = 0; i < arr.length; i++) {
        var coupleArr = arr[i].split('=');
        if (coupleArr[0] == name) {
            return (coupleArr[1] || '');
        }
    }
    return '';
}

 大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去

5、自定义滚动条，适用于Chrome

.news-list {
    overflow: auto;
    &::-webkit-scrollbar {
        background: #0a2560;
    }
    &::-webkit-scrollbar-thumb {
        background: #cbb878;
        width: 14px;
        border-radius: 7px;
    }
}

6、重定向（Http状态码301和302）

301 Moved Permanently 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。

302 Found 请求的资源现在临时从不同的URI响应请求。

详细来说，301和302状态码都表示重定向，就是说浏览器在拿到服务器返回的这个状态码后会自动跳转到一个新的URL地址，这个地址可以从响应的Location首部中获取（用户看到的效果就是他输入的地址A瞬间变成了另一个地址B）——这是它们的共同点。他们的不同在于：301表示旧地址A的资源已经被永久地移除了（这个资源不可访问了），搜索引擎在抓取新内容的同时也将旧的网址交换为重定向之后的网址；302表示旧地址A的资源还在（仍然可以访问），这个重定向只是临时地从旧地址A跳转到地址B，搜索引擎会抓取新的内容而保存旧的网址。

“http://gameup.58game.com/”永久重定向“https://gameup.58game.com/”

“http://ehome-eas.stnts.com/portal/main.jsp”临时重定向“http://ehome-eas.stnts.com:80/eassso/login?service=http%3A%2F%2Fehome-eas.stnts.com%3A80%2Fportal%2Fmain.jsp”（未登陆用户访问网站主页重定向到登录页面）

• 301适合永久重定向

　　301比较常用的场景是使用域名跳转。比如，我们访问 http://www.baidu.com 会跳转到 https://www.baidu.com。

• 302用来做临时跳转

　　比如未登陆的用户访问用户中心重定向到登录页面；访问404页面会重定向到首页。

• 301重定向和302重定向的区别

　　302重定向只是暂时的重定向，搜索引擎会抓取新的内容而保留旧的地址，因为服务器返回302，所以，搜索搜索引擎认为新的网址是暂时的。而301重定向是永久的重定向，搜索引擎在抓取新的内容的同时也将旧的网址替换为了重定向之后的网址。

7、ps切图（jpg、png8、png24）

• png8和png24的区别如下：

1.“PNG8”是指8位索引色位图，“PNG24”是24位索引色位图。

2.每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；

3.每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多达1600万；所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；

4.png8有1位的布尔透明通道（要么完全透明，要么完全不透明，不支持半透明），png24则有8位（256阶）的布尔透明通道（所谓半透明）。 png8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。

• png8、png24、gif、jpg

常见的png分为png8和png24； jpg则是由百分比来调整压缩率。通常情况下的体积由大到小来：png24>jpg(100%)>gif≈png8

但是对于一张图的质量来说并不是体积越大显示效果越好，正因为如此才使得我们可以用最小的体积来展现出最佳的显示效果。

png24属于一种无损压缩格式，支持约1600万色，因此基本能够完完全全的表现出原图的一切细节，当然这样的代价就是图片体积会非常的大。

jpg属于有损压缩格式，牺牲了一定的画质，但却非常好的控制住了图片的体积。最让人称赞的是在图片不是特别锐利的情况下，图片质量基本能够和png24看齐，体积却小了png24好多倍。

gif和png8仅支持256色，这就意味着你不能用它去表现特别丰富的画面，他们的优势就是图片的体积非常的小。

• ps切图时应遵循：

1.色彩丰富的、大的图片切成jpg的；
2.尺寸小的，色彩不丰富的和背景透明的切成gif或者png8的；
3.半透明的切成png24。