External CSS vs inline style performance differenc

2楼-- · 2019-01-04 10:26

I prefer using inline CSS over external CSS where there are multiple small CSS files for every other element or image. No point in downloading several CSS files with merely 5-10 lines of code in each. If your element contains properties such as hover, active, checked etc. you're then supposed to use an external CSS file as it will avoid complicating your development process.

0人赞添加讨论(0) 举报

戒情不戒烟

3楼-- · 2019-01-04 10:27

Using external style sheets is definitely a better option because it will help you to remember the style you have applied on the div(s). It reduces the time of loading the page because the lesser the HTML code the faster it will load.

But in some cases you might have to change some property of a particular div then the inline style is the best option. And truly speaking, one or two inline style won't make any change the time of loading the page.

There is another option of internal style sheet but it is used only when you have a single page website like if you are making a template. This is because you have to write CSS in every HTML page

0人赞添加讨论(0) 举报

放荡不羁爱自由

4楼-- · 2019-01-04 10:29

Well it can but the reason for the linked or external style sheet is so it can be cached in the browser especially when your using the same div in multiple pages for the site. This means the browser only has to load the style sheet once instead of having to reload the code every time the browser reloads page. It also makes for cleaner code which makes any changes or debugging easier.

0人赞添加讨论(0) 举报

时光不老，我们不散

5楼-- · 2019-01-04 10:34

The page will load faster if you use inline styles vs style sheets. In some cases must faster.

When you use a style sheet using href it requires another request to the server, then the parsing of the file after response. With inline styles there is none of that, just direct parsing.

If a client has slow internet then that single request could be very slow leaving the page style-less until the style sheet get delivered. Again, if it were inline there would be no delay at all.

The only reason we use style sheets is to be organised. There are times when they are not needed, so inline styles or in-document style sheets suffice.

0人赞添加讨论(0) 举报

仙女界的扛把子

6楼-- · 2019-01-04 10:38

It's not an easy question to answer, because the perfomance in this case depends on many factors (complexity of CSS selectors, document size, etc.). However, if we take an isolated case, then we can see that CSS class is in general faster than inline style:
Inline style vs CSS class

0人赞添加讨论(0) 举报

小情绪 Triste *

7楼-- · 2019-01-04 10:39

THE TRUTH IS 'YES'

There is a huge difference. Especially when you are automating user interface. Try the following code. I use IE10 and notepad to develop. I am learning as I go and make tests this is a shortened version test. (there maybe errors as I reduced the code to show your answer)

Click on the image you reference and read the alert messages. HINT: Save this file the save again as an edit before editing (testing).

Best wishes, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>

0人赞添加讨论(0) 举报

External CSS vs inline style performance differenc

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间