前端优化

作者: 该昵称注册中 | 来源:发表于2018-04-27 15:28 被阅读0次
    网页的性能优化
    1. 网页在加载js时,可以把js放在最后加载,或者用h5的async/defer加载.
    2. 在加载图片时,对小图片可以用base64位的图片加载,把多个图片放在一张图片里面,通过位置的不同显示不同的图片,这样可以减少请求图片的请求,称为雪碧图,对图片进行压缩处理,
    3. 减少加载的js和css个数 进行合并 减少iframe的使用
    4. 写高性能DOM:回流和重绘.回流:DOM结构中每个元素都有自己的盒子模型,浏览器要根据它的样式来计算它在浏览器中出现的位置,称为回流。重绘:当各种盒子的位置,颜色,字体大小都确定后,浏览器就根据它的特性对元素进行绘制.称为重绘。DOM元素的添加,删除,替换都会触发回流+重绘.仅修改DOM元素的字体,只触发重绘(不需要调整布局).回流一定触发重绘,重绘不一定触发回流。如何避免触发回流和重绘,display的值会影响布局,从而影响布局元素位子发生改变,1:减少DOM的操作,2:添加多个DOM节点时,先拼接好,再一次性添加上去.3:对于要多次使用的DOM,可以先用变量保存起来,不要每次都去查找耗资源
    5. 减少闭包的使用,内存要得到及时的释放
    6. 用div+css代替table布局
    代码优化
    1. 减少HTTP请求, http优化,使用语义化标签,减少iframe,避免重定向
    2. css优化 布局代码写在前面,删除空样式,不滥用浮动,字体,更具需求加 选择器优化 避免使用表达式 避免使用id选择 避免使用 important
    3. js 优化 压缩 减少重复代码 少使用闭包
    4. 图片的优化 图片合并 使用css sprite技术
    5. 减少DOM操作 缓存已经访问过的元素 离线跟新节点 在添加到树中,避免用js输出布局 css控制

    相关文章

      网友评论

        本文标题:前端优化

        本文链接:https://www.haomeiwen.com/subject/ydablftx.html