沈阳cms模板建站优设网专利

当前位置： 首页 > news >正文

沈阳cms模板建站,优设网专利,手机网站如何排版,网站建设的七个步骤文章目录 前言一、浏览器面试问题1.cookie sessionStorage localStorage 区别2.如何写一个会过期的localStorage#xff0c;说说想法2.如何定时删除localstorage数据2.localStorage 能跨域吗2.memory cache 如何开启2.localstorage的限制2.浏览器输入URL发生了什么2.浏览器如何… 文章目录 前言一、浏览器面试问题1.cookie sessionStorage localStorage 区别2.如何写一个会过期的localStorage说说想法2.如何定时删除localstorage数据2.localStorage 能跨域吗2.memory cache 如何开启2.localstorage的限制2.浏览器输入URL发生了什么2.浏览器如何渲染页面的2.重绘、重排区别如何避免2.事件循环Event loop2.let a sssssss存在哪儿2.浏览器垃圾回收机制2.顺序存储结构和链式存储结构的比较2.token 能放在cookie中吗2.js如何获取/禁用cookie2.cookie2.cookie 禁用2.调试工具 结语 前言 大家好今天和大家分享一些浏览器相关的面试题同时我会将答案一同写上如果答案有不对的地方希望大家能够提出以便快速更正防止误导他人。 一、浏览器面试问题 1.cookie sessionStorage localStorage 区别 参考答案 共同点都是保存在浏览器端、且同源的 区别 cookie数据始终在同源的http请求中携带即使不需要即cookie在浏览器和服务器间来回传递而sessionStorage和localStorage不会自动把数据发送给服务器仅在本地保存。cookie数据还有路径path的概念可以限制cookie只属于某个路径下 存储大小限制也不同cookie数据不能超过4K同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据如会话标识。sessionStorage和localStorage虽然也有存储大小的限制但比cookie大得多可以达到5M或更大 数据有效期不同sessionStorage仅在当前浏览器窗口关闭之前有效localStorage始终有效窗口或浏览器关闭也一直保存因此用作持久数据cookie只在设置的cookie过期时间之前有效即使窗口关闭或浏览器关闭 作用域不同sessionStorage不在不同的浏览器窗口中共享即使是同一个页面localstorage在所有同源窗口中都是共享的cookie也是在所有同源窗口中都是共享的 web Storage支持事件通知机制可以将数据更新的通知发送给监听者 web Storage的api接口使用更方便 2.如何写一个会过期的localStorage说说想法 参考答案 两种方案惰性删除 和 定时删除 惰性删除 惰性删除是指某个键值过期后该键值不会被马上删除而是等到下次被使用的时候才会被检查到过期此时才能得到删除。我们先来简单实现一下 var lsc (function (self) {var prefix one_morelsc/*** 增加一个键值对数据* param key 键* param val 值* param expires 过期时间单位为秒*/self.set function (key, val, expires) {key prefix key;val JSON.stringify({val: val, expires: new Date().getTime() expires * 1000});localStorage.setItem(key, val);};/*** 读取对应键的值数据* param key 键* returns {null|} 对应键的值/self.get function (key) {key prefix key;var val localStorage.getItem(key);if (!val) {return null;}val JSON.parse(val);if (val.expires new Date().getTime()) {localStorage.removeItem(key);return null;}return val.val;};return self; }(lsc || {}));上述代码通过惰性删除已经实现了可过期的localStorage缓存但是也有比较明显的缺点如果一个key一直没有被用到即使它已经过期了也永远存放在localStorage。为了弥补这样缺点我们引入另一种清理过期缓存的策略。 定时删除 定时删除是指每隔一段时间执行一次删除操作并通过限制删除操作执行的次数和频率来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。 每隔一秒执行一次定时删除操作如下 随机测试20个设置了过期时间的key。 删除所有发现的已过期的key。 若删除的key超过5个则重复步骤1直至重复500次。 具体实现如下 var lsc (function (self) {var prefix one_more_lsc_var list [];//初始化listself.init function () {var keys Object.keys(localStorage);var reg new RegExp(^ prefix);var temp [];//遍历所有localStorage中的所有keyfor (var i 0; i keys.length; i) {//找出可过期缓存的keyif (reg.test(keys[i])) {temp.push(keys[i]);}}list temp;};self.init();self.check function () {if (!list || list.length 0) {return;}var checkCount 0;while (checkCount 500) {var expireCount 0;//随机测试20个设置了过期时间的keyfor (var i 0; i 20; i) {if (list.length 0) {break;}var index Math.floor(Math.random() * list.length);var key list[index];var val localStorage.getItem(list[index]);//从list中删除被惰性删除的keyif (!val) {list.splice(index, 1);expireCount;continue;}val JSON.parse(val);//删除所有发现的已过期的keyif (val.expires new Date().getTime()) {list.splice(index, 1);localStorage.removeItem(key);expireCount;}}//若删除的key不超过5个则跳出循环if (expireCount 5 || list.length 0) {break;}checkCount;}}//每隔一秒执行一次定时删除window.setInterval(self.check, 1000);return self; }(lsc || {}));2.如何定时删除localstorage数据 参考答案 定时删除是指每隔一段时间执行一次删除操作并通过限制删除操作执行的次数和频率来减少删除操作对CPU的长期占用。另一方面定时删除也有效的减少了因惰性删除带来的对localStorage空间的浪费。 每隔一秒执行一次定时删除操作如下 随机测试20个设置了过期时间的key。 删除所有发现的已过期的key。 若删除的key超过5个则重复步骤1直至重复500次。 具体实现如下 var lsc (function (self) {var prefix one_more_lsc_var list [];//初始化listself.init function () {var keys Object.keys(localStorage);var reg new RegExp(^ prefix);var temp [];//遍历所有localStorage中的所有keyfor (var i 0; i keys.length; i) {//找出可过期缓存的keyif (reg.test(keys[i])) {temp.push(keys[i]);}}list temp;};self.init();self.check function () {if (!list || list.length 0) {return;}var checkCount 0;while (checkCount 500) {var expireCount 0;//随机测试20个设置了过期时间的keyfor (var i 0; i 20; i) {if (list.length 0) {break;}var index Math.floor(Math.random() * list.length);var key list[index];var val localStorage.getItem(list[index]);//从list中删除被惰性删除的keyif (!val) {list.splice(index, 1);expireCount;continue;}val JSON.parse(val);//删除所有发现的已过期的keyif (val.expires new Date().getTime()) {list.splice(index, 1);localStorage.removeItem(key);expireCount;}}//若删除的key不超过5个则跳出循环if (expireCount 5 || list.length 0) {break;}checkCount;}}//每隔一秒执行一次定时删除window.setInterval(self.check, 1000);return self; }(lsc || {}));2.localStorage 能跨域吗 参考答案 不能 解决方案 通过postMessage来实现跨源通信 可以实现一个公共的iframe部署在某个域名中作为共享域 将需要实现localStorage跨域通信的页面嵌入这个iframe 接入对应的SDK操作共享域从而实现localStorage的跨域存储
2.memory cache 如何开启 参考答案 memory cache 如何开启是一种比较特殊的缓存他不受max-age、no-cache等配置的影响即使我们不设置缓存如果当前的内存空间比较充裕的话一些资源还是会被缓存下来。但这种缓存是暂时的一旦关闭了浏览器这一部分用于缓存的内存空间就会被释放掉。如果真的不想使用缓存可以设置no-store这样即便是内存缓存也不会生效。 2.localstorage的限制 参考答案 浏览器的大小不统一并且在IE8以上的IE版本才支持localStorage这个属性目前所有的浏览器中都会把localStorage的值类型限定为string类型这个在对我们日常比较常见的JSON对象类型需要一些转换localStorage在浏览器的隐私模式下面是不可读取的localStorage本质上是对字符串的读取如果存储内容多的话会消耗内存空间会导致页面变卡localStorage不能被爬虫抓取到 2.浏览器输入URL发生了什么 参考答案 URL 解析DNS 查询TCP 连接处理请求接受响应 6.渲染页面 2.浏览器如何渲染页面的 参考答案 所以可以分析出基本过程 HTML 被 HTML 解析器解析成 DOM 树 CSS 被 CSS 解析器解析成 CSSOM 树
结合 DOM 树和 CSSOM 树生成一棵渲染树(Render Tree)这一过程称为 Attachment 生成布局(flow)浏览器在屏幕上“画”出渲染树中的所有节点 将布局绘制(paint)在屏幕上显示出整个页面。 不同的浏览器内核不同所以渲染过程不太一样。 WebKit 主流程 Mozilla 的 Gecko 呈现引擎主流程 由上面两张图可以看出虽然主流浏览器渲染过程叫法有区别但是主要流程还是相同的。 Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”它 由“呈现对象”组成。对于元素的放置WebKit 使用的术语是“布局”而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程WebKit 使用的术语是“附加”。 2.重绘、重排区别如何避免 参考答案 重排(Reflow)当渲染树的一部分必须更新并且节点的尺寸发生了变化浏览器会使渲染树中受到影响的部分失效并重新构造渲染树。重绘(Repaint)是在一个元素的外观被改变所触发的浏览器行为浏览器会根据元素的新属性重新绘制使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等区别重绘不一定需要重排比如颜色的改变重排必然导致重绘比如改变网页位置引发重排 4.1 添加、删除可见的dom 4.2 元素的位置改变 4.3 元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性) 4.4 页面渲染初始化 4.5 浏览器窗口尺寸改变 4.6 获取某些属性。当获取一些属性时浏览器为取得正确的值也会触发重排,它会导致队列刷新这些属性包括offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以在多次使用这些值时应进行缓存。优化 浏览器自己的优化 浏览器会维护1个队列把所有会引起重排重绘的操作放入这个队列等队列中的操作到一定数量或者到了一定时间间隔浏览器就会flush队列进行一批处理这样多次重排重绘变成一次重排重绘 减少 reflow/repaint 1不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class然后修改 DOM 的 className。 2不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。 3为动画的 HTML 元件使用 fixed 或 absoult 的 position那么修改他们的 CSS 是不会 reflow 的。 4千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外它可能需要多次计算才能确定好其在渲染树中节点的属性通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。) 5不要在布局信息改变的时候做查询会导致渲染队列强制刷新 2.事件循环Event loop 参考答案 主线程从任务队列中读取执行事件这个过程是循环不断的这个机制被称为事件循环。此机制具体如下:主 线程会不断从任务队列中按顺序取任务执行每执行完一个任务都会检查microtask队列是否为空执行完一个 任务的具体标志是函数执行栈为空如果不为空则会一次性执行完所有microtask。然后再进入下一个循环去 任务队列中取下一个任务执行。 详细步骤 选择当前要执行的宏任务队列选择一个最先进入任务队列的宏任务如果没有宏任务可以选择则会 跳转至microtask的执行步骤。将事件循环的当前运行宏任务设置为已选择的宏任务。运行宏任务。将事件循环的当前运行任务设置为null。将运行完的宏任务从宏任务队列中移除。microtasks步骤进入microtask检查点。更新界面渲染。返回第一步。 执行进入microtask检查的的具体步骤如下:设置进入microtask检查点的标志为true。当事件循环的微任务队列不为空时选择一个最先进入microtask队列的microtask设置事件循环的当 前运行任务为已选择的microtask运行microtask设置事件循环的当前运行任务为null将运行结束 的microtask从microtask队列中移除。对于相应事件循环的每个环境设置对象environment settings object,通知它们哪些promise为 rejected。清理indexedDB的事务。设置进入microtask检查点的标志为false。 需要注意的是:当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件, 然后再去宏任务队列中取出一个 事件。同一次事件循环中, 微任务永远在宏任务之前执行。
2.let a “sssssss”存在哪儿 参考答案 使用let声明的全局变量不是挂在window对象下的声明的全局变量存在于一个块级作用域中。 具体查看我们可以通过打印一个全局函数在let声明的全局变量在全局函数的scope下我们平时使用时直接 用变量名称就能访问到 具体位置如下图
2.浏览器垃圾回收机制 参考答案 1. 介绍 浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation)也就是说执行环境会负责管理代码执行过程中使用的内存。其原理是垃圾收集器会定期周期性找出那些不在继续使用的变量然后释放其内存。但是这个过程不是实时的因为其开销比较大并且GC时停止响应其他操作所以垃圾回收器会按照固定的时间间隔周期性的执行。 不再使用的变量也就是生命周期结束的变量当然只可能是局部变量全局变量的生命周期直至浏览器卸载页面才会结束。局部变量只在函数的执行过程中存在而在这个过程中会为局部变量在栈或堆上分配相应的空间以存储它们的值然后在函数中使用这些变量直至函数结束而闭包中由于内部函数的原因外部函数并不能算是结束。 还是上代码说明吧 function fn1() {var obj {name: hanzichi, age: 10}; } function fn2() {var obj {name:hanzichi, age: 10};return obj; }var a fn1(); var b fn2();我们来看代码是如何执行的。首先定义了两个function分别叫做fn1和fn2当fn1被调用时进入fn1的环境会开辟一块内存存放对象{name: ‘hanzichi’, age: 10}而当调用结束后出了fn1的环境那么该块内存会被js引擎中的垃圾回收器自动释放在fn2被调用的过程中返回的对象被全局变量b所指向所以该块内存并不会被释放。 这里问题就出现了到底哪个变量是没有用的所以垃圾收集器必须跟踪到底哪个变量没用对于不再有用的变量打上标记以备将来收回其内存。用于标记的无用变量的策略可能因实现而有所区别通常情况下有两种实现方式标记清除和引用计数。引用计数不太常用标记清除较为常用。 2. 标记清除 js中最常用的垃圾回收方式就是标记清除。当变量进入环境时例如在函数中声明一个变量就将这个变量标记为“进入环境”。从逻辑上讲永远不能释放进入环境的变量所占用的内存因为只要执行流进入相应的环境就可能会用到它们。而当变量离开环境时则将其标记为“离开环境”。 function test(){ var a 10 ; //被标记 进入环境 var b 20 ; //被标记 进入环境 } test(); //执行完毕 之后 a、b又被标离开环境被回收。垃圾回收器在运行的时候会给存储在内存中的所有变量都加上标记当然可以使用任何标记方式。然后它会去掉环境中的变量以及被环境中的变量引用的变量的标记闭包。而在此之后再被加上标记的变量将被视为准备删除的变量原因是环境中的变量已经无法访问到这些变量了。最后垃圾回收器完成内存清除工作销毁那些带标记的值并回收它们所占用的内存空间。 到目前为止IE9、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略只不过垃圾收集的时间间隔互不相同。 3. 引用计数 引用计数的含义是跟踪记录每个值被引用的次数。当声明了一个变量并将一个引用类型值赋给该变量时则这个值的引用次数就是1。如果同一个值又被赋给另一个变量则该值的引用次数加1。相反如果包含对这个值引用的变量又取得了另外一个值则这个值的引用次数减1。当这个值的引用次数变成0时则说明没有办法再访问这个值了因而就可以将其占用的内存空间回收回来。这样当垃圾回收器下次再运行时它就会释放那些引用次数为0的值所占用的内存。 function test(){var a {} ; //a的引用次数为0 var b a ; //a的引用次数加1为1 var c a; //a的引用次数再加1为2var b {}; //a的引用次数减1为1 }Netscape Navigator3是最早使用引用计数策略的浏览器但很快它就遇到一个严重的问题循环引用。循环引用指的是对象A中包含一个指向对象B的指针而对象B中也包含一个指向对象A的引用。 function fn() {var a {};var b {};a.pro b;b.pro a; } fn();以上代码a和b的引用次数都是2fn()执行完毕后两个对象都已经离开环境在标记清除方式下是没有问题的但是在引用计数策略下因为a和b的引用次数不为0所以不会被垃圾回收器回收内存如果fn函数被大量调用就会造成内存泄露。在IE7与IE8上内存直线上升。 我们知道IE中有一部分对象并不是原生js对象。例如其内存泄露DOM和BOM中的对象就是使用C以COM对象的形式实现的而COM对象的垃圾回收机制采用的就是引用计数策略。因此即使IE的js引擎采用标记清除策略来实现但js访问的COM对象依然是基于引用计数策略的。换句话说只要在IE中涉及COM对象就会存在循环引用的问题。 var element document.getElementById(some_element); var myObject new Object(); myObject.e element; element.o myObject;这个例子在一个DOM元素element)与一个原生js对象myObject)之间创建了循环引用。其中变量myObject有一个属性e指向element对象而变量element也有一个属性o回指myObject。由于存在这个循环引用即使例子中的DOM从页面中移除它也永远不会被回收。 举个栗子 window.onloadfunction outerFunction(){var obj document.getElementById(element);obj.onclickfunction innerFunction(){}; };这段代码看起来没什么问题但是obj引用了document.getElementById(‘element’)而document.getElementById(‘element’)的onclick方法会引用外部环境中的变量自然也包括obj是不是很隐蔽啊。(在比较新的浏览器中在移除Node的时候已经会移除其上的event了但是在老的浏览器特别是ie上会有这个bug) 解决办法 最简单的方式就是自己手工解除循环引用比如刚才的函数可以这样 myObject.element null; element.o null;window.onloadfunction outerFunction(){var obj document.getElementById(element);obj.onclickfunction innerFunction(){};objnull; };将变量设置为null意味着切断变量与它此前引用的值之间的连接。当垃圾回收器下次运行时就会删除这些值并回收它们占用的内存。 要注意的是IE9并不存在循环引用导致Dom内存泄露问题可能是微软做了优化或者Dom的回收方式已经改变 4. 内存管理 4.1 什么时候触发垃圾回收 垃圾回收器周期性运行如果分配的内存非常多那么回收工作也会很艰巨确定垃圾回收时间间隔就变成了一个值得思考的问题。IE6的垃圾回收是根据内存分配量运行的当环境中存在256个变量、4096个对象、64k的字符串任意一种情况的时候就会触发垃圾回收器工作看起来很科学不用按一段时间就调用一次有时候会没必要这样按需调用不是很好吗但是如果环境中就是有这么多变量等一直存在现在脚本如此复杂很正常那么结果就是垃圾回收器一直在工作这样浏览器就没法儿玩儿了。 微软在IE7中做了调整触发条件不再是固定的而是动态修改的初始值和IE6相同如果垃圾回收器回收的内存分配量低于程序占用内存的15%说明大部分内存不可被回收设的垃圾回收触发条件过于敏感这时候把临街条件翻倍如果回收的内存高于85%说明大部分内存早就该清理了这时候把触发条件置回。这样就使垃圾回收工作职能了很多 4.2 合理的GC方案 1. 基础方案 Javascript引擎基础GC方案是simple GCmark and sweep标记清除即 遍历所有可访问的对象。 回收已不可访问的对象。 2. GC的缺陷 和其他语言一样javascript的GC策略也无法避免一个问题GC时停止响应其他操作这是为了安全考虑。而Javascript的GC在100ms甚至以上对一般的应用还好但对于JS游戏动画对连贯性要求比较高的应用就麻烦了。这就是新引擎需要优化的点避免GC造成的长时间停止响应。 3. GC优化策略 David大叔主要介绍了2个优化方案而这也是最主要的2个优化方案了 分代回收Generation GC 这个和Java回收策略思想是一致的也是V8所主要采用的。目的是通过区分“临时”与“持久”对象多回收“临时对象”区young generation少回收“持久对象”区tenured generation减少每次需遍历的对象从而减少每次GC的耗时。如图 这里需要补充的是对于tenured generation对象有额外的开销把它从young generation迁移到tenured generation另外如果被引用了那引用的指向也需要修改。增量GC 这个方案的思想很简单就是“每次处理一点下次再处理一点如此类推”。如图 这种方案虽然耗时短但中断较多带来了上下文切换频繁的问题。 因为每种方案都其适用场景和缺点因此在实际应用中会根据实际情况选择方案。 比如低 (对象/s) 比率时中断执行GC的频率simple GC更低些如果大量对象都是长期“存活”则分代处理优势也不大。 2.顺序存储结构和链式存储结构的比较 参考答案 优缺点 顺序存储时相邻数据元素的存放地址也相邻逻辑与物理统一要求内存中可用存储单元的地址必须是连续的。 优点存储密度大1存储空间利用率高。 缺点插入或删除元素时不方便。链式存储时相邻数据元素可随意存放但所占存储空间分两部分一部分存放结点值另一部分存放表示结点间关系的指针 优点插入或删除元素时很方便使用灵活。 缺点存储密度小1存储空间利用率低。 使用情况 顺序表适宜于做查找这样的静态操作 链表宜于做插入、删除这样的动态操作。 若线性表的长度变化不大且其主要操作是查找则采用顺序表 若线性表的长度变化较大且其主要操作是插入、删除操作则采用链表 顺序表与链表的比较 基于空间的比较 存储分配的方式 顺序表的存储空间是静态分配的 链表的存储空间是动态分配的存储密度 结点数据本身所占的存储量/结点结构所占的存储总量 顺序表的存储密度 1 链表的存储密度 1 基于时间的比较存取方式 顺序表可以随机存取也可以顺序存取 链表是顺序存取的插入/删除时移动元素个数 顺序表平均需要移动近一半元素 链表不需要移动元素只需要修改指针 2.token 能放在cookie中吗 参考答案 能 解析 token 是在客户端频繁向服务端请求数据服务端频繁的去数据库查询用户名和密码并进行对比判断用户名和密码正确与否并作出相应提示在这样的背景下token 便应运而生。 「简单 token 的组成」:uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign签名token 的前几位以哈希算法压缩成的一定长度的十六进制字符串 token认证流程
客户端使用用户名跟密码请求登录服务端收到请求去验证用户名与密码验证成功后服务端签发一个 token 并把它发送给客户端客户端接收 token 以后会把它存储起来比如放在 cookie 里或者 localStorage 里客户端每次发送请求时都需要带着服务端签发的 token把 token 放到 HTTP 的 Header 里服务端收到请求后需要验证请求里带有的 token 如验证成功则返回对应的数据 2.js如何获取/禁用cookie 参考答案 js如何获取cookie 假设cookie中存储的内容为namejack;password123 则在B页面中获取变量username的值的JS代码如下 arusernamedocument.cookie.split(;)[0].split()[1];//JS操作cookies方法!//写cookiesfunction setCookie(name,value){var Days 30;var exp newDate();exp.setTime(exp.getTime() Days*24*60*601000);document.cookie name escape (value) ;expires exp.toGMTString();}//读取cookiesfunction getCookie(name){var arr,regnew RegExp((^| )name([^;])(;|$));if(arrdocument.cookie.match(reg))return unescape(arr[2]);elsereturn null;}2.cookie 参考答案

1. cookie 是什么 cookie 是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时那么就可以通过 JavaScript 来创建和读取 cookie。 实际上 cookie 是存于用户硬盘的一个文件这个文件通常对应于一个域名当浏览器再次访问这个域名时便使这个cookie可用。因此cookie可以跨越一个域名下的多个网页但不能跨越多个域名使用。 不同浏览器对 cookie 的实现也不一样。即保存在一个浏览器中的 cookie 到另外一个浏览器是 不能获取的。 PScookie 和 session 都能保存计算机中的变量但是 session 是运行在服务器端的而客户端我们只能通过 cookie 来读取和创建变量。 2. cookie 能做什么 用户在第一次登录某个网站时要输入用户名密码如果觉得很麻烦下次登录时不想输入了那么就在第一次登录时将登录信息存放在 cookie 中。下次登录时我们就可以直接获取 cookie 中的用户名密码来进行登录。 PS:虽然 浏览器将信息保存在 cookie 中是加密了但是可能还是会造成不安全的信息泄露 类似于购物车性质的功能第一次用户将某些商品放入购物车了但是临时有事将电脑关闭了下次再次进入此网站我们可以通过读取 cookie 中的信息恢复购物车中的物品。 PS实际操作中这种方法很少用了基本上都是将这些信息存储在数据库中。然后通过查询数据库的信息来恢复购物车里的物品 页面之间的传值。在实际开发中我们往往会通过一个页面跳转到另外一个页面。后端服务器我们可以通过数据库session 等来传递页面所需要的值。但是在浏览器端我们可以将数据保存在 cookie 中然后在另外页面再去获取 cookie 中的数据。 PS这里要注意 cookie 的时效性不然会造成获取 cookie 中数据的混乱。 3. 怎么使用 cookie 语法 document.cookie namevalue;expiresevalue; pathpvalue; domaindvalue; secure;” 对各个参数的解释 namevalue 必选参数 这是一个键值对分别表示要存入的 属性 和 值。 比如 document.cookiename中文; //为了防止中文乱码我们可以使用encodeURIComponent()编码decodeURIComponent()解码 document.cookie encodeURIComponent(name)encodeURIComponent(中文);expiresevalue 可选参数 该对象的有效时间可选只支持GTM 标准时间即要将时间转换toUTCString()默认为当前浏览器 会话有用关闭浏览器就消失; var date new Date(); 　 date.setTime(date.getTime()2000);//获取当前时间并加上 2 秒钟 　 alert(date.toUTCString());//格林威治时间 (GMT) 把 Date 对象转换为字符串并返回结果 alert(date.toGMTString());//与上面的结果一样但是这个方法已经被上面取代了 document.cookienamevae;expiresdate.toUTCString(); alert(document.cookie); // namevae 　 setTimeout(function(){alert(document.cookie)},4000);//4 秒后打印空的字符串比如 3. pathpvalue 可选参数 限制访问 cookie 的目录默认情况下对于当前网页所在的同一目录下的所有页面有效 4.domaindvalue 可选参数 用于限制只有设置了的域名才可以访问如果没有设置则默认在当前域名访问 比如设置 test.com 表示域名为test.com的服务器共享该Cookie 5.securetrue|false 可选参数默认是 true 不安全传输 安全设置指明必须通过 安全的通信通道来传输https) 才能获得 cookie,true 不安全默认值false 安 全必须通过 https 来访问 比如如果你设置 document.cookie “namevae;secure” 上面的代码如果是在 http 的协议中访问那么是访问不了的 //设置 cookiefunction setCookie(objName, objValue, objHours){//添加cookievar str objName encodeURIComponent(objValue);if (objHours 0) {//为0时不设定过期时间浏览器关闭时cookie自动消失var date new Date();var ms objHours * 3600 * 1000;date.setTime(date.getTime() ms);str ; expires date.toUTCString();}document.cookie str;}//获取 cookiefunction getCookie(objName){//获取指定名称的cookie的值//多个cookie 保存的时候是以 ;空格 分开的var arrStr document.cookie.split(; );for (var i 0; i arrStr.length; i) {var temp arrStr[i].split();if (temp[0] objName){return decodeURIComponent(temp[1]);}else{return ;}}}//为了删除指定名称的cookie可以将其过期时间设定为一个过去的时间function delCookie(name){var date new Date();date.setTime(date.getTime() - 10000);document.cookie name a; expires date.toUTCString();}注意 1cookie可能被禁用。当用户非常注重个人隐私保护时他很可能禁用浏览器的cookie功能 2cookie是与浏览器相关的。这意味着即使访问的是同一个页面不同浏览器之间所保存的cookie也是不能互相访问的 3cookie可能被删除。因为每个cookie都是硬盘上的一个文件因此很有可能被用户删除 4cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中因此如果要保存用户名密码等信息时最好事先经过加密处理。 5cookie 在保存时只要后面保存的 name 相同那么就会覆盖前面的 cookie注意是完全覆盖包括失效时间pat 2.cookie 禁用 参考答案 问题描述 sessionID通过cookie保存在客户端如果将cookie禁用必将对session的使用造成一定的影响。 解决这个问题的办法是URL重写 URL重写 servlet中涉及向客户端输出页面元素的时候可以在相应的请求地址外面包上一层方法也就是说使用response.encodeURL(“请求地址”);为请求地址添加一个JSESSIONID的值 servlet中涉及跳转到新的页面时可以使用response.encodeRedirectURL(“请求地址”);为请求地址添加一个JSESSIONID的值 2.调试工具 参考答案 谷歌浏览器自带的调试工具 Elements可查看网页页面代码修改只是当前使用有效也可实时调试修改页面ccs代码样式。console记录开发者开发过程中的日志信息也可在里面写js代码。一般页面运行时js报错都是可以在这里看到反馈和定位bug原因及其位置。Sources断点调试JS可以查看程序代码执行的过程断点调试对于每一个程序员来说可是很重要。Network从发起网页页面请求开始分析HTTP请求后得到的各个请求资源信息“小编有时候就利用这下载一些网站不给下载的在线视频比如教学视频”。Timeline记录并分析网站的生命周期所发生的各类事件分析渲染js执行的每一个阶段。Application记录网站加载的各个资源信息。Security判断网页是否安全。Audits对当前网页的网络利用及网页性能进行检测并给出一些优化建议。 Postman 地址https://www.postman.com/ 几乎所有前端应用程序都发送和接收JSON响应和请求。 应用程序通过请求 API 可以做很多事情例如身份验证用户数据传输甚至是一些简单的事情例如获取所在位置的当前天气。 Postman 是调试接口的最佳工具之一。 它适用于 MacOSWindows 和Linux的系统 可以快速轻松地直接发送RESTSOAP和GraphQL请求。 使用 Postman我们可以调整请求分析响应和调试问题。 当不确定问题出在前端还是后端时这是很有帮助的。 CSS Lint 地址 http://csslint.net/ CSSLint 是一个用来帮你找出 CSS 代码中问题的工具它可做基本的语法检查以及使用一套预设的规则来检查代码中的问题规则是可以扩展的。 JSON Formatter Validator 地址https://jsonformatter.curiousconcept.com/ 在未格式化的 JSON 中很难发现语法错误或键值不正确的键因为它很难读取。 对于 压缩的 JSON 文件要发现其中的错误是比较难的所以我们需要一种格式化的工具。 JSON Formatter Validator tool 就是一个格式化 JSON 的工具只需输入压缩的JSON格式就能获得正确格式。该工具也可以验证 JSON 到 RFC 标准。 Sentry 地址https://sentry.io/welcome/ 无论测试如何完善的程序bug总是免不了会存在的有些bug不是每次都会出现测试时运行好好的代码可能在某个用户使用时就歇菜了可是当程序在用户面前崩溃时你是看不到错误的当然你会说:”Hey, 我有记日志呢”。 但是说实话程序每天每时都在产生大量的日志而且分布在各个服务器上并且如果你有多个服务在维护的话日志的数量之多你是看不过来的吧。等到某天某个用户实在受不了了打电话来咆哮的时候你再去找日志你又会发现日志其实没什么用缺少上下文不知道用户什么操作导致的异常异常太多从不看日志的缘故不知如何下手 等等。 Sentry就是来帮我们解决这个问题的它是是一个实时事件日志记录和聚合平台。它专门用于监视错误和提取执行适当的事后操作所需的所有信息, 而无需使用标准用户反馈循环的任何麻烦。 Sentry是一个日志平台, 它分为客户端和服务端客户端(目前客户端有Python, PHP,C#, Ruby等多种语言)就嵌入在你的应用程序中间程序出现异常就向服务端发送消息服务端将消息记录到数据库中并提供一个web节目方便查看。Sentry 由 python 编写源码开放性能卓越易于扩展目前著名的用户有Disqus, Path, mozilla, Pinterest等。 JSHint 地址https://jshint.com/ JSHint 是一个 Javascript 代码分析检测工具不仅可以帮助我们检测到 JS 代码错误和潜在问题也能帮助我们规范代码开发。 JSHint 扫描一个用JavaScript编写的程序并报告常见的错误和潜在的bug。潜在的问题可能是语法错误、隐式类型转换导致的错误、泄漏变量或其他完全的问题。 JSHint 扫描用 JavaScript 编写的程序并报告常见的错误和潜在的错误。 潜在的问题可能是语法错误由于隐式类型转换导致的错误变量泄漏或其他完全原因。 BrowserStack 地址https://www.browserstack.com/ 现在拥有各自内核的浏览器越来越多各自的特性也千差万别。如果作为一个前端攻城师想要检测网站在不同的操作系统和移动平台下的各种浏览器的兼容性那是相当痛苦不堪的。看到有在自己电脑上装虚拟机配置各种环境有自己的电脑上组建好这样的环境然后一一测试可是人的精力毕竟有限我们没法在同一台电脑上装那么多系统那么多浏览器的。幸好出了个 BrowserStack 是前端的福音呀。 BrowserStack 是一款提供网站浏览器兼容性测试的在线云端测试工具从而开发测试人员不必再准备很多虚拟机或者手机模拟器。 BrowserStack 是一个提供网站浏览器兼容性测试的在线云端应用支持9大操作系统上的100多款浏览器。支持本地测试支持与Visual Studio集成。或者你也可以直接前往 http://modern.ie 在线测试现在注册可以免费试用三个月三个月后是收费的三个月后要是你想用又不想付费作为天朝的开发者你懂得。 结语 以上就是本章的全部内容了希望能够帮助到您同时也希望我有写错的地方可以指出谢谢