一、从输入URL到得到整个页面的详细过程
- 获取资源
- 浏览器根据DNS服务器得到域名的IP地址
- 向这个IP的机器发送http请求
- 服务器收到，处理并返回http请求
- 浏览器得到返回内容
- 浏览器渲染页面
- 根据HTML结构生成DOM Tree
- 根据CSS生成CSSOM
- 将DOM和CSSOM整合形成RenderTree
- 根据RenderTree开始渲染和展示
- 遇到<script>时，会执行并阻塞渲染
二、加载资源优化
1. 资源的压缩合并
资源包括html、css、js、image等。
- html、css、js的压缩，主要借助于webpack的配置。
- image 压缩
- 在线工具: https://tinypng.com
- 雪碧图: http://www.spritecow.com（优点：减少网络请求，缺点：一旦请求失败，多张图片都失败）
- 对于尺寸较小的图片使用base64转换
- 使用尺寸较小的svg图片
- 使用iconfont文件
2. 使用缓存资源
eg: 引用同一版本的js，通过链接名控制缓存。如果更新内容，重新生成名称。
3. 使用CDN（内容分发网络，使用户就近获取内容）让资源加载更快。https://www.bootcdn.cn/
4. 后端渲染，数据直接输出到HTML中
三、渲染优化
1. CSS放在head中，js放在body结尾前
2. 懒加载和预加载
-
懒加载
① 原生js实现懒加载<img src="" data-original="图片" lazyload="true" />var viewHeight = document.documentElement.clientHeight; function lazyload() { var eles = document.querySelectorAll('img[data-original][lazyload]'); Array.prototype.forEach.call(eles, function (item, index) { var rect; if(item.dataset.original === ''){ return; } rect = item.getBoundingClientRect(); if (rect.bottom >= 0 && rect.top < viewHeight) { var img = new Image(); img.src = item.dataset.original; img.onload = function () { item.src = img.src; } item.removeAttribute('data-original'); item.removeAttribute('lazyload'); } }) } lazyload(); document.addEventListener('scroll', lazyload);
② 使用lazyload.js
- 预加载
① html中直接引用display:none的图片，从缓存中直接获取
② 使用Image对象，缺点:不能获取加载进度
③ 使用原生XHR，优点：可以获取进度，缺点: 跨域资源无法加载var img = new Image(); img.src = '图片地址'
④ 使用preload.jsvar xmlhttprequrest = new XMLHttpRequest(); xmlhttprequrest.onreadystatechange = callback; xmlhttprequrest.onprogress = progressCallback; xmlhttprequrest.open('GET', '图片地址', true); xmlhttprequrest.send(); function callback() { if (xmlhttprequrest.readyState == 4 && xmlhttprequrest.status == 200) { var responseText = xmlhttprequrest.responseText; } else { console.log('request was unsuccessful:' + xmlhttprequrest.status); } } function progressCallback(e) { e = e || event; if (e.lengthComputable) { console.log('Received' + e.loaded + 'of' + e.total + 'bytes'); } }
3. 尽早执行
widow.onload:页面全部资源加载完成后才会执行，包括图片、视频等。
DOMContentLoaded: DOM渲染完即可执行，此时图片、视频还没有完全加载完。
4. 减少回流重绘
一、发生回流重绘的情况
添加或删除可见的DOM元素
-
元素的位置发生变化
top、bottom、left、right、position、float、clear -
元素的尺寸发生变化（包括高度和宽度、外边距、内边框、边框大小等）
width、height、padding、margin、border-width、min-height -
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
text-align、font-weight、overflow、font-family、vertival-align、white-space、font-size 页面一开始渲染的时候
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
-
获取布局信息的操作的时候，会强制队列刷新
offsetTop、offsetLeft、offsetWidth、offsetHeight scrollTop、scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight getComputedStyle() getBoundingClientRect
二、减少回流和重绘的方法
1. 批量修改样式
// 触发三次回流重绘
var el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px'
- 使用cssText
var el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;'
- 修改CSS的class
var el = document.getElementById('test');
el.className += ' active';
2. 批量修改DOM，使元素脱离文档流
1. 使元素脱离文档流（引发回流）
2. 对其进行多次修改
3. 将元素带回到文档中（引发回流）
反例：
let data = new Array(100).fill(0);
function appendDataToElement(appendToElement, data) {
let li;
for (let i = 0; i < data.length; i++) {
li = document.createElement('li');
li.textContent = 'text';
appendToElement.appendChild(li);
}
}
const ul = document.getElementById('list');
appendDataToElement(ul, data);
① 隐藏元素，应用修改，重新显示
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';
②使用文档片段，在当前DOM之外构建一个子树，再把它拷贝回文档
const ul = document.getElementById('list');
const fragment = document.createDocumentFragment();
appendDataToElement(fragment, data);
ul.appendChild(fragment);
③将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始元素
const ul = document.getElementById('list');
const clone = ul.cloneNode(true);
appendDataToElement(clone, data);
ul.parentNode.replaceChild(clone, ul);
3. 获取布局值提前缓存
const width = box.offsetWidth; // 提前缓存
function initP() {
for (let i = 0; i < paragraphs.length; i++) {
paragraphs[i].style.width = width + 'px';
}
}
4. 样式布局方面的优化
- 对于复杂动画效果，使用绝对定位让其脱离文档流。
- css3硬件加速（GPU加速）
常见的触发硬件加速的css属性：transform, Will-change
太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。因此在动画结束的时候需关闭硬件加速，否则会产生字体模糊。 - 不使用table布局。
5. 事件节流
var textarea = document.getElementById('text');
var timeoutId;
textarea.addEventListener('keyup',function(){
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function() {
// ...
},100)
})
6. 使用 passive 改善滚屏性能
addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])
options 可用的选项如下：
-
capture:Boolean，表示listener会在该类型的事件捕获阶段传播到该EventTarget时触发。 -
once:Boolean，表示listener在添加之后最多只调用一次。如果是true，listener会在其被调用之后自动移除。 -
passive:Boolean，设置为true时，表示listener永远不会调用preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
document.addEventListener("touchmove", function(e){
...
/**
浏览器不知道这里会不会有 e.preventDefault(),
因此等脚本执行完后，才执行浏览器默认行为
**/
},
{
passive: true
/** 加上该属性后，会自动忽略e.preventDefault()，
因此可以在两个线程里同时执行监听器中的代码和浏览器的默认行为，减少卡顿行为**/
})
