精华内容
下载资源
问答
  • 前端优化

    2019-03-28 14:35:00
    如下: 前端优化和后端优化一样无穷无尽。随着认知的提升,优化手段会不断增加。并且优化层次逐渐深入 前端优化时候必须具备的一些隐藏知识点。 列举一二,不全的隐藏技能希望大家有空补充下,此文仅仅抛砖引玉: ...

       
      下午突然讨论到前端问题,就把近几年自己能探知到的几点东西稍微整理下。如下:

          前端优化和后端优化一样无穷无尽。随着认知的提升,优化手段会不断增加。并且优化层次逐渐深入 前端优化时候必须具备的一些隐藏知识点。

    列举一二,不全的隐藏技能希望大家有空补充下,此文仅仅抛砖引玉:

            1、H5 缓存很常见 (localstorage )用来缓存菜单,常用字段等常见的 页面级缓存不下 7,8种 常见易操作的属于 h5 新特性比较好用。

            2、js 的事件基本模型、事件流控制流转、js 文档碎片等

            3、浏览器本身的重绘、回流、页面标签总数量等

           4、以上几点比较好掌握 ~~也能在瞬间提升逼格还比较实用,效果还杠杆滴

    转载于:https://www.cnblogs.com/LiMin/p/10614806.html

    展开全文
  • 前端优化总结

    2021-03-23 14:17:12
    前段时间简单的研究了下前端优化相关的知识,本文算是一个阶段性的总结,或者当做一个优化的参考List。前言前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对...
  • 最全前端优化方案

    2020-12-19 16:30:33
    最全前端优化方案笔记
  • 前端优化文档

    2011-09-06 11:06:09
    前端优化文档,前端优化,css样式,图片,js样式
  • web前端优化

    2012-08-04 22:18:15
    web前端优化.doc
  • 摘要: 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...

    摘要: 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进行前端页面优化,但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去做,先看看什么是前端性能,应该怎样去了解和评价前端页面的性能。

    通过性能测速和分析,我们基本可以获取收集到页面上大部分的具体性能数据,如何根据这些数据采取适当的方法和手段对当前的页面进行优化呢?目前来看,前端优化的策略很多,如YSlow(YSlow是Yahoo发布的一款Firefox插件,可以对网站的页面性能进行分析,提出对该页面性能优化的建议)原则等,总结起来主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类,下面逐一介绍。

    一、 网络加载类

    1.减少HTTP资源请求次数

    在前端页面中,通常建议尽可能合并静态资源图片、JavaScript或CSS代码,减少页面请求数和资源请求消耗,这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、CSS、JavaScript文件等都是为了减少HTTP资源请求次数。另外也要尽量避免重复的资源,防止增加多余请求。

    2.减小HTTP请求大小

    除了减少HTTP资源请求次数,也要尽量减小每个HTTP请求的大小。如减少没必要的图片、JavaScript、CSS及HTML代码,对文件进行压缩优化,或者使用gzip压缩传输内容等都可以用来减小文件大小,缩短网络传输等待时延。前面我们使用构建工具来压缩静态图片资源以及移除代码中的注释并压缩,目的都是为了减小HTTP请求的大小。

    3.将CSS或JavaScript放到外部文件中,避免使用

    展开全文
  • 前端优化方案

    2019-05-27 11:08:29
    为了让用户得到更好的体验,我们经常会采用一些手段来优化我们的前端工程,下面给大家简单介绍一些前端优化的方案

    为了让用户得到更好的体验,我们经常会采用一些手段来优化我们的前端工程,下面给大家简单介绍一些前端优化的方案

    参照雅虎前端军规进行简单网页的优化

    我们的优化原则有以下几个:

    • 能缓存的,尽量强缓存。
    • 引入外部资源时不要出现超时、404的状况。
    • 减少HTTP请求数。
    • 合理设置cookie的大小以及过期时间。
    • 合理利用懒加载。

    网页内容的优化

    1、懒加载数据。
    首先根据标签的left和top属性判断是否显示在了屏幕中(如果显示在屏幕中,其left和top属性值应该是在0到窗口长宽之间)。
    如果显示在屏幕中,则将src标签的内容替换为图片的url。

    2、使用外部引入的css和js文件,并且引入的css和js越少越好(HTTP2.0不适用)。
    这里可以使用webpack打包这些文件,也可以使用强缓存与协商缓存来缓存这些文件。

    3、不要在中缩放图片。
    img计算缩放也需要时间

    4、避免重定向。
    重定向会重新渲染网页。

    5、尽量不要用iframe。
    因为iframe会阻塞渲染。

    6、使用base64编码将图片嵌入到样式表中,减少请求数(由于base64会比一般的图片大一点,只适用于那些体积比较小但是很常用的图片)。

    7、使用雪碧图(精灵图):
    通过使用background-position:-xpx -ypx;来调整图片的位置,不过HTTP2不适用,原因为HTTP2实际上是多路复用的,只用一个TCP连接,所以多个图片的请求也是在同一个TCP连接里,这样能省下非常多的请求时间,但坏处就是单连接开销很大,如果要传多个大文件,就很麻烦。

    8、要有网站小图标favicon.ico。

    如果没有小图标,会引起404,拖慢网页加载进度。

    9、能使用jpeg就不要用png,能使用png8就不要用png24。
    (1)色彩丰富的、大的图片切成jpg的;
    (2)尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的;
    (3)半透明的切成png24。

    10、使用canvas压缩图片。

    css的优化

    1、避免使用@import。
    使用@import相当于将引入的css放在了页面底部,因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后,浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、构建render tree等一系列操作。因此使用@import会拖慢渲染的过程。

    2、将样式表放在head中。
    如果放在body中,可能出现在浏览器下载好css样式表之前,组件就已经加载好了的情况,这可能会导致重新渲染。

    3、避免使用css表达式。
    如:expression((new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00” );
    解析表达式和计算都需要时间。

    JavaScript的优化

    1、尽量减少DOM访问。

    2、使用事件代理(减少DOM操作)。

    3、把脚本放在底部(加载脚本时会阻塞页面渲染)。

    4、合理使用节流函数和防抖函数。
    在这里插入图片描述

    使用CDN优化加载速度

    CDN即内容分发网络。它依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。

    在这里插入图片描述

    针对webpack打包优化

    针对webpack打包优化主要是减少打包后的代码体积,主要的措施有:
    1、进行tree-shaking
    2、使用UglifyJS等插件压缩代码
    3、分割代码、按需加载

    我们可以使用webpack-bundle-analyzer这个插件来查看每部分代码的加载耗时,进而分析可以优化的地方。

    开启Gzip压缩

    这是一个非常有效的优化方案,可以减少60%左右的代码体积,使用node.js+express可以非常便捷的开启Gzip

    const express = require('express'); 
    const app = express();
    const compression = require('compression'); 
    app.use(compression()); // 注意,使用compression中间件必须要在其他中间件之前
    
    展开全文
  • 前端优化笔记

    2019-04-10 20:12:26
    前端优化 DNS预解析 (待完成)

    前端优化

    https://mp.weixin.qq.com/s/qqy_2pUXVcSd9wW1-MSzcg
    https://mp.weixin.qq.com/s/DapiwE-AhML-Mm4r0b_sWg
    http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html
    https://juejin.im/post/5c011e0c5188252ea66afdfa
    https://github.com/AlloyTeam/Mars/blob/master/performance/high-performance-css3-animation.md (高性能css3 动画)
    如何只使用CSS提升页面渲染速度

    DNS预解析

    (待完成)

    passive 移动端滚动事件优化

    passive的作用和原理

    附:编码相关

    [2019-04-14]
    arguments 不建议通过参数的形式传递给其他function,这样不利于V8 的优化;

    其他:
    死链检测: http://tool.chinaz.com/Links/
    Gzip压缩检测: http://tool.chinaz.com/gzips/
    Google page speed :https://developers.google.com/speed/pagespeed/

    展开全文
  • 前端优化 学习笔记

    2021-03-30 20:16:12
    前端优化 学习笔记
  • 前端优化的几种方法

    2019-01-11 10:24:33
    前端优化的几种方法,里面包含了前端主流的几种优化方法
  • 摘要: 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,...
  • web前端优化方法

    2015-03-20 16:11:52
    web前端优化的一些自己从网上参考的方法然后总结出的内容
  • 前端优化总结大全

    2020-07-15 11:09:42
    前端优化总结! 什么是前端性能优化? 从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度 为什么要做前端性能优化? 在构建web...
  • 前端优化方法有哪些

    2021-03-14 20:30:39
    前端优化方法有哪些 文章目录前端优化方法有哪些前言一、http方面二、CSS方面三、js方面四、图片方面 前言 前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对...
  • 前端优化项目主要包括以下几项: 减少HTTP请求(合并请求)。 使用CDN数据加速(各地独立的内容分发机制)。 合理地使用 Expires 头来增加缓存效果。 使用动态或者静态压缩技术,并且压缩 JS 或 HTML 等文本格式...
  • 前端优化常用技术

    2018-10-30 18:11:33
    前端优化常用技术 加载 阻塞性优化 执行优化 作用域优化 循环优化 避免双重解释 最小化语句数 性能的其它注意事项 数据存储 作用域 原型和原型链 重排 reflow 和重绘 repaint 会导致重排重绘的情况: 避免...
  • 漫谈前端优化

    2016-10-08 19:52:00
    漫谈前端优化 转载于:https://www.cnblogs.com/lichaoqing/p/5939950.html
  • 无论是在工作中,还是在面试中,web前端性能的优化都是很重要的,那么我们进行优化需要从哪些方面入手呢,这篇文章主要介绍了浅谈雅虎前端优化的35条军规,感兴趣的小伙伴们可以参考一下
  • 如何进行前端优化

    2020-11-25 14:35:24
    前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,308
精华内容 10,923
关键字:

前端优化