css优化 | 易学教程

Web前端基础知识总结

阅读更多关于 Web前端基础知识总结

一、HTML和CSS 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么 ? IE: trident 内核 Firefox：gecko内核 Safari:webkit内核 Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核 Chrome:Blink(基于webkit， Google与Opera Software共同开发 ) 每个 HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面） Quirks 模式是什么？它和Standards模式有什么区别从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能

网站的打开速度往往被css等文件影响着

阅读更多关于网站的打开速度往往被css等文件影响着

　　我想大家都接触过Javascript和CSS吧，网站大量的特性都会用到Javascript和CSS文件，如果网站做大了，这些文件也会越来越多，这些文件一多了，就要影响到网站打开得速度，怎么解决这个问题呢？减少Javascript和CSS文件的大小，从而提高我们网站打开速度；　　如何知道是哪些css、html等文件影响了网站打开速度呢？　　iis7网站监控　　获取严重占用加载时间的JS或者图片、css等html所用文件。　　当我们的网站内容多了之后，我们打开自己的网站就会非常的慢，有很多人呢就会换好的服务器，和增加带宽；其实不是这样的，不妨我通过一些优化减少占用服务器和宽带的资源，从而提高网站打开得速度；　　一、压缩html和javascript：　　使用JavaScript-HTML格式化，打开页面，压缩的文件js文件：common.js ，把js代码复制到到JavaScript/HTML格式化里面进行压缩。javascript代码压缩后，我们就把这些代码在复制到common.js文件里面，在吧这个文件上传到空间原来的位置，进行访问是否存在一些错误，如果没有什么问题说明压缩成功；　　二、压缩css文件：　　打开Css压缩/格式化页面，压缩的文件是css主文件style.css，把style.css 代码放到Css压缩/格式化里面，压缩后的css代码

浏览器DOM渲染及阻塞问题

阅读更多关于浏览器DOM渲染及阻塞问题

在准备面试，然后复习到了计网的知识点，紧接着又扯到了 url从输入到浏览器渲染的那个问题，这里来顺便完善补充一下，本文的重点在渲染上面的图就是浏览器从服务器请求来页面后渲染的全过程这里我们分开来看：分为了四大步解析DOM树和CSSOM 1.HTML标签进行Dom树解析：在Dom树解析的过程中，遇到link会去进行请求资源，这个过程不会阻塞Dom的解析；遇到script标签，则会将解析停下来，去执行js代码，因此script标签通常建议放在</body>之前，能优化用户体验，减少白屏时间，还可以使用js动态加载生产script标签（PS：这个jsonp跨域请求有在使用）这里需要注意 img标签是不会阻塞Dom的解析的，虽然他也有src标签去请求外部资源下面是大佬思否上的原话：解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script的加载或者执行都会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 2

浏览器解析和渲染过程

阅读更多关于浏览器解析和渲染过程

html各种渲染都是从浏览器开始的，分为浏览器解析和浏览器渲染两大步骤一、浏览器解析 1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。 2、HTML 文件加载后，开始构建 DOM Tree 3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree 4、Javascript 脚本文件加载后，通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree 二、浏览器渲染 1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree 2、Rendering Tree 并不与 DOM Tree 对应，比如像标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中。 3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。 4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。 1.浏览器加载和渲染html的顺序浏览器加载和渲染html的顺序 IE下载的顺序是从上到下，渲染的顺序也是从上到下

前端性能优化----优化方法

阅读更多关于前端性能优化----优化方法

提到前段性能优化，不可避免的都会想到如下的解决方案：（1）减少HTTP请求（合并css、js，雪碧图/base64图片、CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存，图片服务器。）（2）压缩（css、js、图片等前端资源皆可压缩，通常是由服务器来解决）（3）图片预加载，将样式表放头部，脚本放底部加上时间戳（4）使用CDN，采用CDN来加速资源加载（这部分，不少前端都不用考虑，负责发布的兄弟可能会负责搞好）（5）缓存…… （6）程序的性能优化（如：数据读写）（7）对于JS DOM的优化（用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。）（8）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。（9）HTTP的服务器的文件优化（10）当需要设置的样式很多时设置className而不是直接操作style。（11）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。（12）避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢来源： https://www.cnblogs.com/syw20170419/p/11937713.html

