2012-02-15 5 views
2

이전에는 모든 페이지 레이아웃과 검색 결과가 서버에서 PHP로 생성 된 다음 페이지가 완성되었을 때 페이지에 표시되었던 웹 페이지를 재개발했습니다. 이것은 느렸다.자바 스크립트가 아닌 대안으로 자바 스크립트 웹 페이지 개발하기

성능과 응답 성을 개선하기 위해 새 버전에서는 페이지의 머리글/바닥 글 만로드 한 다음 AJAX 요청을 사용하여 동적으로 결과를 채우기 전에 자바 스크립트로 나머지 레이아웃을 만듭니다.

이 단점은 JavaScript가 지원되지 않으면 페이지가 제대로로드되지 않는다는 것입니다. 내가 뭘 하려는지 자바 스크립트를 사용할 수없는 경우 & 결과 레이아웃에 대한 옛 PHP 코드에 다시 떨어지는 방법을 찾을 수 있습니다.

내 새 페이지에 이전 코드를 추가하려고했지만 자바 스크립트 브라우저가 아닌 경우 정상입니다. 그러나 자바 스크립트 브라우저에서 모든 것을 두 번로드합니다. 새로운 자바 스크립트 레이아웃 & 결과 코드와 이전 PHP 코드를 사용합니다.

PHP 코드가 자바 스크립트 코드보다 먼저 실행되기 때문에 어쨌든 이것을 피할 수 없습니다. 내가 여기서 뭔가를 놓치고 있니?

어떤 안내해 주셔서 감사합니다.

답변

0

비 js 코드에 <noscript></noscript>을 사용해보세요.

2

대안이 없습니다. Den의 권장 'noscript'태그는 여전히 PHP에서 표시 할 내용을 생성해야합니다.

하지만 실제로 PHP로 페이지를 생성해야합니다. 무슨 일이 있어도. AJAX는 페이지 업데이트 만 처리해야합니다. 모든 AJAX 요청은 PHP 엔진을 거치고 모든 구성과 세션 및 기타 등등을로드해야하는 서버에 대한 또 다른 고유 한 요청이기 때문에 JavaScript 및 AJAX로 모든 것을 생성하여 사이트를 더 빠르게 만들지는 않습니다.)

PHP를 가진 웹 사이트의 대부분을 생성하고 클라이언트에

B를 밀어) 적절한 AJAX와 자바 스크립트로 업데이트 :

그래서, 일을 요약합니다.

개발은 API 나 프레임 워크가 충분히 똑똑한 한 쉽습니다.

JavaScript로 대부분을로드하는 페이스 북처럼 멋진 것을하면 JavaScript를 사용하지 않는 사용자를위한 대안이되지 않습니다.

0

필자는 페이지가 PHP로 인해 느리지 만 페이지가 구현 된 방식과 디자인 패턴의 준수 여부로 인해 느린 것으로 의심됩니다.

+0

나는 동일하다고 생각하고 있었다 – ArcDare

+0

페이지가 느린 것은 원래 3 번째 부분의 원격 시스템에 대한 많은 요청을 기다려야했기 때문이다. 이 결과를 기다릴 필요없이 페이지를로드하고 결과가 다시 도착할 때 추가해야했습니다. –

+0

알겠습니다. 따라서 페이지는 리소스를 기다리고 있습니다. 얼마나 자주 데이터가 제 3 자 시스템에서 변경됩니까? 각 페이지로드와 마찬가지로 타사 시스템이 고유 한 정보를로드하고 있습니까? 아니면 데이터가 동일합니까? 일부 사용자는 js를 사용할 수 없으므로 서버 측에서 캐싱을 사용하는 것이 현명한 해결책입니다. memcache와 같은 요새와 요새는 큰 차이를 만들 수 있으며 새로운 데이터가 타사 출처에서 올 수있는 경우 데이터를 새로 고칠 수 있습니다. – user1207047

7

무엇을하고 싶은지는 progressive enhancement입니다.

이 이미지는 내가 게시 한 링크에서입니다 :

간단히 말해서

enter image description here

