前端优化——前端面试
目录
网站的性能评估
优化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 ttf2woff
3、取字体子集
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 - 搜索结果 - 知乎
简介 · 前端性能与工程化
更多推荐
前端优化——前端面试
发布评论