早上看到掘金一篇译文,关于前端优化的内容,然后使用了它介绍的一个工具(https://tools.pingdom.com/)去测试了运行的网站。
结果让人有点悲伤,加载时间需要十多秒,考虑到服务器在深圳,检测点在美国也就释然了。然而,头两个F还是让人不舒服.:
Parallelize downloads across hostnames
中午的意思就是并行下载到主机,这里都是二级域名下面的资源,这个没办法实现了。
Serve static content from a cookieless domain
静态资源放到不带cookie的域下面。
这个前面已经提到了静态资源在二级域名下面。而百度统计等(这里实际就是百度统计)第三方的cookie都是全域名覆盖的,比较讨厌。所以,希望在这块下下功夫。
首先想到的是使用前端JS来控制百度的cookie,网上有一段针对cnzz的代码:
function clearCnzzCookies() { if (document.cookie.indexOf('cnzz') > -1) { var cookies = document.cookie.split(';') for (var i = 0; i < cookies.length; i++) { if (cookies[i].indexOf('cnzz') > -1) { var cookieName = cookies[i].split('=')[0]; document.cookie = cookieName + "=deleted; expires=" + new Date(0).toUTCString(); console.log(cookieName + "removed"); } } } }
其实这里对比着改成针对百度的就可以了。业务网站的百度统计cookie:
最后一个是疑似百度的,不管这么多了,直接干掉:
function deleteCookies(deleteCookie) { if (document.cookie.indexOf('deleteCookie') > -1) { var cookies = document.cookie.split(';') for (var i = 0; i < cookies.length; i++) { if (cookies[i].indexOf('deleteCookie') > -1) { var cookieName = cookies[i].split('=')[0]; document.cookie = cookieName + "=deleted; expires=" + new Date(0).toUTCString(); console.log(cookieName + "removed"); } } } } deleteCookies("Hm"); deleteCookies("Um");
突然发现这样似乎没办法调用执行,这段代码放在哪里呢?因为二级域名下面都是直接放置的静态资源不存在HTML页面,所以无法施展。于是想到在服务器端操作。
//nginx配置 ... add_header Set-Cookie "UM_distinctid=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.exampl.com"; add_header Set-Cookie "Hm_lpvt_6188cc7a9315dbe7155a5b2c9ecc1103=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.example.com"; add_header Set-Cookie "Hm_lvt_6188cc7a9315dbe7155a5b2c9ecc1103=deleted;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;domain=css.example.com"; ...
domain后面跟的是需要屏蔽的二级域名,相比较JS代码更简洁。但是测试的时候出现问题了:
前面一张图是在FireFox下面的结果,后面一张是在Chrome下面的结果,通过开发者控制台的扩展cookie部分也可以看出来。所以,到底如何屏蔽百度统计等第三方cookie对网站优化的影响呢?