프런트 엔드에서 세션 정보를 얻는 여러 가지 방법 비교

개발 중에 페이지 js는 현재 로그인된 사용자 정보(메뉴 권한, 기본 사용자 정보, 구성 정보)가 필요한 곳을 자주 접하게 됩니다. 일반적으로 우리는 이 정보를 얻는 방법에 대해 크게 신경 쓰지 않을 수 있습니다. webpack 패키징의 경우 코드 분할이 이루어지더라도 js 파일과 css 파일의 용량이 여전히 매우 큽니다.

첫 로딩의 경우 최적화의 여지가 좀 있습니다. 다음은 주로 정보를 얻는 몇 가지 방법을 소개합니다. 인터페이스는 시뮬레이션된 데이터를 사용하며, 세션 획득 인터페이스는 1초 지연으로 설정됩니다. 다음 데이터는 모두 304 상황과 관계없이 처음으로 로드되는 데이터입니다.

php 중국어 웹사이트 학습 주제 : php 세션 (사진, 동영상, 사례 포함)

1. 백엔드 프로그램 설정, 직접 js 코드, 전역 변수 작성 방법 브라우저 액세스 앱을 수행합니다. 백엔드 프로그램은 응답하고, 사용자 정보 InitData를 얻고, 반환된 app.html 텍스트를 얻고, 사용자 정보 InitData = {user: {}}를 html의 해당 위치에 씁니다. 브라우저로 반환

【문제】

a. 사용자 정보 가져오기 InitData + app.html 텍스트 ---→ 브라우저로 돌아가면 브라우저가 다른 정적 리소스를 로드합니다.---> .app .do에서 반환한 html은 사용자마다 기본 정보가 다르기 때문에 브라우저 304 캐싱 메커니즘을 사용할 수 없습니다

2. 페이지는 를 통해 동기적으로 로드됩니다. 페이지 HTML 코드

InitData={processData: function (){}}; __page_begin = +new Date; __clog('html begin load'); document.addEventListener('DOMContentLoaded', function () {__clog('html DOMContentLoaded');}, false);function __clog(str) {str = '--' + str + ' ';console.log(str.substr(0, 20), new Date - __page_begin);}; __clog("session get begin"); __clog("session get begin"); !function(){ var b; try{b=new XMLHttpRequest}catch(c){try{b=ActiveXobject("Msxml12.XMLHTTP")}catch(c){try{b=ActiveXobject("Microsoft.XMLHTTP")}catch(c){}}} b.onreadystatechange=function(){ if(4===this.readyState&&200===this.status){ __clog("session get end"); var a=this.response||this.responseText; InitData._sessionData=a,InitData.processData(a) } },b.open("GET","/api/session?json=true"),b.send() }(); !function(){ var c,a=document.getElementsByTagName("head")[0], b=document.createElement("script"); b.type="text/javascript", c="__clog('session begin get');"; try{b.appendChild(document.createTextNode(c))}catch(d){b.text=c} a.appendChild(b), b=document.createElement("script"), b.type="text/javascript", b.src="../api/session?json", a.appendChild(b) }(); __clog("static run begin"); __clog('html end load'); 표시기 소개

html 시작 로드 브라우저에서 app.html 가져오기, 페이지 구문 분석 시작 시간 세션 시작 시작 시작 요청 세션 인터페이스 시간 세션 get end 세션 인터페이스 획득 후 js 실행을 시작하는 시간 static run start 다른 정적 파일을 실행할 수 있는 시간(실제 실행 시간에도 리소스 로딩이 완료되어야 함) app runjs start app.js 실행 시작 시간 app loadPage app.js 경로가 판단되고 InitData 정보가 있으면 해당 구성 요소가 표시됩니다 app runjs end app.js 실행 완료 time html end load app.html 하단 js 실행 시간 html DOMContentLoaded DOMContentLoaded 이벤트 트리거 시간

ㅋㅋㅋ ‐ a.app.html을 사용할 수 있도록 304까지

동기식 메서드이므로 다른 js에서는 CSS 실행 시간이 API/세션 결과가 반환될 때까지 기다려야 합니다

3. 페이지 js와 ajax를 작성하여 비동기적으로 세션을 얻습니다. 단계별로 app.js가 실행됩니다. 타이밍이 앞당겨져 거의 1초 정도 향상되었습니다. 지연되는 경우 ajax의 실행 타이밍이 반환된다는 점은 주목할 가치가 있습니다. 취소되면 app.js보다 빨라집니다. js 스레드가 유휴 상태인 동안 이 콜백이 실행되는 것을 볼 수 있습니다

4. 동적으로 스크립트를 생성하여 비동기 로딩하면 효과는 위와 비슷합니다