前端优化——前端面试
目录
网站的性能评估
优化CSS
1、PostCSS优化CSS文件。
2、使用浅选择器
3、去掉不用的CSS
4、去掉冗余CSS
5、避免使用@import声明
6、link引入位置
7、延迟加载非关键CSS
8、尽量使用内联样式
9、对于浏览器不同或设备不同而定制的CSS，将其拆分，运行时仅加载必要的；
优化图片
1、选择合适的图片格式
2、使用正确的图片尺寸
3、响应式图片
4、把动图转换为视频
6、骨架屏
7、渐进式JPEG
8、雪碧图（Sprite）
9、tinyPNG压缩图片
优化字体
1、使用WebFont
2、压缩字体
3、取字体子集
字体时间线
字体阻塞周期
字体交换周期
字体失败周期
优化JavaScript
1、消除渲染阻塞
2、JavaSrcipt内
其他优化
浏览器渲染流程
网站的性能评估
Network面板；
Lighthouse评估；
优化CSS
1、PostCSS优化CSS文件。
PostCSS是一个用JavaScript工具和插件转换CSS代码的工具。
将
padding-top: 12px;padding-right: 16px;padding-bottom: 12px;padding-left: 16px;
转换成
padding: 12px 16px;
2、使用浅选择器
避免使用层层嵌套选择渲染对象。
3、去掉不用的CSS
uncss，一键去除css中的无样式。
缺点：工具不是很智能可能会误删一些有用代码。
一些无效的css代码会被删除。
4、去掉冗余CSS
csscss，运行
csscss -v --no-match-shorthand index.css
根据运行结果修改
5、避免使用@import声明
由于@import再次引入CSS文件，会引起CSS串行并行加载；
6、link引入位置
<link>标签引入到<body>标签底部，<script>标签之前；
会有无样式内容闪烁现象，因为开始显示只是渲染出的DOM结点，还没有加样式；
7、延迟加载非关键CSS
对于浏览器不同或设备不同而定制的CSS，将其拆分，运行时仅加载必要的；
8、尽量使用内联样式
优化图片
1、选择合适的图片格式
建议使用webp或svg格式
2、使用正确的图片尺寸
3、响应式图片
（1）CSS媒体查询
<body><image class="bg" src="./JerryATom.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
</body> <style>.bg{display: block;}@media screen and (min-width:1000px){.bg{width: 1000px;height: 600px;line-height: 60px;color:#000;background:chocolate;margin: 0 auto;}}@media screen and (max-width:600px) {.bg{width:500px;height:400px;line-height: 50px;color:#fff;background:cornflowerblue;margin: 0 auto;}}@media screen and (min-width:600px) and (max-width:1000px) {.bg{width:800px;height: 500px;line-height: 50px;color:#fff;background: darkred;margin: 0 auto;}}</style>（2）img的srcset属性，即设置不同屏幕密度下，加载不同图片；
<img src="image-128.png" srcset="image-256.png 2x" />屏幕密度为1x使用image-128.png，屏幕密度为2x时加载image-256.png
（3）<picture>
<picture><source media="(min-width: 650px)" srcset="demo1.jpg"><source media="(min-width: 465px)" srcset="demo2.jpg"><img src="img_girl.jpg">
</picture>4、把动图转换为视频
5、延迟加载图片
为img标签添加属性
loading='lazy'
6、骨架屏
在页面完全渲染完成之前，用户会看到一个样式简单的有大致框架的页面，然后逐步被市级资源替换；降低用户焦躁情绪；
7、渐进式JPEG
普通：局部展现-->全局展现；
渐进式JPEG：模糊的图片-->清晰图片;（工具：ImageMagic）
8、雪碧图（Sprite）
将许多小图放入一张大图中，主要作用是减少http请求；
缺点：没有扩展性（如果要更改，就要重新绘制雪碧图）
9、tinyPNG压缩图片
TinyPNG – Compress WebP, PNG and JPEG images intelligently
优化字体
1、使用WebFont
2、压缩字体
将ttf格式字体转换成WOFF格式，
npm i ttf2woff3、取字体子集
FOIT(Flash Of Invisible Text)大多数浏览器在自定义字体未下载前会隐藏文本
FOUT(Flash Of Unstyled Text)无样式文本闪烁
字体时间线
字体阻塞周期
未加载字体时，任何视图使用他的元素都必须渲染不可见的后备字体；如果期间字体加载成功，正常使用。
字体交换周期
未加载字体时，任何尝试使用它的元素都必须呈现后备字体；如果在此期间字体已成功加载，则正常使用它。
字体失败周期
如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。
优化JavaScript
1、消除渲染阻塞
将<script>放到<body>最下面
2、JavaSrcipt内
（1）使用===取代==
==会触发数据类型的自动转换，所以会比===慢；
（2）使用对象构造器
function Person(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
}
var Saad = new Person("Saad", "Mousliki")（3）使用自调用函数
函数在创建之后自动执行，称为立即执行表达式；IIFE（Immediately Invoked Function Expression）
(function(i){console.log(i)
})(2)（4）通过for-in循环检查对象属性
var obj = {name:"my name is obj",pro:"i have some protos"
}
for( var e in obj){if(obj.hasOwnProperty(e)){console.log(e)}
}//name
//pro（5）临时存储用于计算和查询的变量
将拿到的DOM赋给变量；
（6）避免数组使用负数作为索引
（7）不要使用eval()或函数构造器
每次调用时，JavaScript引擎都要将源代码转换为可执行的代码；
（8）避免使用width
使用with()可以吧变量加入到全局作用域，如果有同名变量，会覆盖；
（9）使用switch/case代替if/else
判断超过2个分支使用switch/case会更快，超过10个不要用switch/case
（10）使用对象作为对象的原型
（11）HTML字段转换函数
（12）首次为变量赋值使用var关键字
没有生命直接赋值会认为是全局变量；
（13）字符串去空格
（14）处理WebSocket超时
WebSocket连接30秒内没有任何活动，服务端会对连接进行超时处理；
未防止情况发生，可以每隔一段时间向服务器发送一条空消息。
（15）上线前压缩代码
其他优化
minify压缩代码；
http传输GZip压缩，
浏览器渲染流程
1、获取HTML文件，解析HTML文件、构建DOM树，同时浏览器主进程下载CSS文件；
2、CSS文件下载完成，解析CSS，形成RenderObject树；
3、布局RenderObject树，负责RenderObject树中的元素尺寸，位置等计算
4、绘制RenderObject树，绘制页面像素信息；
5、浏览器主进程将默认图层和复合涂层交给GPU进程，GPU进程在将各图层合成，最后显示页面
本文用于学习和思考，欢迎指正。
参考资料：
javascript优化15 - 搜索结果 - 知乎
简介 · 前端性能与工程化
更多推荐
前端优化——前端面试
发布评论