, 어떤이 설명하는 것은 당신의 웹 사이트가 CSS 나 자바 스크립트없이 기본적인 최소한의 기능에 도달해야한다는 것입니다.즉, 웹 사이트가있는 경우 다음과 같은 모양이 있어야합니다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Basic HTML</title> 
    </head> 
    <body> 
    <h1>Introduction to semantic HTML</h1> 
    <p>You use H tags for headings, search engines like that. 
    Paragraph tags for paragraphs</p> 
    <a href="http://example.com/">Hyperlinks make sense</a> 
    <div> 
     <p>Divs can be used to create seperate areas for content</p> 
    </div> 
    </body> 
</html> 

이 모양은 어떻게 생겼습니까?

enter image description here

CSS와 자바 스크립트 이를 강화한다 : 많은 사람들이 사용하는 명령 줄 브라우저에서

enter image description here

: 현대 웹 브라우저에서

기본 기능을 요구하지 않습니다.

은 내가 볼 수 없습니다해야 할 것은

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Foo page</title> 
    <script>/*Whatever script that does your ajaxy stuff*/</script> 
    </head> 
    <body> 
    <h1>Foo page</h1> 
    <p>Foo content</p> 
    <a href="http://example.com/bar">Click here to goto bar.</a> 
    <div> 
     <p>Divs can be used to create seperate areas for content</p> 
    </div> 
    </body> 
</html> 

입니다 나는 당신의 웹 사이트 및 요청 http://example.com/Foo 고토 언제 참조해야합니다

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Foo page</title> 
    <script>/*Whatever script that does your ajaxy stuff*/</script> 
    <script>/*Script to Load in the main content for the body*/</script> 
    </head> 
    <body> 
    <noscript> 
     <p>Sorry, for some reason I decided you need 
     javascript and a modern desktop browser to see 
     the basic line of text you wanted.</p> 
    </noscript> 
    </body> 
</html> 

그래서 그 대신 만드는 당신의 페이지의 URL을 기반으로 내용을로드 브라우저의 페이지에서 서버 쪽에서 페이지를 전달해야하므로/foo를 요청하면 foo HTML을 모두 얻을 수 있습니다. 그런 다음로드 할 때 점진적으로 향상시킬 JavaScript를 작성하십시오. 특정 내비게이션 링크가 본문 내용을로드하도록하여 페이지를 향상 시키십시오. 그렇게하면 JS가 비활성화되고 작동하며 JS가 활성화되면 콘텐츠가 더 빨리로드됩니다.

유용성의 관점에서 마지막 하나.

당신이 ajaxy 물건을 할하시기 바랍니다려고하는 경우에, 당신이 모든 HTTP 오류 코드를 잡을 수 있는지 확인 확인하고 페이지를로드하는 오류 경고처럼 사용자가 옳은 일을하고 로딩을 표시하시기 바랍니다 그래픽. Ajaxy 웹 사이트는 느린 네트워크를 가지고있을 때 콘텐츠를로드하고로드 할 때 발생하는 콘텐츠 또는 오류로드와 관련된 내용을 표시하지 않고 마를 때까지 기다리게합니다. 매우 귀찮은 사용자가 사이트를 떠나 다시는 돌아 오지 않습니다. .

+0

감사합니다. 나는 이제 나의 디자인으로 돌아가서 그것을 통해 또 다른 모습을 보게 될 것이다. 내 페이지가 무엇을 기반으로 데이터를 요청하는지에 따라 이전 양식 데이터를 제출하는 동안 비 자바 스크립트 사용자를 분리해야합니다. 따라서 이전 페이지 레이아웃/PHP 및 자바 스크립트를 사용하여 결과를 볼 수 있습니다. 활성화 된 사람들은 내 새로운 형식의 PHP 및 자바 스크립트 버전을 볼 수 있습니다. –

+0

@TW 생각의 전환점이 조금 있지만이 방법을 개발하는 것이 더 신속 할 것입니다. – Incognito

+0

나는 사용자가 작동하지 않는 페이지를 보지 못하도록하거나 페이지를 사용할 수 없기 때문에 javascript를 사용할 수 없다는 메시지 만 표시하는 것에 동의합니다. 차라리 그 (것)들에게 더 기본적인 대안을 제안하고 싶습니다. –

관련 문제