페이지 최적화
때 첫 번째 질의 결과 캐시. 이러한 상황은 그 엔트리 총 페이지 수, 또는 그 내부에있는 항목의 제거 부분의 수의 결과이든 간단하게되었다.
이 항목의 총 수를 표시하지 않습니다. Google 검색 결과 페이지는이 기능의 사용에 표시됩니다. 여러 번 당신이 처음 몇 페이지를 읽을 수도 충분하다. 그리고 내가 결과를 생각 할 때마다 500로 제한된다는 할 수있는 우리 (데이터수록 더 큰 자원 소비)하고, 결과는 정말 (501)의 경우는 쿼리, 쿼리 (501), 기록 그래서 때마다, 디스플레이 링크 "(500) 기록을 표시합니다."
총 페이지 수는 표시되지 않습니다. 다음 단어가 있으면 그냥은 "다음 페이지"를 제공합니다. (이전 페이지를보고 싶은 경우에, 그는 브라우저를 사용하여 이전 페이지로 돌아 올 것입니다). 그럼 당신이 날 "총 페이지 수를 표시하지 않습니다"요청할 수 있습니다 방법은 다음 없었다 알 수 있습니까? 여기에 좋은 팁 : 당신이 때마다 당신은 당신이 11-21 기록 (자세한에 테이크를 제거 할 때 예를 들어, 당신이 먼저 11-20 항목을 표시하려면, 다중 쿼리가 현재 페이지의 항목을 표시 당신이 쇼 "다음 링크"에 현재의 제 21 조, 그렇지 않으면 마지막 페이지를 찾을 때 다음)이 멀티 테이크의 내용을 표시하지 않습니다. 효율 캐싱을하는 매우 어려운 시간에 아주 좋은 것입니다, 그래서 당신은 특히하고, 총 페이지 수를 각 시간을 계산가 없습니다.
결과의 예상 총 수입니다. 구글은 그렇게, 그것은 아주 좋은 밝혀졌습니다. 다음 EXPLAIN의 결과에 의해 추정 된 SQL의 사용을 설명하는 설명한다. 결과는 "행"이 EXPLAIN 당신에게 결과의 아이디어를 줄 것이다. 이러한 접근 방식은 실질적으로 데이터베이스에 압력을 줄일 수 있지만, 사용자 경험은 영향을주지 않습니다 (이 방법은 모든 권리 항상은 아니지만 효과는 일부 지역에서 매우 좋다).
왜 어떻게 해결하는 두 도메인 간
1 동적 스크립트 태그를 생성
왜 파일 스크립트 태그 제한 정책의 도입 상동 아닌가요? 필요 파일 스크립트 태그는 브라우저를 도입 동일 출처 정책을 준수하지 않습니다 할 수 있도록 인수 JS 클라이언트를 도입 할 수없는 파일 스크립트 태그의 내용 때문에, 참조 된 파일의 안전에 영향을 미치지 않습니다. 아약스는 동일한 원본 정책을 따라야하므로 파일의 내용은 다른 파일의 내용이 누출 또는 기타 위험의 존재에 도입됩니다에 클라이언트의 js에서 아약스를 통해로드 할 수 있습니다
function loadScript(url, func) {
var head = document.head || document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = url;
script.onload = script.onreadystatechange = function() {
if(!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
func();
script.onload = script.onreadystatechange = null;
}
};
head.appendChild(script);
}
window.baidu = {
sug: function(data) {
console.log(data);
}
}
loadScript('http://suggestion.baidu.com/su?wd=w', function() {
console.log('loaded')
});
//此处可以是服务端的数据接口直接返回需要的信息
// loadScript('http://localhost:8080/resteasyDemo/rest/echo/test?test=1', function() {
// console.log('loaded')
// console.log(name)
// });
2 + window.name은 iframe
window.name의 아름다움 : 이름 값은 여전히로드 된 다른 페이지 (또는 다른 도메인)에 존재하며, 매우 긴 이름 값 (2MB의) 지원할 수 있습니다.
1 단계 만들기 인수를 구성 및 iframe 태그 a.html는 A 도메인을 만들
2 단계 b.html 아래 빈 페이지 A를 도메인 이름 만들기
페이지가 iframe이 SRC의 오브젝트가 배치되는 경우 즉시 다시 도메인 간 상동 b.html 페이지로함으로써, 페이지의 로딩이 완료되는 실제 도메인 간 동종 SRC 페이지를 얻기 위해 값 동성을 얻을
a.html 페이지에는 다음과 같은 코드를 작성
function proxy(url, func) {
var isFirst = true,
ifr = document.createElement('iframe'),
loadFunc = function() {
if(isFirst) {
ifr.contentWindow.location = 'http://10.149.4.6:8020/b.html';
isFirst = false;
} else {
func(ifr.contentWindow.name);
ifr.contentWindow.close();
document.body.removeChild(ifr);
ifr.src = '';
ifr = null;
}
};
ifr.src = url;
ifr.style.display = 'none';
if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
else ifr.onload = loadFunc;
document.body.appendChild(ifr);
}크로스 도메인 페이지를 호출
proxy('http://10.149.4.10:8080/c.html', function(data) {
console.log(JSON.stringify(data));
});C 페이지 설정 window.name
<body>
<script type="text/javascript">
window.name='{"foo":"bar"}';
</script>
</body>는 XMLHttpRequest 레벨 2에서 3 PostMessage를 HTML5의 API
a.com/index.html
<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样
// 若写成'http://c.com'就不会执行postMessage了
ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>b.com/index.html
<script type="text/javascript">
window.addEventListener('message', function(event){
// 通过origin属性判断消息来源地址
if (event.origin == 'http://a.com') {
alert(event.data); // 弹出"I was there!"
alert(event.source); // 对a.com、index.html中window对象的引用
// 但由于同源策略，这里event.source不可以访问window对象
}
}, false);
</script>4 JSONP
..js 라벨 콜백을 말할 필요도없이
5 웹 소켓
var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
var data = event.data;
}세 가지 이벤트 위임
당신은 알고 버블 링 이벤트 캡처 이벤트의 목적은 (참)입니다 필요
실행 순서를 버블 링 이벤트와 이벤트를 캡처하기위한 동일한 요소 1은 바인딩 요소에 따라 이벤트를 선언
자체가 그것을 클릭 요소 외부 부모 요소의 제거를위한 2, 캡쳐 이벤트는 이벤트 트리거를 버블 링에 우선
e.target 및 e.currentTarget 차이는 전자는 트리거 이벤트 요소에 바인딩 요소 트리거링 이벤트가 있다는
네 실현은 확장
딥 카피의 재귀 구현의 얕은 사본
function cloneOriginal(obj) {
if(typeof obj != "object" && obj != null || obj == null) return obj;
var temObj = obj.constructor === Array?[]:{};
for(var key in obj) {
temObj[key] = cloneOriginal(obj[key]);
}
return temObj;
}
function extend() {
if(arguments.length < 2) return arguments;
var temObj = cloneOriginal(arguments[0]);
for(var i = 1;i<arguments.length;i++) {
for(var j in arguments[i]) {
temObj[j] = cloneOriginal(arguments[i][j]);
}
}
return temObj;
}
var a = {name:111,age:222,kkk:[1,2,3],ddd:{height:100},e:function() {console.log("eee")}};
var b = {width:333};
var c = {color:"黄色",border:"1px"};
var d = extend(b,a,c);
console.log(d);
a.kkk.push(44444);
console.log(d);
//2使用json解析
var a2 = {name:111,age:222,kkk:[1,2,3],ddd:{height:100}};
var b2 = JSON.parse(JSON.stringify(a));
console.log(b2);
}그리고 완전한 시퀀스의 큰 객체의 그것이 될 수있는 일련의 JSON 간단한 복사 파싱 방법 아니라 허용되지이고
例 : VAR의 이름 {A = 111, B : 함수 () {}}
五 이벤트 루프
위의 그림, 메인 스레드 실행, 힙 (힙) 및 스택 (스택) 생산은, 코드의 스택이 다양한 외부 API를 호출 할 때, 그들은에서 "작업 대기열"에서 다양한 이벤트 (클릭, 부하가, 다)에 추가됩니다. 한 코드의 스택이 완료되면 콜백 함수에 해당하는 해당 이벤트의 구현 다음 "작업 큐"를 읽어 메인 스레드로 이동합니다.
실행 스택 코드 (동기화 작업), 항상 "작업 큐"(비동기 작업)하기 전에 읽기
같은 관리 페이지의 여섯 프레임
페이지 애니메이션이 매우 다양하고, 지속적으로 할 필요가 다른 애니메이션 데이터는 서버 측에서 수신 할 때마다이 메시지를 보낸 브라우저를 새로 고치면 새로운 텍스트 노드에 메시지의 페이지 내용에 추가로, JS 스크립트가 사용됩니다. 이 과정에서 바로 HTML 문서 재건의 DOM 트리의 일부가 발생합니다, 렌더링 트리의 일부의 재건, 렌더링 트리 재 배열의 일부, 그것은 렌더링 트리 다시 그려의 일부가되었습니다. 즉, 매번 브라우저는 상기 네 단계를 수행하는 메시지를 수신한다. 각 메시지를 처리 할 때 결과, 시간이 JS 스크립트를 필요 훨씬 넘어 페이지의 브라우저 렌더링 시간 업데이트에 그렸다. 결과 페이지가 매우 카드가된다 우리가 볼 수 있도록 사용자 환경이 좋지 않습니다.
에서는 setTimeout은 자신을 재귀 적으로 호출하고, 일초에 60 번에 대한 모든 16ms 한 번이라고하면. 모든 호출 함수는 1 페이지를 확인됩니다
세븐의 약속은 상세
지식 포인트 : 일부 기능 응용 프로그램
응용 프로그램 기능을 응용 프로그램의 부분 폐쇄
예 :
function joinWords(a,b) { return [a,b].join(' '); }
function prefixer(word) { return function(b) { return joinWords(word,b); } }
var prefixWithHate = prefixer('Hate'); console.log(prefixWithHat('Java'));내부 기능 파라미터 복귀 클로저의 사용 첫 번째 파라미터로서 미리 채워진 함수 단어, 단어를 교환하는 기능 등 prefixer 워드, 액세스
포인트를 학습,
항상 표시 하위 기능에 대한 부분 폐쇄 함수 매개 변수
기능과 기능은 표현의 retrurn을 반환
당신은 변수와 함수로 얻을
일부 기능은 기본 값이없는 변수 유사한 폐쇄를 달성하기 위해 설정
여덟 프리미티브 타입과 참조 타입
ECMAScript를, 모든 기능의 매개 변수 값에 의해 전달됩니다. 투과형 및 (스택의 새로운 값을 사용하여) 기본형 변수 값을 실질적으로 일치 복제 및 투과형 변수 일관된 레퍼런스 복사 (스택 형 메모리 기준값을 복사하고, 동일한 상기 스택에 스택 포인터를 저장 사물
나인 바인딩
Function.prototype.bind_ = function() {
var t = this,
param = Array.prototype.slice.call(arguments),
fn = param.shift(),
content = param;
return function() {
return t.apply(fn, content.concat(Array.prototype.slice.call(arguments)));
}
}
//赋值默认值
var fuzhi = function() {
var t = this,
param = Array.prototype.slice.call(arguments),
fn = param.shift(),
content = param;
return function() {
return fn.apply(this,content.concat(Array.prototype.slice.call(arguments)))
}
}
function test(n,name) {
setTimeout(function() {
console.log(name);
},n)
}
var test_ = fuzhi(test,2000);
test_("hahah");
}열 new 연산자에 대해
이것은 요약하는 데 사용되는 책에서 볼 수
함수 객체가 생성 될 때,이 코드 조각을 실행 만든 기능 생성자 함수 개체 :
같이 Function.prototype = {생성자이}
새의 실제 의미 :
Function.prototype.method = function(name,fn) {
if(this.prototype[name]) return this;
this.prototype[name] = fn;
return this;
}
Function.method('new',function() {
var that = Object.create(this.prototype);
var other = this.apply(that,arguments);
return (typeof other === 'object' && other) || that;
})
}간단한 적용 예
//简单的伪类继承
Function.method("jc",function(jcObj) {
this.prototype = new jcObj();
return this;
})
var people = function() {
this.name = "people";
}.method("getName",function() {
console.log(this.name);
})
var man = function() {
this.manName = "man";
}
.jc(people)
.method("detail",function() {
console.log("my father`s name is: "+this.name);
console.log("my name is: "+this.manName);
})
var obj = new man();
obj.detail()
}실제 간단한 결론은 다음 코드이다
생성자를 만들 : 1 단계는
function A() {
this.name = "a";
}
var a = new A();다음 네 단계를 거쳐 새로운 인스턴스를 생성 STEP2
1 VAR OBJ = {};
2 OBJ .__ proto__ = A.prototype;
3 A.call (OBJ);
4는 창 obj와;