miscellaneous

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名。同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求(preflight)。一旦服务器通过了”预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

CORS在预检请求时并不携带cookie信息，故后台此时应该放行。

//tomcat禁止客户端缓存
<filter>
 <filter-name>ExpiresFilter</filter-name>
 <filter-class>org.apache.catalina.filters.ExpiresFilter</filter-class>
 <init-param>
    <param-name>ExpiresDefault</param-name>
    <param-value>access 0 seconds</param-value>
 </init-param>
</filter>

<filter-mapping>
 <filter-name>ExpiresFilter</filter-name>
 <url-pattern>/*</url-pattern>
 <dispatcher>REQUEST</dispatcher>
</filter-mapping>

查看版本：jQuery.fn.jquery。
在console里输入：document.designMode = “on”就可以直接修改网页上的内容。
暗网上不流行使用各国现实的货币交易，只能用比特币，毕竟比特币去中心化的特征能最大程度保障双方的安全，因此这里也是研究比特币的重镇。
科技本身就是一把双刃剑，就看人类怎么使用它。首先，构建暗网的技术对于整个互联网行业来说就很有价值。“比如构建暗网时使用了大量的区块链技术，而区块链技术在保密通讯、分布式传输等环节当中都在被使用，只不过在日常使用当中不会将所用信息都隐藏起来。
host文件里不能带端口。浏览器访问的网址域名后面带端口。
同源策略主要限制的是不同源之间的交互操作，对于跨域内嵌的资源不受该策略限制。
阻止页面被iframe内嵌，使用报文头标识：X-Frame-Options。

关于”net::ERR_CONNECTION_ABORTED”和”Firebug达到了Post请求大小限制”的问题：原因：在做POST提交的时候，提交的内容大小超过2M，导致出现上面的问题。解决办法修改tomcat中的POST请求最大数据量的限制。

//server.xml
<Connector port="8888" maxHttpHeaderSize="8192"
               maxThreads="10000" minSpareThreads="25" maxSpareThreads="75"
               enableLookups="false" redirectPort="8443" acceptCount="100"
               connectionTimeout="20000" disableUploadTimeout="true" URIEncoding="UTF-8"
               maxPostSize="0"/>
即添加“maxPostSize="0",表示无限制

Smarty是一个使用PHP写出来的模板引擎，是目前业界最著名的PHP模板引擎之一。
iframe与主框架跨域互相访问：因为浏览器为了安全，禁止了不同域访问。因此只要调用与执行的双方是同域则可以相互访问。
浏览器的策略：JS和CSS的位置对其他资源加载顺序的影响。
因为javascript可能会来操作HTML文档的DOM树，所以，浏览器一般都不会像并行下载css文件并行下载js文件，因为这是js文件的特殊性造成的。所以，如果你的javascript想操作后面的DOM元素，基本上来说，浏览器都会报错说对象找不到。因为Javascript执行时，后面的HTML被阻塞住了，DOM树时还没有后面的DOM结点。所以程序也就报错了。
bigpipe：分块加载技术、HTTP分块传输编码允许服务器为动态生成的内容维持HTTP持久链接。Bigpipe技术其实具体实现需要服务器的代码配合。
HTTP分块传输编码格式：Transfer-Encoding: chunked。如果一个HTTP消息（请求消息或应答消息）的Transfer-Encoding消息头的值为chunked，那么，消息体由数量未定的块组成，并以最后一个大小为0的块为结束。Nodejs自动开启chunked encoding(除非通过sendHeader()设置Content-Length头)。

重叠Web服务器的生成时间与浏览器的渲染时间，我们不仅可以减少最终的时间延迟，也能使网页更早显示用户可见区域给用户，从而大大减少用户对延迟的感知。

// chunk 
HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Content-Type: text/html;charset=ISO-8859-1
Transfer-Encoding: chunked
Date: Wed, 02 Aug 2017 16:22:00 GMT

1ac (16进制的数字，标志这个块的大小)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="head" style="border:1px solid #ccc;">
        cnblogs logo <img src="http://mall.galaxybigdata.com/images/public/brand_logo.d9111479.png" />
    </div>    
101 (16进制的数字，标志这个块的大小)
    <br />
    <div id="content" style="border:1px solid blue;">           
         csdn logo<br />
         <img src="http://mall.galaxybigdata.com/images/public/brand_logo.d9111479.png" />
    </div>
</body>
</html>
0

服务器的防火墙拦截xss攻击，导致提交内容时被拦截报net::ERR_CONNECTION_ABORTED、net::ERR_CONNECTION_REFUSED、net::ERR_CONNECTION_RESE。
用Javascript进行base64编码，在高版本的IE浏览器(IE9以上版本)，和firefox，chrome浏览器里是非常方便的。这些浏览器的window对象中内置了base64的编码和解码方法。
var base64String = window.btoa(string) ;//编码
var string = window.atob(base64string) ;//解码
注意：这对编码解码方法只是支持ascii字符集编码，不支持unicode字符集。也就是如果给window.btoa方法的参数是汉字的话，该方法就会报错。办法就是先把unicode字符集编码，编码的结果就是只含有utf-8码。使用encodeURIComponent,escape方法。
escape不编码字符有69个：，+，-，.，/，@，_，0-9，a-z，A-Z
encodeURI不编码字符有82个：!，#，$，&，’，(，)，，+，,，-，.，/，:，;，=，?，@，，~，0-9，a-z，A-Z
encodeURIComponent不编码字符有71个：!， ‘，(，)，*，-，.，，~，0-9，a-z，A-Z
在HTML使用base64编码, 叫做Data URI scheme.
What is Map-Reduce?
Don’t iterate over lists：use map, reduce, filter。
Persistent data structures for efficient immutability：Mori(http://swannodette.github.io/mori/)、Immutable.js(https://facebook.github.io/immutable-js/)。使用树的数据结构实现。
chrome浏览器技巧：
Shift+Esc – 打开Chrome任务管理器，可以让你监控Chrome中每个标签的资源占用，结束不需要的标签。
Ctrl+Shift+V – 将剪切板中癿内容无格式粘贴（丼个例子，将你从网页中复制癿 HTML 格式内容粘贴为纯文本内容）。
Chrome浏览器的地址栏之所以被命名为Omnibar或者是Omnibox，是因为你可以通过它来完成许多任务，而不仅仅是输入URL那么简单。chrome://history、chrome://bookmarks、chrome://settings、chrome://cache、chrome://dns、chrome://flags、chrome://help。
Filter requests by properties，The Filters text box：domain:、method:、status-code。
在Waterfall查看某个请求相对于其他请求所消耗的时间长短及先后顺序。默认是以请求发起的时间排序的，所以，瀑布流中，越靠左的请求，发起的时间越早。
默认情况下，请求、响应头是按照字母表顺序显示的http头部的名字，如果想按照实际接收的顺序显示，点击上图中的view source，反之点击上图中的view parsed。
cookie与缓存：cookie它只是HTTP的一个头(header)字段，然后遵守HTTP标准的web服务器和客户端(浏览器)都按照这个字段的标准来执行相应的行为，cookie一个常用的目的是来实现认证，而非缓存。在HTTP中，ETag、cache-control以及Last-Modified等等字段是用来定义Web服务器和浏览器之间的缓存行为的。
Timing：查看请求在各个阶段对应的时间。

各个时间段的意思：
Queueing：浏览器会在以下情况对请求进行排队：
有更高优先级的请求
在这个域下，已经有6个TCP连接了，达到Chrome最大限制数量。此条规则仅适用在HTTP/1.0和HTTP/1.1
Stalled：Queueing中的任何一个因素发生都会导致该请求被拖延
Proxy negotiation：浏览器与代理服务器协商消耗的时间
DNS Lookup：浏览器对请求的IP地址进行DNS查找所消耗的时间
Initial conncection：发起连接所消耗的时间
Request sent：请求发送消耗的时间
Waiting (TTFB)：浏览器等待响应的时间，TTFB表示Time To First Byte
Content Download：资源下载所消耗的时间
按total duration排序后，透明部分表示浏览器在网络上等待（即尚未收到任何响应字节）的时间，而不透明部分表示的是收到第一批响应字节后完成下载的时间。不同的颜色表示不同的资源。
浏览器执行的几个步骤：
1、处理HTML标记，构建DOM树 — 整个流程最终输出是页面的文档对象模型(DOM)，浏览器对页面进行的所有进一步处理都会用到它

2、处理CSS标记，构建CSSOM树

3、将DOM树和CSSOM树融合成渲染树
4、根据渲染树进行布局，计算每个节点的几何信息(layout) — The “Layout” event captures the render tree construction, position, and size calculation in the Timeline.

5、在屏幕上绘制各个节点(painting、rasterizing)
如果DOM或CSSOM被修改，需要再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染。优化关键渲染路径即尽可能地缩短上述第1步到第5步耗费的总时间。(阻塞渲染的CSS(媒体类型)、阻塞解析的JavaScript(异步加载async))
CRP要求DOM和CSSOM两者融合在一起才能构建渲染树。这就导致了一个性能问题：HTML和CSS都是阻塞渲染的资源。HTML很显然，没有DOM就没有内容去渲染。CSS没有那么明显，但确实是阻塞渲染的资源。既然CSS是阻塞渲染的资源，这就意味着在CSSOM构建完成之前，浏览器不会去渲染任何已处理的内容。要尽早、尽快地把CSS下载到客户端以优化首次渲染的时间。
默认情况下，所有JS均会阻塞解析器，因为浏览器不知道脚本想在页面上做什么，因此它必须假定最糟的情况并阻塞解析器。但是，如果我们能够有个信号告知浏览器，说脚本无需在文档中引用它的确切位置被执行呢？这样一来，浏览器就会继续构建DOM，并在脚本准备就绪后执行脚本。这个信号就是async——在script标签里面添加async关键字，其有两个特性：
1、告诉浏览器当它碰到script标签时不用阻塞DOM构建，因此浏览器会忽略脚本请求，继续解析DOM。— JavaScript blocks DOM construction unless explicitly declared as async.
2、JS执行不依赖CSSOM：如果在CSSOM就绪之前脚本已经就绪，脚本可以立即执行。
标准的的HTML5也加入了一个异步载入javascript的属性：async，无论你对它赋什么样的值，只要它出现，它就开始异步加载js文件。但是， async的异步加载会有一个比较严重的问题，那就是它忠实地践行着“载入后马上执行”这条军规，所以，虽然它并不阻塞页面的渲染，但是你也无法控制他执行的次序和时机。

当 HTML 解析器遇到一个 script 标记时，它会暂停构建 DOM，下载js文件（来源于外部/内联/缓存），然后将控制权移交给 JavaScript 引擎（此时若在脚本引用其后的元素，会发生引用错误）；等 JavaScript 引擎运行完毕，浏览器会从中断的地方恢复 DOM 构建。也就是如果页面有script标签，DOMContentLoaded事件需要等待JS执行完才触发。但是可以将脚本标记为异步，在下载js文件的过程中不会阻塞DOM的构建。

<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script src="app.js"></script>
  </body>
</html>

总结：
By default,CSS is treated as a render blocking resource, which means that the browser won’t render any processed content until the CSSOM is constructed. html和css都是阻塞渲染的资源，所以要尽快构建完DOM和CSSDOM才能最快显示首屏。但是CSS解析和HTML解析可以并行。
What if the browser hasn’t finished downloading and building the CSSOM when we want to run our script? The answer is simple and not very good for performance: the browser delays script execution and DOM construction until it has finished downloading and constructing the CSSOM.即script标签中的JS需要等待位于其前面的CSS加载完才执行。
HTML解析器怎么构建DOM树的？DOM树和html标签是一一对应的，在从上往下解析html时，会边解析边构建DOM。如果碰到外部资源(link或script)时，会进行外部资源的加载。外部资源是js时会暂停html解析，等js加载和执行完才继续；外部资源是css时不影响html解析，但影响首屏渲染。
DOMContentLoaded：当初始HTML文档已经完成加载和解析成DOM树时触发，不会等CSS文件、图片、iframe加载完成。load：when all resources(including images) that the page requires have been downloaded and processed。
如果用定位、浮动和flexbox都能达到相同的布局效果，在浏览器兼容的情况下，优先使用flexbox布局，不仅因为其功能强大，更是因为其性能在布局上更胜一筹。
禁止浏览器忙指示器的关键在于让DOM加载完毕，那就绑定页面载入完毕的事件：load或者用ajax。
DOMContentLoaded是Firefox中最先提出的，此后JavaScript社区发现它确实比load事件（要求所有资源完全载入）更好，于是Apple和Opera相继开始支持该事件。在HTML5标准的HTML页面中，最佳实践应当是：所有样式放在中；所有脚本放在最后。(jQuery文档中也推荐这样的实践方式)
只要页面含有link标签(不论位置如何，会提前预处理？)就要等待加载和解析，加载解析完毕或超时时才会页面渲染。当所有link加载解析完毕后，可以一边继续解析dom，一边渲染了。body里不同位置的js脚本对应document.body不一样啊，证明了边解析边渲染啊! http://udacity-crp.herokuapp.com/time.js?rtt=1 http://udacity-crp.herokuapp.com/style.css?rtt=1
chrome浏览器里的disable cache属性是通过在请求头里添加cache-control:no-cache实现的。
动态创建DOM方式几乎成了标准的异步载入js文件的方式，Google Analytics和Google+ Badge都使用了这种异步加载代码。
延迟加载(lazy loading)：有些js代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。延迟加载就是一开始并不加载这些暂时不用的js，而是在需要的时候或稍后再通过js的控制来异步加载。
延迟执行(lazy execution)：我们想要异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行。一个是ControlJS，一个叫HeadJS，专门用来做异步load javascript文件的。
document.currentScript.src + ‘ executed @ ‘ + window.performance.now();
FOUC-Flash Of Unstyled Content 文档样式闪烁原因：将样式表放在页面底部，解决方法：使用LINK标签将样式表放在文档HEAD中。
OAuth：oauth is short for open autherization。OAuth的作用就是让”客户端”安全可控地获取”用户”的授权，与”服务商提供商”进行互动。
OAuth在”客户端”与”服务提供商”之间，设置了一个授权层（authorization layer）。”客户端”不能直接登录”服务提供商”，只能登录授权层，以此将用户与客户端区分开来。”客户端”登录授权层所用的令牌（token），与用户的密码不同。用户可以在登录的时候，指定授权层令牌的权限范围和有效期。
客户端必须得到用户的授权（authorization grant），才能获得令牌（access token）。OAuth 2.0定义了四种授权方式。1、授权码模式（authorization code） 2、简化模式（implicit） 3、密码模式（resource owner password credentials） 4、客户端模式（client credentials）。授权码模式（authorization code）是功能最完整、流程最严密的授权模式。它的特点就是通过客户端的后台服务器，与”服务提供商”的认证服务器进行互动。
CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。XSS 全称(Cross Site Scripting) 跨站脚本攻击，是Web程序中最常见的漏洞。
将重要的cookie标记为http only,这样的话Javascript中的document.cookie语句就不能获取到cookie了。
获取Access Token：要求OAuth要求该请求必须时POST请求，同时，还必须时HTTPS服务，以此保证获取到的验证凭证（Access Token）的安全性。
逼格：QQ用户授权慕课网使用其QQ账号相关的信息。
SASS中代码的重用：1、继承 2、Mixin 3、函数 4、导入
判断一组属性是否应该组合成一个混合器，一条经验法则就是你能否为这个混合器想出一个好的名字。如果你能找到一个很好的短名字来描述这些属性修饰的样式，比如rounded-cornersfancy-font或者no-bullets，那么往往能够构造一个合适的混合器。如果你找不到，这时候构造一个混合器可能并不合适。
混合器主要用于展示性样式的重用，而类名用于语义化样式的重用。所以继承应该是建立在语义化的关系上。
跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。
Normalize.css：为了增强跨浏览器表现的一致性，我们使用了Normalize.css，这是由Nicolas Gallagher和Jonathan Neal维护的一个CSS重置样式库。
IoT是Internet of Things的缩写，字面翻译是“物体组成的因特网”，准确的翻译应该为“物联网”。物联网(Internet of Things)又称传感网，简要讲就是互联网从人向物的延伸。
作为生产环境的项目，出了问题需要能迅速排查原因，因此增加服务稳定性监控和出错记录是必不可少的环节。
SSR：服务端渲染
酒旅前端团队的技术体系：

JSP的<% %>求解为什么这么写?不可以放到一个<% %>里面写完吗? 在<% %>内写的是Servlet方法体的内容，你如果把静态的内容也直接写到<% %>里，是不合法的，JSP中的静态内容默认使用System.out.println()进行标准输出。

<% if (session.getAttribute("userName") != null) { %>
	欢迎: <%= session.getAttribute("userName") %>
	<a href="login.jsp">注销</a> <br />
<% } else { %>
	请先登陆
	< a href = "login.jsp" >登陆</a >
<% } %>
// 编译后
if (session.getAttribute("userName") != null) {
  out.write("\r\n");
  out.write("    欢迎: ");
  out.print( session.getAttribute("userName") );
  out.write("\r\n");
  out.write("    <a href = \"login.jsp\">注销</a>\r\n");
  out.write("    <br/>\r\n");
  out.write("    ");
}else{ 
  out.write("\r\n");
  out.write("    请先登陆\r\n");
  out.write("    <a href = \"login.jsp\">登陆</a>\r\n");
  out.write("    ");
}

Prev Home Next

Comments

去留言