- DNS是否可以通过缓存减少DNS查询时间
- 网络请求的过程走最近的网络环境
- 相同的静态资源是否可以缓存
- 能否减少请求http大小
- 减少http请求
资源的合并与压缩
- 减少http请求数量
- 减少请求资源的大小
html的压缩和混淆
> 删除空格、制表符等。
css的压缩和混淆
> 无效代码删除,
> html-minifier
> css语义化合并
> clean-css [clean-css](https://www.npmjs.com/package/clean-css)
> 无效字符的删除
> 删除注视
> 代码语义的缩减和优化
> 代码保护 - 混淆
js的压缩和混淆
> 使用uglify-js [uglify-js](https://www.npmjs.com/package/uglify-js)
文件合并
> 文件与文件之间有插入的上行请求,增加了N-1个网络延迟
> 受丢包问题影响更严重
> 经过代理服务器时可能会被断开
> 合并后文件如果过大首屏渲染问题
> 缓存失效问题
-
> 公共库合并
> 不同页面的引用文件合并。
开启gzip
>
Html页面加载渲染的过程
浏览器获取到html文件后,会进行html文件词法分析,后分析成词法token,添加到DOM树上,解析到Css后进行解析,分析成对应CSSDOM树,然后DOM和CSSDOM同步解析好后合并成Render Tree 进行渲染。
顺序执行、并发加载
词法分析
> 词法分析是从上到下分析执行。
并发加载
> 解析html时会并发请求资源
- 并发上限
- 是否阻塞
- 依赖关系
- 引入方式
Css阻塞
- css在heade中会阻塞页面的渲染
- css会阻塞内部js的执行
- css不会阻塞外部脚本的加载。
Js阻塞(单线程的原因)
- 直接引入的js会阻塞页面的渲染
- js不阻塞资源的加载
- js顺序执行,阻塞后续js逻辑的执行。(可以通过async执行。可能会有报错)
懒加载和预加载
懒加载
- 图片进入可是区域之后请求图片资源
- 对于电商等图片很多,页面很长的业务场景适用
- 减少无效资源的加载
- 并发加载的资源过多会阻塞js的加载。影响网站的正常使用。
预加载
- 图片等静态资源在使用之前的提前请求。
- 资源使用到时能从缓存中加载,提升用户加载
- 页面展示的依赖关系维护。
重绘与回流
会,重绘与回流频繁触发会导致ui频繁渲染,最终导致js执行变慢。
回流
- 当reander tree中的一部分因为元素的规模尺寸、布局、隐藏等改变而需要重新构建,会触发回流机制。
- 当页面布局和几何属性改变时就需要回流。
重绘
- 当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观、风格而不影响布局的、比如color、background-color 则称之为重绘
新建DOM的过程。
- 1、获取DOM后会分割为多个图层
- 2、对每个图层的节点计算样式结果(Recalculate style -- 样式重计算)
- 3、为每个节点生成图形和位置(Layout - 回流和重布局)
- 4、将每个节点绘制填充到图层位图中。(Paint Setup 和 Paint -- 重绘)
- 5、图层作为纹理上传至GPU
- 6、符合多个图层到页面上生成最终屏幕图像(Composite Layers -- 图层重组)
如何将DOM元素变成新的独立图层?
Chrome创建图层的条件。
- 1、3D或者透视变化css属性(perspective transform)
- 2、使用加速视频解码<video>节点
- 3、拥有3D(WebGL)上下文或加速的2D上下文的<canvas>节点。
- 4、混合插件(如Flash)
- 5、对自己的opacity做css动画或使用一个动画webkit变化的元素
- 6、拥有加速css过滤器的元素。
- 7、元素有一个包含复合层的后台节点
- 8、元素有一个z-index较低且包含一个复合层的兄弟元素。
<style>
div{position:relative;}
img{position:absolute;z-index:123;}
span{z-index:1;}
</style>
<div>
<img />
<span></span
</div>
实战优化点。
- 1、因为top会回流,所以使用transform来替代top的改变。。 不考虑ie8以下的话。
- 2、用opacity来替代visibility;
- 3、把DOM离线后修改,比如:先把DOM给display:none 然后修改完毕后再显示出来。
- 4、不建议使用table,因为只要tb有一个小变动,整个table都要重新回流和重绘制
- 5、启用GPU硬件加速
- 6、对动画进行新建图层。transform;
缓存
这个地方讲的是浏览器缓存