javascript > style > layout > paint > composite
如果JS的操作影响到了界面样式的变革，则有上面的处理流程
如果style的操作影响到布局，则会进入layout，反之亦然；style改了transform属性，在blink和edge浏览器里面不须要layout和paint
避免head标签JS堵塞
异步加载JS: HTML5 的script 属性 defer
JS写在body后面
Tips: 可能有时候JS库，还没加载完就要实行了，可能会报错
减少 head 中的 CSS 资源
CSS 会影响到 layout ，写在Body里面会界面闪烁，但写在Head里面如果太多会影响渲染
不要写太多base64，虽然很方便，但会改变文件大小
如果CSS文件没有达到三位数的大小，可以直接写到Html界面中，由于如果利用外链样式，则可能会花费更多韶光，如DNS解析，建立链接，下载等
优化图片，利用相应式图片，图片的srcset 属性，会有兼容问题
<img srcset='photo_w350.jpg 1x photo_w640.jpg 2x' src='phtot_w350.jpg' alt=''>
利用picture按需加载，须要写在HTML中，如果利用JS来调用，则无效
<picture>
<source srcset='baner_w1000.jpg' media=\公众(min-width:801px)\"大众> # source 还有其它的优化属性，不过会有兼容问题: type='image/webp'
<source srcset='baner_w800.jpg' media=\公众(max-width:800px)\公众>
<img src='baner_w800.jpg' alt=''> # picture 必需有 img 标签，只有img标签才会触发onload事宜; picture 与 source 都不触发 layout
</picture>
判断浏览器是否支持：
var supportSrcset = 'srcset' in document.createElement('img');
var surportPicture = 'HTMLPictureElement' in window;
延迟加载
<picture>
<source data-srcset=\"大众photo_w350.jpg 1x, photo_w640.jpg 2x\"大众>
<img data-src=\"大众photo_w350.jpg\"大众 src=\公众about:blank\"大众 alt=\公众\"大众> # src 写为此值不会报错，也对浏览器友好
</picture>
监听Scroll事宜
showImage(leftSpace = 500){
var scrollTop = $window.scrollTop(), $containers = this.$imgContainers, scrollPosition = $window.scrollTop() + $window.height();
for(var i = 0; i < $containers.length; i++){
//如果快要滑到图片的位置了
var $container = $containers.eq(i);
if($container.offset().top - scrollPosition < leftSpace) {
this.ensureImgSrc($container);
}
}
}
ensureImgSrc($container) {
var $source = $container.find(\"大众source\"大众);
if($source.length && !$source.attr(\"大众srcset\"大众)){
$source.attr(\公众srcset\"大众, $source.data(\"大众srcset\公众));
}
var $img = $container.find(\"大众img:not(.loading)\"大众);
if($img.length && $img.attr(\公众src\"大众).indexOf(\"大众//\"大众) < 0){
$img.attr(\"大众src\"大众, $img.data(\公众src\"大众));
this.shownCount++;
}
}
init(){
//初始化
var leftSpace = 0;
this.showImage(leftSpace);
//滑动
$window.on(\"大众scroll\公众, this, this.throttleShow);
}
ensureImgSrc($container){
//如果全部显示，off掉window.scroll
if(this.shownCount >= this.allCount){
$window.off(\公众scroll\公众, this.throttleShow);
}
}
指定图片尺寸，避免 reflow
4. 压缩与缓存浸染
第一个是把200变成304，避免资源重新传输，
第二个是让浏览器直接从缓存取，连http要求都不用了，这样对付第二次访问页面是极为有利的。
开启压缩 gzip
server {
gzip on;
gzip_types text/plain application/javascript application/x-javascript text/html text/css text/xml text/javascript
}
缓存 Cache-Control
location ~ \.(jpg|gif|png|webp) {
expires 30d;
}
location ~ \.(css|js) {
expires 1d;
}
此方法会在返回的要求相应头中添加 Cache-Control: max-age=604800 ， 且 max-age 的优先级会大于 last-modified
开启 nginx last-modified 字段，在相应头中： last-modified 字段吸收nginx的数据，在要求头中： If-Modified-Since 字段返回给nginx
这个办法得查手册
利用etag，在相应头中是： Etag 字段 ，在要求头中会记录在 If-None-Match 字段
server {
etag on;
}
5. 其它优化DNS预读取
<link rel=\公众dns-prefection\"大众 href=\公众https://www.google.com\"大众> # 在Head标签中添加相应的域名，由于它是并行的，不会堵塞页面渲染
HTML优化
删除注释、缩进，除了 pre 或 code 这样的标签不能删除，其它的都可以
代码优化
例如说html别嵌套太多层，否则加重页面layout的压力
CSS的选择器别写太繁芜，不然匹配的打算量会比较大
JS的滥用闭包，闭包会加深浸染域链，加长变量查找的韶光
6. 利用HTML5或CSS3代替图片 或 LocalStorage、 Offline Storage
