일반적인 프론트 엔드 성능 최적화 및 브라우저 호환성 문제

일반적인 프론트 엔드 성능 최적화 무엇입니까?

• 01. HTTP 최소화하기 위해 요청
• 02. 사용 CDN (콘텐츠 전송 네트워크)
• 03. 추가 Expirem 헤드
• 04. 압축 조립체 (gzip을)
• 05. 상단에있는 CSS 스타일 시트 (헤드)
• 하단에 06. JS 스크립트
• 07. 피 사용하여 CSS 표현
• 08. DNS 쿼리를 감소
• 09. 능률화 JS (압축 / 혼란)
• 10. 피 리디렉션 (잃지 '/')
• 11. 아약스의 캐시
• 12. 제거 중복 스크립트 (코드 모듈)

프런트 엔드 일반적인 브라우저 호환성 문제

• 1. 다른 브라우저 탭 기본 외부 및 내부 패치 패치

  해결 방법 : CSS는 와일드 카드로 증가했다

* {
    margin: 0 ;
    padding: 0 ;
}

• 2.IE6은 양자 간 문제에서 : 여백을 IE6의 플로트를 설정뿐만 아니라 설정하는 것은, 여백 문제가 될 것입니다

  해결 방법 : 설정 display:inline;

• 6으로 라벨 10px 이하의 높이를 설정하는 경우 3. IE7 넘어 배치 된 위치에 나타난다 그들의

  해결 방법 : 레이블의 높이 위치 이상 overflow:hidden, 또는 줄 높이 설정 값 설정의 높이보다 작

• 4. 사진 갭 기본

  해결 방법 : 레이아웃 IMG에 대한 사용 플로트

• 5.IE9 브라우저는 다음과 불투명도를 사용할 수 없습니다

  해결 방법 :

  opacity:0.5;
  filter:alpha(opacity = 50);
  filter:progid:DXImageTranform.Microsoft.Alpha(style = 0,opacity = 50);

• 제 마진이 겹치는 두 개의 인접 요소 마진 여백이 제공되는 경우, 마진이 최대 걸릴 최소 폐기;

  용액 : 중첩 마진을 방지하기 위해서, 부모 구성 요소는 오버 플로우 부모 요소 서브 엘리먼트에 부가 될 수있다 : 숨김;

• 제 cursor:hand손 표시 사파리 지원되지

  해결 방법 : 통합 사용 커서 : 포인터;

• 8 개의 블록 요소의 부모 요소 배치 overflow:auto;부 요소 세트 총수 : 상대하고, 상기 부모 요소보다 큰 높이, 6으로 숨겨 질 것이다 IE7하지 오버플;

  해결책 : 부모 요소는 '위치 설정되어 상대;