Wulin.com의 기사 소개 (www.vevb.com) : 프론트 엔드 페이지의 물은 얼마나 깊습니까?
인터넷에서 일하는 사람은 기본적으로 몇 줄의 HTML을 씁니다. 단어를 사용한 사람들은 DreamWeaver와 함께 일반 페이지를 만들 수 있으므로 대부분의 사람들은 페이지 개발에 기술 내용이 많지 않으며 매우 간단하다고 생각할 것입니다. 이러한 일반적인 이해뿐만 아니라 실무자에게도 많은 의문이 있습니다. 프론트 엔드 페이지를 구현하는 데 아무런 문제가 없습니다. 호환성, 작은 경우; 이미지 통합, 그리고 항상 사용되었습니다 ... 어떤 다른 문제를 찾을 수 있습니까? 병목 현상, 천장, 변형 및 방법은 실무자들 사이에서 널리 논의됩니다. 실제로 문제가 없습니까? Netease 이메일 프론트 엔드 기술 센터는 몇 년 동안 설립되었으며, 논의 할 끝없는 주제가있는 것으로 보이며, 종종 모든 사람들을 응원 할 새로운 아이디어가 있습니다. 따라서 페이지 개발에 대한 요구 사항은 무엇이며 무엇을 해야하는지, 그리고 물이 얼마나 깊은 지, 그것을 퍼 뜨리겠습니다.페이지의 프론트 엔드에 대한 인식은 다른 시간에 달라진 것 같습니다. 인터넷 초기에는 소형차가 집보다 여전히 비싸고 참깨 케이크와 베르 미첼은 먹는 데만 익숙했으며 국화는 차를 만드는 데만 사용되었습니다. 당시 페이지 디자인 스타일은 비교적 단일이었으며 해당 페이지 요구 사항은 비교적 간단했습니다. 당시 브라우저는 기본적으로 IE6의 세계였습니다. JavaScript는 웹 페이지 특수 효과와 동의어였습니다. HTML 페이지 자체는 많은 관심을 끌지 못했습니다. 이미지의 보조 포지셔닝에 CSS를 추가하기 위해 DIV 또는 심지어 테이블을 사용할 수있는 한, 페이지 컨텐츠를 예약해도 괜찮을 것이며이 개념은 오랫동안 존재했습니다. 페이지 컨텐츠의 강화, 디자인 스타일의 개발, 상호 작용 복잡성 증가, AJAX의 적용 및 브라우저 업데이트로 모든 사람이 가장 기본적인 페이지 자체에 다시주의를 기울였습니다. 그런 다음 브라우저 호환성입니다. 문제가 발생할 때 가장 열정적 인 것은 인터넷에서 해킹을 검색 한 다음 IE6과 7을 꾸짖는 것입니다. 이 단계부터 시작하겠습니다.
렌더링 구현이 가장 기본적인 작업입니다
시각적 드래프트는 페이지 코드를 통해 표현되며, 여기에는 두 가지 기본 요구 사항이 포함됩니다. 1. 시각적 초안을 진정으로 반영 할 수 있습니다. 2. 브라우저를 통해 호환 될 수 있습니다. 이 두 가지 요구를 달성하기 위해서는 세부적인 태도와 어느 정도의 페이지 기술이 필요합니다. 이 두 내용을 완료 할 수 있다면 페이지 프론트 엔드에서 실무자 순위를 입력 할 수 있지만 이는 페이지 개발에 능숙 할 수 있음을 의미합니까? 아니, 막 시작되었습니다!
디자이너와의 커뮤니케이션 및 프로젝트 참여
의사 소통이 중요합니다. 먼저 몇 가지 질문을하겠습니다. 디자이너와 일부 효과가 저가형 브라우저의 렌더링 효율에 더 큰 영향을 미친다는 것을 설계자와 논의 했습니까? 구조를보다 간결하고 명확하게하기 위해 CSS3에서 구현할 수있는 몇 가지 효과에 대해 논의한 적이 있습니까? 코드와 비전의 균형을 추구 한 적이 있습니까? 페이지의 프런트 엔드 개발은 기본 사용자를위한 것이며 작성된 코드는 브라우저에 직접 적용됩니다. 우리는 페이지의 안정성과 렌더링 효율성에 대한 책임이 있습니다. 우리는 또한 종종 전체 진행 압력에 따라 프로젝트의 설계에 직면하며 설계는 페이지의 프론트 엔드 개발과 동시에 수행됩니다. 현재 가능한 한 많은 프로젝트 정보를 얻고해야 할 일을 이해해야합니다. 이들은 재사용 및 프레임 워크 확장을 완전히 고려하는 데 도움이 될 수 있습니다.
좋은 페이지 구조
Page Structure의 글쓰기는 건물 재단 건축과 같습니다. CSS 코드의 품질, JS 개발, 배경 개발 및 향후 페이지 확장, 반복 및 페이지 조정. 시각적 드래프트를받은 후에는 바쁘지 말고, 관찰하고, 더 많이 생각하지 마십시오. 먼저 레이아웃을 분석하고 프레임 워크를 나누고 구조를 계획하고 코드를 작성하십시오. 특히 대규모 프로젝트에서 모듈 식 개발의 합리적인 사용은 전체 또는 확장 된 유지 보수에서 수행되는지 여부에 관계없이 상당한 이점이 있습니다.
해킹에 대해
많은 학생들이 페이지를 개발할 때 해킹을 가장 온라인으로 검색합니다. 우리가 페이지 호환성을 달성하기 위해 해킹에 전적으로 의존하든 답은 아니오입니다. 사람들은 종종 우리가 우리에게 거짓말을했다고 말하지만, 우리는이 거짓말을 성취하기 위해 더 많은 거짓말을해야한다고 말합니다. IE6이 종종 우리가 입에 혈액을 구토하게한다는 것을 부정하지는 않지만, 더 많은 거짓말을 사용하여 그것을 보충함으로써 편안하게 느낄 수 있다는 의미는 아닙니다. 대부분의 경우 아이디어를 변경하여 HTML 구조를 조정하거나 설명 할 수 없지만 해킹을 죽이는 데 비교적 안전한 일부 CS를 사용할 수 있습니다. 해킹을 사용하는시기를 예측할 수 없으면 우리가 큰 타격을 줄 수 있습니다. 예를 들어, 레이아웃 또는 위치 트리거 : 상대는 많은 IE6 문제를 해결하는 데 도움이 될 수 있습니다.
아름다운 코드
오늘날 많은 웹 프로젝트에는 복잡한 기능이 있으며 코드 규모가 크게 될 것입니다. 협업 개발 및 유지 보수를 개선하는 방법은 우리가 직면 한 문제입니다. 우리는 통합 계획 개선을 고려해야하며 다양한 상황에 직면 할 때 편안하게하기 위해 우수한 코드 개발 습관을 개발해야합니다. 페이지 코드를 살펴보면 합리적인 레이블 사용량, 좋은 주석, 명확한 코드 구조 및 정확한 CSS를 보는 것은 예술 작품을 인정하는 것뿐만 아니라 다운 스트림 개발 및 협업 개발의 커뮤니케이션 비용을 줄이는 것과 같습니다. 우리는 이것을하지 않아도되는 이유는 무엇입니까? 부정적인 예를 제시하려면 : DIV 남용은 이제 전형적인 문제입니다. 사용하는 태그 수를 확인하십시오. 다른 시맨틱은 해당 태그 코드를 사용해야합니다. 특히 HTML5는 더 풍부한 의미 태그를 제공합니다. 그들은 모두 전장에서 청구를 기다리고 있습니다. 우리가 그들을 해방합시다!
접근 가능한 페이지 개발
접근성과 사용 편의성은 매우 주관적이고 사용자 친화적 인 것입니다. 평범한 사람들이 완벽하게 제시된 페이지가 특별한 그룹들 사이에서 반드시 배려되는 것은 아닙니다. 맹인 사람들이 화면 읽기 소프트웨어를 사용하여 페이지의 특정 영역 내에서 루프에 들어갈 때 죄책감을 느낍니다. 국내 웹 사이트는 현재 이에 대해 훨씬 덜주의를 기울이기 때문에 더 많은 사람들이 우리의 열정을 느낄 수 있도록 협력해야합니다. >
효율성을 보장합니다
프로젝트 개발의 상대적으로 국경적인 부분으로서, 프로젝트의 시간을 얻기 위해 Page Development를 최대한 빨리 완료해야 할 수도 있습니다. 잘하고 싶다면 먼저 도구를 연마해야합니다. 효율성을 향상시키는 데 도움이되는 실제 경험과 코드 습관의 형성 외에도 자신의 개발 진행 상황을 제어하는 능력을 향상 시키려면 페이지를 개발하는 데 도움이되는 보조 도구가 많이 있습니다. 예를 들어, 적은 또는 SASS를 사용하면 CSS를 확장하고 구성하는 데 도움이 될 수 있으며 CSS의 작문 효율성을 크게 향상시키고 유지 관리 가능성을 높일 수 있습니다. 예를 들어, Zen Coding의 자동 완료 및 사용자 정의 코드 블록을 사용하여 날아가는 것처럼 칼을 가리킬 수 있습니다. 사용자 지정 입력 방법을 통해 개발 속도를 향상시키는 코드 블록 키워드를 보았습니다. 더 많이 탐색하면 가장 적합한 도구를 찾을 수 있습니다.
서버에 대한 최적화
페이지 개발은 서버 최적화를 이해하고 서버의 부담을 최소화해야합니다. 예를 들어 CSS Sprite는 서버 요청 수를 줄이는 일반적인 예입니다. NetEase 이메일 페이지의 프론트 엔드 개발에서 파일 크기와 서버 요청 번호 간의 균형을 지속적으로 찾는 등 다양한 최적화를 지속적으로 수행하고 있습니다. 캐시 활용을 가능한 한 많이 향상시키기 위해 패치 업그레이드가 채택되었습니다. 클래스 이름은 지나치게 긴 이름 지정을 피하기 위해 난독 화되고 압축되었습니다. Base64는 요청 수 및 기타 조치를 줄이는 데 사용되었습니다. 이들은 포괄적 인 트레이드 오프의 결과이며 모든 측면에서 전반적인 최적화를 고려해야합니다. 페이지 방문 횟수가 특정 크기에 도달하면 가장 작은 최적화조차도 상당한 결과를 얻을 수 있으며, 가장 작은 문제조차도 큰 재난을 일으킬 수 있습니다.
HTML5를 포용하십시오
이것은 기회로 가득 찬 시대입니다. HTML5 시대의 출현은 모바일 인터넷의 부상으로 더 큰 기회를 창출했으며 배우고 발견 할 가치가있는 것들이 너무 많습니다. HTML5는 풍부한 JS API 인터페이스를 제공하며, 우리는 공부해야합니다. CSS3의 화려 함은 충분한 관심을 끌었습니다. 모바일 장치에서보다 적응할 수있는 페이지를 개발하는 방법은 공부해야합니다 ...
배고프고 어리석은 상태를 유지하십시오
물을 더 많이 퍼 내면 바닥이 여전히 깊고 바닥이 바닥이 없다는 것을 알았습니다. 위의 내용을 더 많이 연구할수록 더 많은 산과 강이 올라가야한다는 것을 더 많이 발견했습니다. 배가 고프고 눈을 사용하여 발견하고 발견하고, 기술을 지속적으로 풍부하여 위치를 찾고 병목 현상을 뚫습니다. 말이 진행되는 것처럼, 높은 수준의 집을 짓는 것만으로 만 자연스러운 결과를 얻을 수 있습니다. 이 기사는 이전에 동료들과 병목 현상 문제를 논의했기 때문에 형성되었습니다. 나는 내 아이디어를 정리하기 위해 나 자신과 페이지의 앞쪽 끝에있는 학생들을위한 포지셔닝을 찾고 싶었다. 스탠포드에서 열린 Apple CEO의 연설에서 선고를 받고 배고프고 어리석은 상태를 유지하고 모든 사람과 공유하십시오.