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

성능

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 요청을 사용할 수 있음) 대상 웹사이트 사용자를 속여 악성 웹사이트에 액세스하는 것입니다. 웹 사이트에 접속하면 해당 요청이 시작되고(그리고 쿠키와 같은 해당 사용자 식별 정보를 사용하여) 이때에도 공격이 발생합니다🎜 🎜인터페이스 작업 하이재킹🎜 🎜인터페이스 위조, 사용자 정보 도용 등...🎜

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

안전한 XXS 암호화 코드