프런트 엔드 성능 최적화는 각 프런트 엔드에 필수적인 기술이다, 할 수있는 더 빨리 여러 측면에서, 오늘 프런트 엔드 성능 최적화 솔루션에 대해 이야기한다 사용자 대기를 감소, 오픈 액세스 자신의 웹 사이트를 만들기 위해 자신의 코드를 최적화,
페이지가로드에 URL을 입력 면접관은 종종에서 완료됩니다 물어,지도 아래 참조, 무슨 일?
2. DNS를 통해 브라우저. 그것은 URL 구문 분석의 IP
3. IP 주소와 TCP 연결을 설정, HTTP 요청 전송
4. 서버가 라이브러리를 확인 요청을 수신, 좋은 반환 HTTP 응답 바느질, 파일을 읽고
, 렌더링 시작, 브라우저는 첫 번째 화면의 HTML을 수신 5.
6. HTML 비트 DOM 구문 분석
7. 구문 분석 CSS 트리 CSS입니다
+ CSS를 8.dom 렌더링 트리 생성 그래픽
스크립트 JS 파일로드 (9)
(10)을 실행 파일 JS
클라이언트 측 캐싱의 브라우저 캐시
메모리 캐시를 필요로하지 않고, 디스크 캐시;
Etag입니다, 마지막-Modified304 인증이 필요한 요청;
H5 새로운 로컬 스토리지, sessionStorage;
캐싱의 더 합리적인 사용이 크게 프런트 엔드 성능을 향상시킬 수 있습니다.
2. 버전 번호 추가 <스크립트 SRC =하는 "a.js은? / _V는 1.6 ="> 같은 JQ는 VUE 공공 도서관, 내용이 변경되지 않았습니다 다시
지문 3.하지만 새로운 파일 생성 <= 스크립트 SRC를 "? / a.js을 H = abcd12sa"> 의 CDN 캐시를 해제 할 수는 없지만, 새로운 파일을 생성 문제 (HTML, JS 첫 번째에)있을 것
4. 최종 최고의 생산 문서 <스크립트 SRC = "/ a.abcd12sa.js"의 탄생 > html로 웹팩 빌드 패키지로 처음 JS에,
(1) 병합되지 않은 경우 ===> 파일 및 N의 증가의 사이에 삽입 된 업 링크 요청 - 1 개 지연 네트워크 더욱 영향 패킷 손실, 프록시 서버를 통해 분리 될 수있다
2. 합병 ===> 환경 설정 스크린 렌더링 시간이 길어지면, 실패의 파일 캐시 넓은 영역
3. 공공 도서관의 합병, 다른 페이지의 합병
4. 파일 병합의 온라인 사이트, 병합 파일 nodejs 달성 사용
2.expires : 2020년 3월 16일 (월) 그리니치 표준시 09시 50분 27초
3.last - 수정 : 2018년 2월 15일 (목) 그리니치 표준시 14시 17분 52초
메모리 캐시
같은 일반적인 데이터 JS로, 단명 캐시 메모리는, 브라우저는 또한 자신의 전략, base64로 사진, 정적 리소스의 용량이 작은
서비스 노동자 캐시
자바 스크립트의 독립적 인 스레드를 메인 쓰레드, 그것은 무대 뒤에서 작동, 브라우저 창에서 분리, 것은 오프라인 캐싱 및 기타 네트워크 프록시를 할 수 있습니다
이미지 최적화
2.png
HTTP 요청이없는 상태에 있기 때문에, 그래서 필요한 쿠키입니다 클라이언트 상태를 유지는
쿠키 생성 모드 : 설정 쿠키 HTTP 응답 헤더, 쿠키 document.cookie를 읽을 수있다 JS
사용 : 상호 작용하는 브라우저 측 및 서버 측, 클라이언트 저장 자신의 데이터
만료 : 만료
저장 용량 제한 : 4킬로바이트의 크기에 대한 브라우저 매장으로, 당신은 만료 만료 시간을 설정해야
쿠키 저장 용량은 로컬 스토리지를 대체
Http 만 읽기 및 쓰기 JS 할 수 없습니다
아래의 관련 도메인 이름의 쿠키 --- 손실 흐름 CDN. 해결 방법 : CDN 도메인 이름과 도메인 이름은 주요 역에서 분리 할
재 도장 역류
// 많은 시간 스로틀 모든 함수 번 수행
CONST = 스로틀 (FUNC, 대기 = 100) => {
없이 기능이 100 밀리 횟수의 // 호출
lastTime = 0하자,
창 (인수를 ...) => {
. = 새 새로 만들기) () (이제 다음 getTime을 날짜를 할
경우 (현재 - lastTime> 대기가) {
func.apply (this.args)
lastTime 지금 =
}
}
}
의 I는 =하게 1;.
window.addEventListener ( '스크롤' 스로틀 (() => {
// 수행 지연로드를 사용하여 이미지
CONSOLE.LOG을 (I)
I =. + 1
}, 350))
|
1
이
삼
4
5
6
(7)
8
9
(10)
(11)
(12)
(13)
(14)
(15)
(16)
(17)
(18)
(19)
(20)
(21)
(22)
(23)
24
|
/*
校验用户是不是重复，用户输入完，向后端发送请求
如果用户每次输入，都发生请求，造成请求过多
用户停止输入字符串350毫秒，在发出
*/
const
debounce = (func,wait = 350) =>{
let
timer =0;
return
(...args)=>{
if
(timer) {
clearInterval(timer)
}
timer = setTimeout(() => {
func.apply(
this
,args)
}, wait);
}
}
let
i =1;
window.addEventListener(
'scroll'
,debounce(()=>{
// 验证
console.log(i)
i+=1
},350))
|
lazy-load
对于一些图片多，页面长的网页来说，如果每次打开页面加载全部的网页内容，页面加载速度势必会受到影响，如果每次打开网页只将网页可视区域的内容加载给用户 ，将大大提高网页浏览速度，同时也减轻服务器负载，我们可以使用lazyload.js来实现对图片的延迟加载，当网页图片进入到浏览器可视区域时，才会去请求服务器加载图片。
// 获取所有的图片
const img = document.getElementsByTagName('img')
// 获取可视区域的高度
const viewHeight = window.innerHeight || document.documentElement.clientHeight;
// num用于计算当前显示到那一张图片，避免每次都是从第一张开始检查是否漏出
let num =0;
function lazyload() {
for(let i=num;i<img.length;i++) {
// 用可是区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - img[i].getBoundingClientRect().top
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
if(distance >=0) {
// 给元素写入真实的src，展示图片
img[i].src = img[i].getAttribute('data-src')
// 前i张图片已经加载完毕，，下次从第i+1张开始检查是否露出
num = i+1
}
}
}
// 监听scroll
window.addEventListener('scroll',lazyload,false)
performance.getEntriesByType('navigation') 性能检测
通过在浏览器控制台输入这个命令，就可以检测到网页加载数据，检测网页加载性能
npm install -g lighthouse
安装完之后运行，也是找的github网址，运行成功之后，会弹出一个生成的html页面。
生成一个html文件，找到然后直接打开就行
浏览器渲染
