全部文章
共 1299 篇文章
前端性能优化-CSS性能优化
一、内联首屏关键CSS 渲染的大概流程： 加载HTML资源 解析HTML 加载CSS资源，同时构建DOM树 解析CSS，同时渲染DOM树 当CSS文件过大，就会停留在第3步，网速慢时，打开网站的时候经常遇到没有样式的情况。 所以我们需要先加载部分CSS（首屏需要用到的CSS），其他优先级比较低的CSS就以异步的方式加载。 将渲染首屏内容所需的关键CSS内联到HTML中，能使CSS更快速地下载。在HTML下载完成之后就能渲染了，页面渲染的...
前端模块化规范详细总结
模块化就是将一个复杂的应用程序，按照规范拆分成几个相互独立的文件，这些文件里面完成共同的或者类似的逻辑，通过对外暴露一些数据或者调用方法，与外部整合 这样每个文件彼此独立，我们开发者更容易开发和维护代码，特别是当开发的项目越来越大，代码复杂性也不断增加，这对于模块化的需求也会越来越大 模块化主要特点是： 、 、 、 所以使用模块化可以帮我们解决什么问题呢？ 解决了命名冲突 ：因为每个模块是独立的，所以变量或函数名重名不会发生冲突 提高可...
网站图片加载慢怎么优化
一个页面上有大量的图片，加载很慢，你有哪些方法优化这些图片的加载？ <a id="t1" </a <a id="1 Sprites 2" </a 1、使用 Sprites 图片技术 它将一个页面涉及到的所有零星图片都包含到一张大图中去，然后利用 CSS 技术展现出来。这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了，可以减少了整个网页的图片大小，并且利用 能很好地减少网页的 请求，从而大大的提高页面的性能。...
说下 generator 原理
什么是 Generator： ES6 引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程解决方案 如何使用 Generator： Generator 原理： Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。 整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用y...
读懂React原理之调和与Fiber
一 引沿 Fiber 架构是React16中引入的新概念，目的就是解决大型 React 应用卡顿，React在遍历更新每一个节点的时候都不是用的真实DOM，都是采用虚拟DOM，所以可以理解成fiber就是React的虚拟DOM，更新Fiber的过程叫做调和，每一个fiber都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime，来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动...
输入URL到显示页面的全过程
从浏览器地址栏输入 url 到显示页面的步骤 <a id="t1" </a <a id=" 2" </a 基础版本 ： 1. 浏览器根据请求的 交给 域名解析 ，找到真实 ，向服务器 发起请求 ； 2. 服务器交给后台处理完成后 返回数据 ，浏览器 接收⽂件 （ 、 、 、图象等）； 3. 浏览器对加载到的资源（ 、 、 等）进⾏语法解析，建立相应的内部数据结构 （如 的 ）； 4. 载⼊解析 到的资源⽂件， 渲染页面 ，完成。 <a...
CSS选择器有哪些
1、标签选择器 以标签名开头，选择所有div元素 2、类选择器 给标签取class名，以点（.）加class名开头，选择所有该class名的元素 3、id选择器 给标签取id名，以#加id名开头，具有唯一性，选择”id = ‘wrap’”的元素 4、子选择器 以 隔开父子级元素，(模块名 模块名，修饰 前模块内的子模块) 5、包含选择器 以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块) 6、兄弟选择器 以 隔开兄弟...
ES5如何实现继承（附每种继承方式优缺点）
ES5如何实现继承（附每种继承方式优缺点） 原型链的核心只需要记住三点： 1. 每个对象都有\ \ proto\ \ 属性，该属性指向其原型对象，在调用实例的方法和属性时，如果在实例对象 上找不到，就会往原型对象上找 2. 构造函数的prototype属性也指向实例的原型对象 3. 原型对象的constructor属性指向构造函数 ·一. 原型链继承 继承的原理很简单，直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时...
JS中0.1+0.2为什么不等于0.3
0.1+0.2 的计算过程计算过程 1、十进制转成二进制 在JS内部所有的计算都是以二进制方式计算的。 所以运算 0.1+ 0.2 时要先把 0.1和 0.2 从十进制转成二进制。 0.1转化成二进制的算法： 0.1 2=0.2======取出整数部分0 0.2 2=0.4======取出整数部分0 0.4 2=0.8======取出整数部分0 0.8 2=1.6======取出整数部分1 0.6 2=1.2======取出整数部分1...