찾다

집  >  Q&A  >  본문

javascript - 프론트엔드에서 성능과 보안에 대해 질문받았습니다. 포괄적인 요약이 있습니까?

프런트엔드 성능과 보안이 더 중요하며 자주 언급됩니다.

개인적인 이해:

성능

안전

질문:
당신의 경험을 공유하고 요약해주세요. 감사해요!

巴扎黑巴扎黑2793일 전863

모든 응답(3)나는 대답할 것이다

  • 天蓬老师

    天蓬老师2017-05-18 11:00:41

    1. 성능:
      원칙 1: http 요청 감소, 이미지, CSS 파일 병합
      원칙 2: 캐시 활용: CDN 사용, 외부 js 및 CSS 사용, Exp 추가. ires 헤더를 사용하고, DNS 쿼리를 줄이고, Etag를 구성하고, Ajax 캐싱을 사용합니다.
      원칙 3: 대역폭 요청: GZIP 활성화, js 간소화, 중복 스크립트 제거, 이미지 최적화.
      원칙 4: 페이지 구조: 헤드에 스타일을 배치하고 하단에 js를 배치하고, 가능한 한 빨리 문서 출력을 새로 고칩니다.
      원칙 5. CSS 표현을 피하고 리디렉션을 피하세요
      실제로 특정 비즈니스 시나리오부터 시작하면 더 많은 것을 이해할 수 있을 것입니다. 예를 들어 검색결과 페이지

    2. 보안:
      XSS

    회신하다
    0
  • phpcn_u1582

    phpcn_u15822017-05-18 11:00:41

    최근 인터뷰를 준비하고 있어서 제 의견을 모아봤습니다

    성능

    http 요청

    http 요청을 줄이는 주요 아이디어는 HTML 문서 내에 링크된 리소스 수를 줄이는 것입니다.

    • 프로젝트가 온라인 상태가 되면 CSS`JavaScript` 및 기타 파일을 압축, 병합 및 패키징하여 소스 파일의 수와 크기를 줄입니다CSS`JavaScript`等文件压缩合并打包，减少源文件的数量和体积

    • 将多张小图片制作成精灵图

    • 将资源转换为base64编码

    • 使用缓存可以加快网页打开速度，有效减少http请求

    • 使用懒加载，按需加载对应资源

    页面打开速度

    • 使用CDN加载资源

    • 将CSS放在页面头部，防止页面闪烁

    • 将JavaScript异步或延迟加载，防止JavaScript运行阻塞页面加载

    • 延迟请求首屏外的文件，即优先加载首屏内容。

    执行效率

    • 选择器从右向左解析，嵌套顺序不宜过深

    • JavaScript中减少作用域链的查找，避免使用eval和Function等性能缓慢的接口

    • DOM操作的代价是十分昂贵的，可以使用DocumentFragment

    여러 개의 작은 그림을 스프라이트로 만들기

    리소스를 base64 인코딩으로 변환


    캐시를 사용하면 웹페이지 열기 속도를 높이고 http 요청을 효과적으로 줄일 수 있습니다

    지연 로딩을 사용하여 요청 시 해당 리소스를 로드

    페이지 열기 속도

    🎜🎜CDN을 사용하여 리소스 로드🎜🎜 🎜🎜페이지 깜박임을 방지하려면 CSS를 페이지 헤드에 배치하세요🎜🎜 🎜🎜JavaScript가 실행되지 않고 페이지 로딩이 차단되는 것을 방지하기 위해 JavaScript를 비동기식 또는 지연 로드🎜🎜 🎜🎜 첫 번째 화면 외부의 파일 요청을 지연합니다. 즉, 첫 번째 화면 콘텐츠를 먼저 로드합니다. 🎜🎜 🎜 🎜실행 효율성🎜 🎜 🎜🎜선택기는 오른쪽에서 왼쪽으로 구문 분석되며 중첩 순서가 너무 깊어서는 안 됩니다🎜🎜 🎜🎜JavaScript에서 범위 체인 조회를 줄이고 eval 및 Function🎜🎜과 같은 성능이 느린 인터페이스 사용을 피하세요. 🎜🎜DOM 작업은 DocumentFragment를 사용하여 한 번에 문서에 삽입되는 노드를 임시로 저장할 수 있습니다. 🎜 🎜프런트 엔드 보안🎜 🎜프런트엔드 보안은 주로 브라우저를 통해 사용자 데이터에 간접적으로 영향을 미치는 보안 문제를 말합니다. 🎜 🎜XSS🎜 🎜크로스 사이트 스크립팅(Cross Site Scripting)이란 악의적인 공격자가 웹 페이지에 악성 스크립트 코드를 삽입하면 웹에 내장된 스크립트 코드가 실행되어 도용 등 악의적인 공격 목적을 달성하는 것을 말합니다. 사용자 쿠키. 🎜XSS의 문제점은 대상 웹사이트에 삽입되어 스크립트를 실행할 수 있는 취약점을 찾는 것입니다. 예를 들어 특정 편집 내용이 사용자의 입력을 처리하지 않고 데이터베이스에 직접 저장되면 사용자가 해당 페이지에 접근할 때 해당 페이지에 악성 스크립트가 렌더링될 수 있습니다. 🎜 🎜CSRF🎜 🎜교차 사이트 요청 위조, 예를 들어 대상 웹 사이트의 기사 삭제 기능은 악의적인 웹 사이트 클라이언트로부터 기사 삭제 요청을 받습니다. 이 요청은 대상 웹 사이트 사용자의 의도가 아닌 크로스 사이트이며 위조되었습니다. 🎜구현 방법은 먼저 악성 웹사이트에서 GET 요청을 구성한 다음(Ajax의 동일 출처 제한으로 인해 img 등의 src 요청을 사용할 수 있음) 대상 웹사이트 사용자를 속여 악성 웹사이트에 액세스하는 것입니다. 웹 사이트에 접속하면 해당 요청이 시작되고(그리고 쿠키와 같은 해당 사용자 식별 정보를 사용하여) 이때에도 공격이 발생합니다🎜 🎜인터페이스 작업 하이재킹🎜 🎜인터페이스 위조, 사용자 정보 도용 등...🎜

    회신하다
    0
  • PHP中文网

    PHP中文网2017-05-18 11:00:41

    성능 코드 압축, 이미지 압축, http 요청 감소, ajax 비동기 등은 모두 성능에 도움이 됩니다

    안전한 XXS 암호화 코드

    회신하다
    0
  • 취소회신하다