关于web页面优化

时间 2019-11-10

标签关于 web 页面优化栏目 HTML 繁體版

原文原文链接

简单汇总了一下web的优化方案（主要的前端优化策略）

减小http请求次数
- 文件合并（js、css、图片）；ps：多个图片合并以后，整体积会变小
- 内联图片，即data:URL scheme，但容易致使html页面混乱
- 可缓存的ajax
- 尽可能使用get而不是post，get仅发送一次TCP数据包，而post会发送两次
- 使用专用的静态服务器域名，这样在请求静态文件时，就不会传递cookie了，节省带宽
推迟加载内容
- 如动画等，能够等页面必备的逻辑执行完后再执行动画
预加载
- 空闲的时候，加载接下来可能用到的东西
- 无条件的预加载

测试代码index.htmlcss

onload中进行图片预加载html

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>
    function parseDom(arg) { let objE = document.createElement("div"); objE.innerHTML = arg; return objE.childNodes[0]; }; window.addEventListener('load',function(){ let loader = document.getElementById('preload'); loader.append(parseDom('<img src="pic/IMG_20170914_115807.jpg"/>')); }) </script>
<body>
    <a href="2.html">去下一个页面</a>
    <div id="preload" style="display: none;"></div>
</body>
</html>

2.html前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
<body>
    <img src="pic/IMG_20170914_115807.jpg"/>
</body>
</html>

访问首页时，进行预加载jpgweb

访问2.html时，就不须要再次加载了，加快了响应速度 ajax

有条件的预加载：根据用户的操做预测接下来可能访问的东西，提早加载资源
减小dom的数量，检测数量 document.getElementsByTagName('*').length ，数量多形成reflow慢、元素定位慢
使用CDN

内容分发网络（Content Delivery Network，CDN）是由一系列分散到各个不一样地理位置上的Web服务器组成的，它提升了网站内容的传输速度。用于向用户传输内容的服务器主要是根据和用户在网络上的靠近程度来指定的。例如，拥有最少网络跳数（network hops）和响应速度最快的服务器会被选定。
express

避免使用css expression，由于表达式须要实时更新，使计算次数很是频繁
使用外部js和css，由于浏览器能够对其进行缓存，多页面复用同一个文件的时候效果明显
对js和css文件进行压缩
css放在顶端head标签内
把能够延迟执行的js放在底部，由于默认状况下script标签的下载和执行都是同步的,想要动态加载script，可使用第三方的lab.js
网上还有说把js打包成png的，看了评论感受实用性不是很大，压缩效率和gzip差很少，并且好像出现中文内容，就会打包失败，还要求支持canvas（IE8以上）
尽可能少用全局变量，容易出现混乱并且不易于回收（除非你手动删除），容易形成内存泄漏
对于重复运行的代码，用setInterval而不是用setTimeout
语句数量最小化

/**不提倡**/
var i = 1; var j = "hello"; var arr = [1,2,3]; var now = new Date(); /**提倡**/
var i = 1, j = "hello", arr = [1,2,3], now = new Date(); /**不提倡**/
var name = values[i]; i++; /**提倡**/
var name = values[i++];

过深的原型链也会致使效率低下
设置动画元素为absolute或fixed

position: static或position: relative元素应用动画效果会形成频繁的reflow。canvas

position: absolute或position: fixed的元素应用动画效果只须要repaint。浏览器

尽可能把多个操做放到一个timer中，而不是使用多个timer
字符串链接采用Array.join而是使用+，前者不会建立临时对象，能下降垃圾回收的开销【不一样浏览器实现方式不一样，所以有不一样的争议】
性能上来讲：""+字符串>String()>.toString()>new String()。
dom对象与js对象相互引用、事件绑定等容易形成内存泄漏，由于dom对象通常不会被销毁，除非你去删除dom
多个元素的点击事件转换为一个父容器的点击事件，可提升效率
尽可能在循环外部使用tryCatch（我的理解就是catch语句块会建立一个做用域，循环中建立做用域致使性能低下）
对dom定位时，尽可能在某个父容器中进行搜索，减少搜索范围
减小使用with，with有本身的做用域，会增长做用域链的长度，优化策略是减少做用域的长度，下降做用域链上的搜索时间

dom节点优化缓存

　　节点优化的关键在于下降reflow次数，先了解如下什么是reflow【可理解为刷新重绘等】服务器

accepted

A reflow computes the layout of the page. A reflow on an element recomputes the dimensions and position of the element, and it also triggers further reflows on that element’s children, ancestors and elements that appear after it in the DOM. Then it calls a final repaint. Reflowing is very expensive, but unfortunately it can be triggered easily.

Reflow occurs when you:

insert, remove or update an element in the DOM

modify content on the page, e.g. the text in an input box

move a DOM element

animate a DOM element

take measurements of an element such as offsetHeight or getComputedStyle

change a CSS style

change the className of an element

add or remove a stylesheet

resize the window

scroll

1.使用 DocumentFragment 能够减小reflow次数

2. css优化

如如下代码逐条更改元素的几何属性，理论上会触发屡次reflow。

element.style.fontWeight = 'bold' ; element.style.marginLeft= '30px' ; element.style.marginRight = '30px' ;

能够经过直接设置元素的className直接设置，只会触发一次reflow。
```
element.className = 'selectedAnchor' ;
```

3.当dom元素比较多的时候，能够对要频繁操做的dom元素进行缓存，而不是每次都进行定位

4.innerHTML建立dom的效率要大于createElement()和appendChild()和document.write

5.避免的空的src和href，空的表明加载当前页面，这是没有必要的

6.多innerHTML的屡次赋值转换为一次赋值，可下降reflow

var str = "<div>这是一个测试字符串</div>"; /**效率低**/
var obj = document.getElementsByTagName("body"); for(var i = 0; i < 100; i++){ obj.innerHTML += str + i; } /**效率高**/
var obj = document.getElementsByTagName("body"); var arr = []; for(var i = 0; i < 100; i++){ arr[i] = str + i; } obj.innerHTML = arr.join("");

闭包优化

for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(index) { return function(evt) { output.innerText += 'Clicked ' + events[index]; }; })(i); }

for (var i = 0; i < btns.length; i++) { btns[i].onclick = (function(event) { return function(evt) { output.innerText += 'Clicked ' + event; }; })(events[i]); }

以上两段代码的区别：前者对event造成依赖，然后者不会。当外部的event被修改了或者被删除了，前者因为造成了依赖，没法正常工做，然后者没有依赖，能够正常执行