|
阅读：6142回复：0
前端比较简单的性能优化
1.0使用less或者sass。
使用less或者sass让css代码层次感更容易维护修，使用一些表达式语法加快开发速度，转换为css的时候选择器由外到内，优化了css性能。 没有使用less的css文件，有800行css代码，加载用了24毫秒，网速差的时候达到35毫秒。   使用了less的css，900行代码，加载只用了12毫秒。   传统页面开发为了更好的css性能推荐使用less或者sass，可以使用Kola工具进行less文件转换为css文件。 2.0使用雪碧图。 在网页开发中，图片是必不可少的，但是网站加载图片是的把每张图片下载下来，会拖慢网页加载速度，当网页图标较多时候我们考虑使用雪碧图。这样每次网页加载进来只需要加载这张图片。 描述：雪碧图 图片：)VX)PDPJ4}7IZME[QB{YWH4.png  打开系统，们就可以发现，虽然系统加载了不同图标，但是我使用了雪碧图，系统就只加载一张图片，这样加快系统打开速度。 描述：雪碧图加载案例 图片：WFKE_LI0KNF2X08R)CQ2@P6.png  使用方法： 描述：雪碧图使用代码 图片：Z_KB5}8Y}BLZPLXS54~A0_5.png  只需写容器宽高，背景图片地址，图片位置，第一个参数是x轴，第二个参数是y轴。 3.0 jQuery常用代码优化。 3.1 在开发过程中少用each去循环遍历，each性能远远低于for循环。 3.2 多使用jq缓存对象： 开发过程中我们会多次使用到一个元素的时候我们应该把他缓存起来在进行操作。 var pancakes = $('#pancakes li'); pancakes.eq(0).remove(); pancakes.eq(1).remove(); 4.0将css和js放在头部。 Css放在头部可以防止页面加载时候出现一些空白或者加载页面出现一些需要隐藏的元素。 Js放头部也一样效果，防止有些需要js控制元素隐藏或者元素样式加载页面时候出现空白。 图片：5NL[VTYSJQ8T~4FY_DW$`UJ.png  5.0 css不要使用*{margin:0;padding:0}。默认元素有什么不需要样式可以专门针对去除。 图片：{)$J{DPTB{7Z0G@ZWQLBMMN.png  6.0每次覆盖部署项目，都得清空浏览器缓存才能正常覆盖了系统。覆盖项目打开系统的时候都不需要清空缓存可以在头部加入。 <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"> |
|
|