web前端入门到实战：五个最新的CSS特性以及如何使用它们

阅读更多关于 web前端入门到实战：五个最新的CSS特性以及如何使用它们

虽然CSS简单，但CSS是一门非常有意思的语言，CSS每年都有变化，而且都有不同的博主都在不同的时间段总结一些CSS的新特性。虽然这些新特性无法立刻得到众多浏览器的支持，但总是随着时间的发展，这些特性都会得到浏览器的支持。哪怕未得到支持，也有一些方法让浏览器支持，比如最为出外的 cssnext ，就可以让很多未来的CSS特性就立马使用，并且不用花太多时间来考虑浏览器的兼容性。接下来要介绍的五个CSS新特性是： CSS Display Module Level 3 ： display:contents CSS Conditional Rules Module Level 3 ： @support(...){...} CSS Overscroll Behavior Module Level 1 ： overscroll-behavior: contain CSS Selectors Module Level 4 ： :focus-within ， :placeholder-shown CSS Containment Module Level 1 ： contain:paint 这些CSS特性，估计有些同学已经接触过了，如果你未接触过，建议你继续跟随着下面的步骤继续往下阅读。案例：创建一个新闻提要（Newsfeed）通过一个新闻提要为例

2019.08.17 Webpack4 bilibi

阅读更多关于 2019.08.17 Webpack4 bilibi

将这些依赖打包吗？ es6转es5，将sass，less，转成css。文件优化：压缩代码体积，合并文件。代码分割：公共模块的处理，路由懒加载功能。模块合并：功能模块分类自动刷新来源： https://www.cnblogs.com/Py-king/p/11368326.html

CSS重排和重绘

阅读更多关于 CSS重排和重绘

一、什么是重绘Repaint和重排（回流 reflow）重绘:当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘。重排（回流）:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM树重新计算的过程重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）二、引起重绘Repaint和重排（回流reflow ）的属性 2.1 引起重绘Repaint的属性常见的重绘元素 color border-style visibility background text-decoration background-image background-position background-repeat outline-color outline outline-style border-radius outline-width box-shadow background-size 2.2 引起重排（回流reflow）的场景和属性 1.添加、删除可见的dom 2.元素的位置改变 3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性) 4.页面渲染初始化 5.浏览器窗口大小改变 6.设置style属性 7.改变文字大小 8.添加/删除样式表 9.激活伪类，如

css优化滚动条样式

阅读更多关于 css优化滚动条样式

刚给div加了滚动条，发现默认的样式很难看，所以想美化一下，搜了一下找到一个还不错，就记录下来 content是div的class名，也可以不加，就是全局样式 .content::-webkit-scrollbar { //滚动条整体样式 width : 10px ; height : 10px ; } .content::-webkit-scrollbar-thumb { //滚动条小方块样式 border-radius : 10px ; -webkit-box-shadow : inset 0 0 5px rgba ( 0,0,0,0.2 ) ; background : #B5BECB ; } .content::-webkit-scrollbar-track { //滚动条滚动轴样式 border-radius : 10px ; -webkit-box-shadow : inset 0 0 5px rgba ( 0,0,0,0.2 ) ; background : #EDEDED ; } 效果图：如果要隐藏横向滚动条，可以加入这段代码 .content { height : 500px ; box-shadow : 0 2px 4px rgba ( 0, 0, 0, .12 ) , 0 0 6px rgba ( 0, 0, 0, .04 ) ; /*overflow

Javascript之对象的继承

阅读更多关于 Javascript之对象的继承

前言本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证，不少答案都来源于网络，或许会有疏漏之处，仅供大家参考哦！(还有一部分问题答案还未整理，大家也可以自己搜索一下答案) 1.你能描述一下渐进增强和优雅降级之间的不同吗? 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效. 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。 2.线程与进程的区别一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中

订阅 css优化