프런트엔드 성능 최적화 및 기술_자바스크립트 기술

서문 프론트엔드 엔지니어에게 성능 최적화가 중요한 이유

업계에서는 들어보셨을지 모르겠지만 '성능 최적화를 이해하고 jquery 소스코드를 연구해 본 사람이 작성한 코드의 성능 소모는 그 코드의 수백 배는 다르다'는 말이 있습니다. 성능 최적화를 수천 번 ' 이해하지 못하는 사람은 현재 자바스크립트가 ECMAscript3에서 ECMAscript5 및 ECMAscript6으로의 전환 프로세스입니다. 자바스크립트가 완벽하지 않을 때 부적절한 코딩 방법으로 인해 발생하는 문제는 무시할 수 없습니다.

성능 최적화

이제 성능 최적화에 대한 몇 가지 통찰력을 여러분과 공유하겠습니다.

1. 스프라이트 맵

가장 기본적인 것은 배경 이미지를 최대한 스프라이트 맵으로 만들어 이미지 요청을 줄이는 것이므로 일반 웹 엔지니어의 또 다른 기본 본능은 스프라이트 맵.

2.css 선택기 최적화

CSS에서는 가능한 한 하위 항목 선택자를 사용하고 하위 항목 선택자를 덜 사용하십시오. 하위 항목 선택자를 사용하면 검색 엔진이 모든 하위 항목 요소를 검색합니다. 검색을 통해 검색 엔진의 성능 소모를 줄입니다.

3.js는 스타일을 변경하고 클래스명을 직접 운영합니다

js에서 요소 스타일을 조작할 때 스타일을 직접 추가하지 마세요. 일반적으로 속성이 적으면 성능에 큰 영향을 미치지 않습니다. 실제로 스타일을 추가할 때마다 그렇지는 않습니다. 페이지가 다시 그려지므로 다시 그리기에 주의해야 합니다. 스타일을 조작할 때 클래스 이름을 직접 조작하면 다시 그리기가 한 번만 발생하고 스타일이 있는 스타일을 직접 추가하면 다시 그리기가 여러 번 발생합니다.

4.js는 dom 노드를 직접 운영합니다

노드를 운영할 때 요소 뒤에 노드를 추가해 보세요. 노드 앞에 삽입하면 삽입된 노드 뒤의 노드가 리플로우를 발생시키므로 뒤에 삽입할 때는 삽입된 노드만 리플로우하면 됩니다. 노드를 한 번 .

일부 사람들은 다시 그리기와 리플로우의 개념을 이해하지 못할 수도 있습니다

5. 일반 매칭 선택자

6.js 요소 획득 최적화

js에서 요소를 가져올 때 일반적으로 document.getElementsById를 사용합니다. 검색 엔진은 창에서 문서를 찾을 때까지 Dom 트리 맨 아래부터 검색한 다음 검색으로 돌아갑니다. 요소를 얻을 때 document.body를 저장하는 것이 가장 좋습니다. 다시 사용할 때 이 변수를 꺼내서 사용하면 검색 엔진의 성능이 저하될 수 있습니다

7. 메모리 오버플로

일반적으로 재귀를 실행하면 메모리 오버플로가 발생하여 재귀를 실행할 때 성능이 크게 저하됩니다. 작업이 완료된 후 시스템에서 메모리를 재활용하므로 재귀를 실행할 때는 객체를 사용해야 합니다. 값을 저장하기 위해 존재하는 경우 직접 반환되며, 존재하지 않는 경우 추가되므로 재귀 성능이 뛰어납니다.

8. Ajax에 GET 요청 사용

POST 요청은 HTTP 요청 헤더를 먼저 보낸 다음 데이터를 보내는 방식으로 구현됩니다. GET에는 요청 헤더가 없지만 주의해야 합니다.

: GET 크기 제한은 약 4K인 반면 POST에는 제한이 없습니다.

9. 이미지 지연 로딩

                                                                                                                                                                     요청량이 너무 많으면 페이지가 이미지 위치로 스크롤될 때 이미지가 느리게 로드될 수 있습니다.

이제 이미지 지연 로딩을 위한 플러그인을 추천합니다

   10.避免图片src属性为空

    src 属性是空字符串的图片很常见，主要以两种形式出现：

    

    var img = new Image();img.src = “”;

    这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

    技巧
        1.排他思想

    先排除当前所有的，再进行下一次操作；一般在进行动画、添加样式等时,在二次操作时先清楚前面的样式再从新添加新的样式，避免同时进行动画的冲突。

        2.短路运算（||）

    一般在一个值需要判断是否存在时，尽量不要使用if语句,可以使用短路运算符，可以省去代码占用的内存。比如：

 a=a||b;

a存在则使用a，a不存在则使用b。

3.运算（&&）

可以运用在条件匹配时，以便条件的多余查询，比如判断一个对象是否为数组时，

a && a.length&& a.length>=0

4.伪数组以及数组

当需要封装一个非数组元素变为一个数组时，最简单的办法就是给其添加一个[],如果需要是一个伪数组时，可以给其设置一个length属性。

5.节流阀

一般运用在动画中，设定一个值，开始时设置为true，判断其值，在进入动画时给这个值赋值为false，在动画结束时使用回调函数再重新赋值为true。

6.解除文本的被动选中状态（纯干货）

当在点击一些按钮时，有时会出现文本被选中的情况，让客户看见就犹如bug一般，以下是解除这一状态的代码，粘贴即可。

 if(document.all){
    document.onselectstart= function(){return false}; //for ie
  }else{
    document.onmousedown= function(){return false};
    document.onmouseup= function(){return true};
  }
  document.onselectstart = new Function('event.returnValue=false');

7.巧妙使用三元运算符

当需要判断一个值是否存在，也可以使用三元运算符使代码更加优化。比如

  obj=obj===undefined?Object:obj;

        补充：

        上述是自己在工作中，总结的前端优化以及一些技巧与大家分享，如果大家有什么好的优化以及技巧希望可以多多评论，个人认为技术是需要多沟通才可以更好的进步。