面试前端优化方案

加载策略

一. 懒加载 定义: 懒加载也叫延迟加载,指的是长网页中延迟加载特定元素(可以是图片,也可以是js/css文件,当然也可以是JavaScript的特定函数和方法,以下简称’懒加载元素’)

好处: 可以减少当前屏无效资源的加载

实际方式和实例: 把页面上 ‘懒加载元素’ src属性设置为空字符,把真实的src属性写在data-lazy属性中,当页面滚动的时候监听scroll事件,如果 ‘懒加载元素’在可视区域内,就把图片的src属性或者文件url路径设置成data-lazy属性值

二. 预加载 定义: 可以使用预加载让浏览器来预先加载某些资源(图片,js/css/模板),而这些资源是在将来才会被使用到的.简单来说,就是将所需资源提前加载到浏览器本地,这样后面在需要使用的时候就可以直接从浏览器缓存中取了,而不用再重新开始加载.

好处: 减少用户后续加载资源等待的时间

实现方式:

1. html标签 设置 display: none
2. 使用image对象 获取到src
3. 使用 preload prefetch preconnet 属性

三. 预渲染 : 提前渲染组件,隐藏起来,用到的时候再展示出来

四.按需加载

1. 常规按需加载 (js原生,jquery)
2. 不同app按需加载(js-sdk)
3. 不同设备按需加载(pc端和html5端)
4. 不同分辨率按需加载(css media query)

css渲染性能

一.提升css渲染性能

1. 谨慎使用expensive属性 例如: nth-child伪类; position:fixed定位
2. 尽量减少样式层级数 如: div ul li span i {color: blue;}
3. 尽量避免使用占用过多cpu和内存的属性 如text-indent: -99999px
4. 尽量避免使用耗电量大的属性 如css3 3d transforms, css3 transitions, opacity

二.合适使用css选择器

1. 尽量避免使用css表达式
2. 尽量避免使用通配选择器
3. 尽量避免使用正则的属性选择器

三.提升css文件加载性能

1. 使用外链css
2. 尽量避免使用@import

四.精简css代码

1. 使用缩写语句
2. 删除不必要的
3. 删除不必要的单位,如px
4. 删除过多分号
5. 删除空格和注释
6. 尽量减少样式表的大小

五.合理使用web fonts

1. 将字体部署在cdn上
2. 将字体以base64形式保存在css中并通过localStorage进行缓存
3. Google字体库应该使用国内托管服务

六.动画优化

1. 尽量避免同时动画
2. 延迟动画初始化
3. 结合svg
4. 使用3D硬件加速提升动画性能时，最好给元素增加一个z-index属性，人为干扰复合层的排序，可以有效减少chrome创建不必要的复合层，提升渲染性能，移动端优化效果尤为明显。