7월 26일 - 크로스 브라우징

Yullgiii·2024년 7월 29일

개발자로의 취업을 준비하며 TIL

목록 보기

248/286

크로스 브라우징

크로스 브라우징은 웹 표준에 따라 개발을 하여 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 즉, 브라우저의 렌더링 엔진이 다른 경우에도 웹 사이트가 정상적으로 작동하도록 하는 기술이다. 웹 사이트를 어떤 환경에서도 비슷하게 만들어 이상없이 작동되게 하는 것이 목표다. 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 방법을 말한다.

웹 성능과 관련된 Issue 정리

1. 네트워크 요청에 빠르게 응답하자

3xx 리다이렉트를 피할 것
meta-refresh 사용 금지
CDN(content delivery network)을 사용할 것
동시 커넥션 수를 최소화할 것
커넥션을 재활용할 것

2. 자원을 최소한의 크기로 내려받자

gzip 압축을 사용할 것
HTML5 App cache를 활용할 것
자원을 캐시 가능하게 할 것
조건 요청을 보낼 것

3. 효율적인 마크업 구조를 구축하자

레거시 IE 모드는 http 헤더를 사용할 것
@import의 사용을 피할 것
inline 스타일과 embedded 스타일은 피할 것
사용하는 스타일만 CSS에 포함할 것
중복되는 코드를 최소화할 것
단일 프레임워크를 사용할 것
Third Party 스크립트를 삽입하지 말 것

4. 미디어 사용을 개선하자

이미지 스프라이트를 사용할 것
실제 이미지 해상도를 사용할 것
CSS3를 활용할 것
작은 크기의 이미지는 DataURL을 사용할 것
비디오의 미리보기 이미지를 만들 것

5. 빠른 자바스크립트 코드를 작성하자

코드를 최소화할 것
필요할 때만 스크립트를 가져올 것: flag 사용
DOM에 대한 접근을 최소화할 것
다수의 엘리먼트를 찾을 때는 selector API를 사용할 것
마크업의 변경은 한번에 할 것: temp 변수를 활용
DOM의 크기를 작게 유지할 것
내장 JSON 메서드를 사용할 것

6. 애플리케이션의 작동원리를 알고 있자

Timer 사용에 유의할 것
requestAnimationFrame을 사용할 것
활성화될 때를 알고 있을 것

예제

다음은 네트워크 요청 최적화를 위해 gzip 압축을 사용하는 간단한 예제다.

// Java Spring Boot Gzip Compression 설정 예제
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.CommonsRequestLoggingFilter;
import org.springframework.web.filter.CommonsRequestLoggingFilter;

@Configuration
public class WebConfig {

    @Bean
    public FilterRegistrationBean<CommonsRequestLoggingFilter> loggingFilter(){
        FilterRegistrationBean<CommonsRequestLoggingFilter> registrationBean = new FilterRegistrationBean<>();
        CommonsRequestLoggingFilter loggingFilter = new CommonsRequestLoggingFilter();
        loggingFilter.setIncludeClientInfo(true);
        loggingFilter.setIncludeQueryString(true);
        loggingFilter.setIncludePayload(true);
        registrationBean.setFilter(loggingFilter);
        return registrationBean;
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://example.com")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true)
                        .maxAge(3600);
            }
        };
    }
}